Learn how to use hue in CSS colors title. Explore color wheels and hues with HSL subtitle. A vibrant gradient behind artwork of a laptop and keyboard.

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

Brian Smith2023 年 6 月 26 日阅读时间：8 分钟

告别旧的，迎接 <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(hue, saturation, lightness)。让我们在以下部分查看一些使用 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 颜色中的新函数、渐变和色相（第 4 级）全面概述了不同的颜色函数及其外观。

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

有用资源

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

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

什么是色相？

为什么色相有用？

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

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

创建色相的变体

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

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

根据色相角选择相关颜色

总结

后续步骤

有用资源

上一篇引入 MDN 游乐场：让您的代码栩栩如生！

下一篇引入 AI 助手（测试版）：您的 Web 开发伴侣

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

上一篇 引入 MDN 游乐场：让您的代码栩栩如生！

下一篇 引入 AI 助手（测试版）：您的 Web 开发伴侣

关注 MDN 最新动态

上一篇引入 MDN 游乐场：让您的代码栩栩如生！

下一篇引入 AI 助手（测试版）：您的 Web 开发伴侣