了解如何通过 HSL 在 CSS 颜色中使用色调

告别旧，拥抱新<hue>！色调是 CSS 中定义颜色的绝佳方式。

我们在上一篇文章中介绍了 CSS 颜色函数，包括所有新增函数和描述颜色的方法，并深入探讨了颜色空间。如果您对颜色空间及其背后的科学原理感到不知所措，那么这篇文章正适合您。

在这篇文章中，我们将了解色调是什么，以及如何使用该hsl()函数在 CSS 中使用色调的第一步。

什么是色调？

色相是一种属性，使我们能够区分红色、橙色、黄色、绿色、蓝色等颜色之间的差异（或相似性）。除了色相之外，颜色的构成元素还有很多，我们稍后会介绍这一点，但现在，让我们看看使用色相来定义颜色意味着什么。

理解色调的关键概念是，你可以用一个角度<angle>（或一个表示角度的数字）来指定色调。之所以使用角度，<angle>是因为大多数颜色模型都使用类似这样的色轮来描述色调：

显示从 0 到 360 度的色调角度的色轮

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

色调为什么有用？

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``rebeccapurplergb()

这些常用的颜色设置方法为我们提供了极大的灵活性，让我们能够通过数百万种颜色（256 x 256 x 256）来设置颜色。但是，如果您想要某种颜色的变体，该怎么办呢？也许您想使用aliceblue稍微暗一点的颜色，或者使用#008000比深 50% 的颜色。如何才能得到比亮 10% 的颜色呢rgb(255 0 153)？

色调的优点在于，您可以选择一种颜色，然后使用其他属性（如饱和度（颜色的鲜艳程度）、亮度（颜色的明暗程度）和色度（颜色的强度））来创建它的变化。

色相作为角度的另一个好处是，你可以根据它们在色轮中的位置（例如，三种颜色，每一种相差 10 度）找到相关的颜色，或者根据相关的颜色制作调色板。我们稍后会详细讲解如何做到这一点。

如何使用这个`hsl()`功能？

如果你想在 CSS 中尝试色相，我相信你应该从hsl()函数开始，该函数允许你按顺序定义色相、饱和度和亮度。让我们在以下部分中看hsl(hue, saturation, lightness)一下使用该函数定义的一些颜色。hsl()

使用以下方法定义红色、绿色和蓝色 hsl()

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

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

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

改变色调

为了了解饱和度值的工作原理，让我们看一下饱和度值从 100% 降低到 0% 的红色：

<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>

#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% */

最终，我们得到了灰色，任何hsl()饱和度为 0% 的值都会根据亮度值呈现出灰色阴影。hue当饱和度为 0% 时，该值不会对颜色产生任何影响。我们将在下一节中对此进行实验，看看效果如何。

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

页面上<hue>有一个示例，您可以使用类似的滑块更改元素的色调hsl(<slider-value> 100% 50%)。我们可以以此为起点，在此基础上添加更多输入，以便我们还可以控制饱和度和亮度：

<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);

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

使用变量在多个位置更改色调

假设我们想在多个地方使用相同的色调值。我们可以使用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% */

<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 度：

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

现在我们开始变得色彩缤纷了！我们可以在色轮上旋转 360 度，看看颜色是如何随着色调角度变化的，每个色相框相隔 10 度。

概括

让我们回顾一下本文所学的内容。我们涵盖了：

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

后续步骤 Next steps

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