CSS中的HSL和HSLA与RGB和RGBA的对比

CSS中的HSL颜色已经存在了10多年，但我发现它们仍然经常没有得到充分利用。尽管它有很大的效用，但由于浏览器对它的支持有限，许多开发者都避免使用HSL CSS功能。

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

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

如果你知道CSS的工作原理，你可能也知道命名的颜色、十六进制颜色和RGB颜色。这三种颜色都代表了颜色和它们在CSS中的用法。

命名的颜色是预定义的颜色值，如black 、white 、red 、green ，等等。命名的颜色的问题是它们是有限的，而且没有办法调整它们以获得各种颜色。

十六进制模型摆脱了这种义务，允许你使用十六进制代码来挑选颜色。然而，该模型本身缺乏对颜色进行操作的灵活性。这就是RGB和HSL的作用。

RGB和HSL的区别

命名的颜色易于阅读，但在创造变化方面不够灵活。带有十六进制数值的颜色更糟糕，可读性差，使得颜色的变化几乎不可能。

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

这些问题很容易用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是色相、饱和度和亮度的缩写。让我们通过研究它的三个主要组成部分来仔细看看。

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

使用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通过将颜色表示为色相、饱和度和亮度来解决这个问题。这三者都是人类直观感知到的属性。

最重要的是，你可以在任何现代设计工具中使用HSL，如Figma、Adobe XD和Sketch。在下一节中，我们将使用CSS和一点Figma来体验用HSL颜色模型创建和调整颜色值的便利性。

使用HSL的灵活色彩系统

在HSL中，我们只需要一个值，用它就可以创造出无数的阴影或色调。诀窍在于为一个特定的色调调整饱和度和亮度值。

让我们在Figma中挑选三个色块，并称它们为主色、次色和重点色。

主色在我们的用户界面中占了大部分（60%）的净色用量。次要的占净面积的30%，通常是文本。剩下的10%可能是利用重点色的突出部分。

我选择了我认为很适合我的用户界面需求的颜色。你也可以使用网络上现成的颜色方案。

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

同样，你可以创造出更多类似的变化；下面的图片用五种不同的色调描述了同样的情况。作为一种练习，你可以为一个给定的颜色色调尝试更深和更浅的变化。

快速提示：一定要用颜色对比度检查器插件检查你的颜色是否符合对比度和无障碍标准。

使用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函数和自定义属性创建和使用调色板的简单实现。

一双善于观察颜色的眼睛会自动挑选出好的颜色。要做到这一点，唯一的办法就是经常观察和处理颜色。如果你没有艺术或设计背景，我建议你在进行专业的色彩工作之前多读一些色彩理论的基础知识。

结语

就这样吧!我们从简单的介绍开始，然后讨论了十六进制、RGB和命名颜色。我们还了解了其中每一种的注意事项。之后，我们讨论了HSL相对于其他三种颜色模型的好处。

我们讨论了Figma中如何使用HSL来创建颜色变化，并学习了如何用CSS来使用它们。现在我们可以生成永恒的调色板，并将其纳入 UIs 中

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