CSS 中的 HSL 和 HSLA 与 RGB 和 RGBA

CSS 中的 HSL 颜色已经存在了十多年，但我发现它们仍然经常未被充分利用。 尽管它非常实用，但由于浏览器支持有限，许多开发人员避免使用 HSL CSS 功能。

随着浏览器对 HSL 颜色模型的支持越来越强大，它在开发人员和设计人员中越来越受欢迎。 前端开发人员可能会发现熟悉 HSL 很有帮助，特别是对于在 Figma 和 CSS 中创建快速灵活的颜色变化。

本文解释了 CSS 中 HSL 和 RGB 的区别以及如何使用 CSS HSL 函数来创建灵活的颜色系统。

• CSS中的颜色概述

• RGB和HSL的区别

• RGB 和 RGBA

• HSL 和 HSLA

• 为什么在 CSS 中使用 HSL？

• 使用 HSL 的灵活色彩系统

  • CSS HSL 功能的颜色变化

CSS中的颜色概述

如果您了解 CSS 的工作原理，您可能还知道命名颜色、十六进制颜色和 RGB 颜色。 它们三个都代表颜色及其在 CSS 中的用法 。

命名颜色是预定义的颜色值，例如 black, white, red, green等。命名颜色的问题在于它们是有限的，没有办法对其进行调整以获得各种颜色。

十六进制模型没有该义务，允许您使用十六进制代码选择颜色。 但是，该模型本身缺乏颜色处理的灵活性。 这就是 RGB 和 HSL 介入的地方。

RGB和HSL的区别

命名颜色易于阅读，但不够灵活，无法创建变化。 十六进制值的颜色更差，可读性差，几乎不可能发生颜色变化。

下面的示例说明了命名颜色和十六进制颜色之间的快速比较。 它还显示了通过读取相应的十六进制颜色代码来预测颜色是多么困难。

​

​

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

这些问题很容易用 CSS 中的 RGB 和 HSL 函数解决，但在我们开始实现它们之前，让我们看看它们提供了什么。

RGB 和 RGBA

CSS 中的 RGB 颜色函数 允许您指定红色、绿色和蓝色参数值来生成颜色。 结果将是所有这三个值的混合。

所有三个值都可能在 0 到 255 之间变化，并且在不参考色轮工具的情况下考虑结果是很棘手的。

CSS 中的 RGB 函数还有一个可选的第四个参数，负责最终颜色的不透明度。 它通常使用 RGBA 函数指定，但现代浏览器允许您在 RGB 函数本身中添加 alpha 值。

.selector {
  color: rgb(255, 0, 0); // Red or #ff0000
  color: rgba(255, 0, 0, .75); // Red with a 75% fill
  color: rgb(255 0 0 / 75%); // A shorthand to the `rgba()` function
}

前端开发人员经常匆忙使用 RGBA 来创建边框和较浅的颜色变化。 这是为了避免计算红色、绿色和蓝色值以获得特定阴影或色调的繁琐任务。

下面的示例通过在深色上实现白色的透明版本来演示这一点。 这里的问题是颜色不纯，因为我们必须依靠填充不透明度来生成它们。

​

​

在某些用例中，不透明的颜色版本可能无法满足可访问性要求并且总体上看起来不太好。 例如，元素的分层很容易因为不透明的颜色而变得混乱。

另一个这样的用例可能是背景颜色的变化，需要许多其他调整，例如不透明的前景和文本颜色。

除此之外，您仍然需要使用色轮工具来获取正确的 RGB 值以获得合适的较暗变化。

HSL 和 HSLA

HSL 颜色函数不是处理 RGB 等不同的颜色值，而是允许您控制指定颜色色调的饱和度和亮度。

HSL 代表色相、饱和度和亮度。 让我们通过检查它的三个主要组成部分来仔细看看它。

---

来自 LogRocket 的更多精彩文章：

• 不要错过 The Replay 来自 LogRocket 的精选时事通讯

• 使用 React 的 useEffect 优化应用程序的性能

• 之间切换 在多个 Node 版本

• 了解如何 使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri ，一个用于构建二进制文件的新框架

• 比较 NestJS 与 Express.js

• 发现 TypeScript 领域中使用的流行 ORM

---

色调只是颜色的同义词，饱和度是指色调的强度或纯度。 亮度衡量黑色或白色与给定色调混合的程度。

使用 HSL，您可以按角度（即度数）指定色调，并用百分比指定饱和度和亮度。 一个 0°色调与 100%饱和度和亮度会给我们红色。 同样，一个 240°色调与 50%饱和度和亮度将导致紫蓝色阴影。

借助上图，您可以记住 HSL 颜色模型的六个不同颜色区域，并通过相应地调整色调、饱和度和亮度来轻松创建颜色变化。 我们将在接下来的部分中介绍这一点。

这是 HSL 颜色模型在 CSS 中的使用方式 hsl和 hsla功能：

.selector {
  color: hsl(120, 50, 50); // A shade of green
  color: hsla(120, 50, 50, .45); // Green with a 75% fill
  color: hsl(120 50% 20% / 45%); // A shorthand to the `hsla()` function
}

为什么在 CSS 中使用 HSL？

正如上面所讨论的，颜色在网络上通常使用十六进制和 RGB 来表示，但这些都不是最好的方法。

通过查看十六进制或 RGB 代码很难预测颜色，因此很难用它们创建颜色变化。 HSL 通过将颜色表示为色调、饱和度和亮度来解决这个问题。 这三个都是人类直观感知的属性。

最好的部分是您可以在任何现代设计工具（如 Figma、Adobe XD 和 Sketch）中使用 HSL。 在下一部分中，我们将使用 CSS 和一些 Figma 来体验使用 HSL 颜色模型轻松创建和调整颜色值。

使用 HSL 的灵活色彩系统

我们只需要一个 HSL 值，我们可以使用它创建多种色调或色调。 诀窍在于调整给定色调的饱和度和亮度值。

让我们在 Figma 中挑选三种颜色样本，分别称为主色、次要色和强调色。

原色是在我们的 UI 中占据大部分（60%）净颜色使用的颜色。 第二个占净面积的 30%，通常是文字。 剩下的 10% 可能是使用强调色的突出部分。

我选择了我认为非常适合我的 UI 需求的颜色。 您还可以使用网络上现成的配色方案。

让我们采用原色，创建它的副本，并修改它的饱和度和亮度值，同时保持色调不变。

同样，您可以创建更多这样的变体； 下图用五种不同的色调和色调描绘了相同的图像。 作为练习，您可以尝试给定色调的更深和更浅的变化。

检查您的颜色的对比度和可访问性标准 快速提示：始终使用颜色对比度检查器插件 。

CSS HSL 功能的颜色变化

在确定色样的 HSL 值后，我们可以使用 CSS 自定义属性来不断地保持和重复选定的色调，即使我们修改饱和度和亮度以获得不同的色调和色调。

在上面的 Figma 示例中，让我们选择强调色的色调并使用 CSS HSL 函数创建一些色样。

色调值为 217，我们的强调色的饱和度为 50%和轻 40%. 以下是我们如何在 CSS 中使用这些信息并创建我们的主要原色样本：

:root {
  --accent-color-hue: 217;
  --accent-color-900: hsl(var(--accent-color-hue) 50% 40%);
}

同样，我们可以通过添加适当的饱和度和亮度值来添加更多变化，就像我们在 Figma 示例中所做的那样：

:root {
  --accent-color-hue: 217;
  --accent-color-900: hsl(var(--accent-color-hue) 50% 40%);
​
  --accent-color-800: hsl(var(--accent-color-hue) 40% 50%);
  --accent-color-700: hsl(var(--accent-color-hue) 30% 60%);
}

如果您不喜欢设计，您仍然可以轻松地修改饱和度和亮度参数并提出新的调色板。 通过参考上一节中分享的 HSL 色轮图，您可以更好地记住色调区域。

所有这些变化都是纯粹的纯色。 对于不透明的颜色，您始终可以指定 CSS HSL 函数的第四个参数。 下面是使用 CSS HSL 功能和自定义属性创建和使用调色板的简单实现：

老板键Bosskey摸鱼神器，支持一键隐藏任何程序，隐藏效果非常完美！

对颜色的敏锐洞察力会自动选择出色的颜色。 实现这一目标的唯一方法是经常观察和使用颜色。 如果您没有艺术或设计背景，我建议您 阅读更多关于色彩理论的基础知识。 在专业使用色彩之前

结论

就是这样！ 我们从简要介绍开始，然后讨论了十六进制、RGB 和命名颜色。 我们还了解了每个人的注意事项。 之后，我们将讨论 HSL 相对于其他三种颜色模型的优势。

我们讨论了如何在 Figma 中使用 HSL 来创建颜色变化，并学习了如何将它们与 CSS 一起使用。 我们现在可以生成永恒的调色板并将它们合并到 UI 中！

我希望你通过本教程学到了一些新东西。 如果您遇到困难，请在评论中告诉我。

您的前端是否占用了用户的 CPU？

随着 Web 前端变得越来越复杂，资源贪婪的功能对浏览器的要求也越来越高。 如果您对监控和跟踪生产环境中所有用户的客户端 CPU 使用情况、内存使用情况等感兴趣，请 尝试使用 LogRocket 。

LogRocket 就像一个用于 Web 和移动应用程序的 DVR，记录您的 Web 应用程序或网站中发生的一切。 无需猜测问题发生的原因，您可以汇总和报告关键前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。