学习如何在 CSS 颜色中使用 HSL 中的色相

抛弃旧的，拥抱新的 <hue>！色相是 CSS 中定义颜色的绝佳方式。

我们在上一篇文章中介绍了 CSS 颜色函数，包括所有新的函数和描述颜色的方法，并简要介绍了色彩空间。如果您对色彩空间和其背后的科学感到不知所措，那么这篇文章就是为您准备的。

在本文中，我们将探讨什么是色相，以及如何使用 hsl() 函数在 CSS 中迈出使用色相的第一步。

什么是色相？

色相是使我们能够区分（或相似）红、橙、黄、绿、蓝等颜色之间的属性。除了色相，还有其他因素构成颜色，我们稍后会讲到，但现在，让我们看看使用色相定义颜色意味着什么。

理解色相的关键概念是，您可以用一个 <angle>（或代表度数的数字）来指定色相。使用 <angle> 的原因是，大多数颜色模型都使用一个看起来像这样的色轮来描述色相。

A color wheel showing the hue angles from 0 to 360 degrees

从 0 到 360 度是一个完整的圆，我们可以使用此范围内的任何数字来描述一种颜色。并非所有颜色函数都使用相同的色轮，因此在一个函数中 180 度可能与另一个函数中的 180 度颜色不同。您可以在 <hue> 页面上看到一些示例。

色相有什么用？

CSS 提供了多种惊人的方式来选择页面样式颜色——甚至还没有使用色相。您可能正在使用以下某种方式在 CSS 中定义颜色：

css

/* A named color */
hotpink

/* A # hexadecimal value */
#ff0099

/* An RGB function with 256 values for red, green, and blue */
rgb(255 0 153)

这给了我们十六进制值，如 #ff0000，以及命名颜色，如 aliceblue 或 rebeccapurple。您可能正在使用 rgb() 函数（或“函数表示法”），它允许您独立设置红色、绿色和蓝色值。

这些常见的设置颜色的方法为我们提供了极大的灵活性，可以从数百万种颜色中选择（256 x 256 x 256）。但如果您想要特定颜色的变体呢？也许您想使用 aliceblue，但饱和度稍低一些，或者使用 #008000 这样的颜色，但亮度降低 50%。如何获得比 rgb(255 0 153) 亮 10% 的颜色？

色相的优点在于，您可以选择一种颜色，并通过其他属性（如饱和度（颜色的鲜艳程度）、亮度（颜色的浅或深程度）和色度（颜色的强度））来创建其变体。

色相作为角度的另一个好处是，您可以根据颜色在色轮上的位置找到相关的颜色（例如，相隔 10 度的三种颜色），或基于相关颜色创建调色板。我们稍后将具体了解如何做到这一点。

如何使用 `hsl()` 函数？

如果您想在 CSS 中尝试使用色相，我认为您应该从 hsl() 函数开始，该函数允许您按顺序定义 **色相**、**饱和度** 和 **亮度**，形式为 hsl(色相, 饱和度, 亮度)。让我们在接下来的部分中看一些使用 hsl() 函数定义的颜色。

使用 `hsl()` 定义红色、绿色和蓝色

这是一个非常基础的示例，用于说明 hsl() 函数的工作原理。当您查看 0、120 和 240 度时的角度时，您会发现它与上面的色轮相匹配。

css

#red {
  background-color: hsl(0 100% 50%);
}
#green {
  background-color: hsl(120 100% 50%);
}
#blue {
  background-color: hsl(240 100% 50%);
}

div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  display: inline-block;
  font-family: sans-serif;
}

html

<div id="red">Red</div>
<div id="green">Green</div>
<div id="blue">Blue</div>

创建色相的变体

为了了解饱和度值是如何工作的，让我们看一种红色，其饱和度值从 100% 降低到 0%。

html

<div id="red-hsl">sat. 100%</div>
<div id="red-hsl-80">sat. 80%</div>
<div id="red-hsl-60">sat. 60%</div>
<div id="red-hsl-40">sat. 40%</div>
<div id="red-hsl-20">sat. 20%</div>
<div id="red-hsl-0">sat. 0%</div>

div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  display: inline-block;
  font-family: sans-serif;
}

css

#red-hsl {
  background-color: hsl(0 100% 50%);
}
#red-hsl-80 {
  background-color: hsl(0 80% 50%);
}
#red-hsl-60 {
  background-color: hsl(0 60% 50%);
}
/* Continue with saturation values 40%, 20%, and 0% */

#red-hsl-40 {
  background-color: hsl(0 40% 50%);
}
#red-hsl-20 {
  background-color: hsl(0 20% 50%);
}
#red-hsl-0 {
  background-color: hsl(0 0% 50%);
}

最终，我们得到一种灰色，任何饱和度为 0% 的 hsl() 值都会是一种灰色，具体取决于亮度值。当饱和度为 0% 时，hue 值对颜色没有影响。让我们在下一节中进行实验，看看它是什么样的。

使用 hsl() 探索色相、饱和度和亮度

在 <hue> 页面上，有一个示例，您可以使用滑块 hsl(<slider-value> 100% 50%) 来改变元素的色相。我们可以以此为例，并通过添加更多输入来扩展它，以便我们也可以控制饱和度和亮度。

div {
  width: auto;
  height: 150px;
  margin: 10px;
  border: 1px solid black;
  left: 50%;
}
p {
  font-family: sans-serif;
}
span {
  font-family: monospace;
  background: rgb(0 0 0 / 0.1);
  padding: 3px;
}
input {
  width: 30%;
  display: inline-block;
}
#box {
  background-color: hsl(0 100% 50%);
}

html

<div id="box"></div>

<input type="range" min="0" max="360" value="0" step="0.1" id="h-slider" />
<input type="range" min="0" max="100" value="100" step="0.1" id="s-slider" />
<input type="range" min="0" max="100" value="50" step="0.1" id="l-slider" />

<p>Hue: <span id="h-value">0deg</span></p>
<p>Saturation: <span id="s-value">100%</span></p>
<p>Lightness: <span id="l-value">50%</span></p>
<br />
<button>Reset</button>

为了使其具有交互性，我们可以获取滑块的值，并将它们替换为函数中的参数，如 hsl(slider1 slider2 slider3)。我们调用一个函数来更新框，而不是重复代码来更新每个滑块的值，当任何滑块发生变化时，该函数会更新框。

const box = document.querySelector("#box");

const hue = document.querySelector("#h-slider");
const saturation = document.querySelector("#s-slider");
const lightness = document.querySelector("#l-slider");

const updateBox = () => {
  // Set hsl(<hue>deg, <saturation>%, <lightness>%)
  box.style.backgroundColor = `hsl(${hue.value} ${saturation.value}% ${lightness.value}%)`;
  // Some feedback so we can see the values changing
  document.querySelector("#h-value").textContent = `${hue.value}deg`;
  document.querySelector("#s-value").textContent = `${saturation.value}%`;
  document.querySelector("#l-value").textContent = `${lightness.value}%`;
};

hue.addEventListener("input", updateBox);
saturation.addEventListener("input", updateBox);
lightness.addEventListener("input", updateBox);

const button = document.querySelector("button");
button.addEventListener("click", () => {
  hue.value = 0;
  saturation.value = 100;
  lightness.value = 50;
  updateBox();
});

请注意，当饱和度为 0% 时，色相值对颜色没有影响。当亮度为 0%（黑色）或 100%（白色）时，色相和饱和度值也没有影响。

使用变量在多个地方更改色相

假设我们想在多个地方使用相同的色相值。我们可以为此使用 CSS 自定义属性。

div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  display: inline-block;
  font-family: sans-serif;
}
input {
  width: 90%;
}

css

:root {
  --hue: 0;
}

#red-hsl {
  background-color: hsl(var(--hue) 100% 50%);
}
#red-hsl-80 {
  background-color: hsl(var(--hue) 80% 50%);
}
/* Continue for saturation values 60%, 40%, 20%, and 0% */

#red-hsl-60 {
  background-color: hsl(var(--hue) 60% 50%);
}
#red-hsl-40 {
  background-color: hsl(var(--hue) 40% 50%);
}
#red-hsl-20 {
  background-color: hsl(var(--hue) 20% 50%);
}

html

<div id="red-hsl">100%</div>
<div id="red-hsl-80">80%</div>
<div id="red-hsl-60">60%</div>
<div id="red-hsl-40">40%</div>
<div id="red-hsl-20">20%</div>
<!-- We don't need a 0% saturation div because it's always gray -->

<input type="range" min="0" max="360" value="0" step="0.1" id="hue" />

const hue = document.querySelector("#hue");

const updateHue = () => {
  document.documentElement.style.setProperty("--hue", hue.value);
};

hue.addEventListener("input", updateHue);

将这些部分组合在一起的优点是，我们可以为项目选择一种颜色，然后在多个地方使用相同的色相值。我们可以将其用作需要突出的元素的配色方案，或显示某种状态（例如禁用的按钮），同时为每个元素使用相同的色相值。

根据色相角度选择相关颜色

我之前提到过，您可以根据颜色在色轮上的位置找到相关的颜色。让我们通过在前一个示例的总体思想基础上进行一些扩展，并引入更多相同颜色的变体来尝试一下。我们不会改变饱和度或亮度值，但会为每个框将色相值改变 10 度。

html

<div id="color-1"></div>
<div id="color-2"></div>
<div id="color-3"></div>
<div id="color-4"></div>
<div id="color-5"></div>
<div id="color-6"></div>
<div id="color-7"></div>
<input type="range" min="0" max="360" value="0" step="0.1" id="hue" />

我们基于上一节的示例进行扩展，但添加了 calc() 函数，以便我们可以根据第一个框的色相值计算不同的颜色。对于每个框，我们将前一个框的色相值增加 10 度。

div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  display: inline-block;
}
input {
  width: 90%;
}

css

:root {
  --hue: 0;
}

#color-1 {
  background-color: hsl(var(--hue) 100% 50%);
}
#color-2 {
  background-color: hsl(calc(var(--hue) + 10) 100% 50%);
}
#color-3 {
  background-color: hsl(calc(var(--hue) + 20) 100% 50%);
}
#color-4 {
  background-color: hsl(calc(var(--hue) + 30) 100% 50%);
}
#color-5 {
  background-color: hsl(calc(var(--hue) + 40) 100% 50%);
}
#color-6 {
  background-color: hsl(calc(var(--hue) + 50) 100% 50%);
}
#color-7 {
  background-color: hsl(calc(var(--hue) + 60) 100% 50%);
}

const hue = document.querySelector("#hue");

const updateHue = () => {
  document.documentElement.style.setProperty("--hue", hue.value);
};

hue.addEventListener("input", updateHue);

现在我们开始变得丰富多彩了！我们可以沿着色轮循环 360 度，并查看颜色如何随着色相角度的变化而变化，每个框之间相隔 10 度。

总结

让我们回顾一下本文中学习到的内容。我们已经涵盖了

指定颜色的常用方法：命名颜色、rgb() 函数和十六进制值。
什么是色相，以及为什么hsl() 函数是 CSS 中色相的一个很好的起点。
如何使用自定义属性和calc() 函数计算颜色的变体。

后续步骤

现在您知道如何使用 hsl() 函数了，扩展本文中的示例或尝试使用alpha 值使颜色透明会很有趣。您能基于最后一个示例来控制饱和度和亮度等其他值吗？如何构建颜色选择器，或者尝试将 rgb() 转换为 hsl() 值？

如果您想了解更多信息，请务必查看 <hue> 参考页面，了解色相角度和其他颜色函数的详细信息。请务必查看色相插值方法页面，如果您想了解更多关于计算两个色相之间的颜色，特别是如果您想创建渐变或混合颜色，这是一个有趣的读物。上一篇文章 CSS 颜色（Level 4）中的新函数、渐变和色相对不同的颜色函数及其外观进行了全面的概述。

希望您喜欢这篇文章。随时在我们的 Discord 服务器或 GitHub 上与我们联系，分享您的想法、提问或展示您的作品。我要特别感谢 Yarusome 对色相和插值文档的改进，并添加了出色的图表来帮助解释这些概念。下次再见，祝您编码愉快！🎨

有用资源

Lea Verou 的颜色选择器
现代 CSS 颜色指南：RGB、HSL、HWB、LAB 和 LCH (2021)
设计师的色彩理论，第二部分：理解概念和颜色术语 (2017)
在 CSS 中使用 HSL 颜色 (2021)