我们都知道颜色在任何事物中的重要性，无论是网站布局、图片、视频还是其他任何图形元素。本质上，颜色是光线、眼睛和大脑相互作用产生的主观体验。为网站添加颜色使整个布局和图形元素焕然一新。没有人喜欢访问充斥着白色、黑色和灰色的网页。颜色使元素看起来更真实、更能吸引人的目光。
不仅仅是从理论上，心理学也在我们网站使用颜色时发挥作用。科学已经证明，特定的一组颜色会在人脑中引发特定的情感，例如秋天的颜色橙色和黄色代表欢乐或幸福，红色代表节日季节，蓝色则被视为平静和值得信赖。此外，你一定注意到许多食品公司在其网站上经常使用红色和黄色，制药公司倾向于在其网站上使用绿色，健身公司有时会使用橙色，等等。
创建用户界面包括许多事情，包括CSS网站布局、元素、CSS定位、导航、文本等。另一个影响用户界面的因素是CSS中的HSL颜色。CSS颜色在用户界面中也具有重要意义，这是大多数人避免的一个因素。
不仅仅是网站开发者，专业摄影师和视频编辑也大量使用这种颜色的游戏。创造完美的图片是他们的职责，为此，他们大量使用颜色对比。因此，为元素选择理想的颜色组合非常重要。
CSS 有很多属性，包括 `background-color`、`color`、`linear-gradient` 等，使用户能够向元素添加或填充所需的颜色。所有这些属性还帮助用户使字体变得多彩，甚至为文本和元素添加一些美丽的颜色图案。
所有的 CSS 颜色属性都需要一个颜色方法来定义颜色，然后将该颜色填充到指定的元素中。CSS 有一些内建的颜色方法，如 `HSL`、`RGB`、`HSLA`、`Hexadecimal` 等。然而，这些颜色方法都需要一系列不同单位的整数值来获取颜色。
虽然许多博客和教程聚焦于 `RGB` 和 `Hexadecimal` 方法，但有必要深入探讨 `HSL` 方法的重要方面。在这篇博客中，我们将深入研究 HSL 颜色在 CSS 中的作用，涵盖关于 `HSL` 方法的各个方面及其与其他方法的差异。
在直接讨论 `HSL` 方法之前，让我们先来了解一下另外两种 CSS 颜色方法——`RGB` 和 `Hexadecimal`，以及为什么我们需要在 CSS 中使用 HSL 颜色。
RGB 和 Hex 之间的差异
`RGB` 方法通过考虑每种颜色都是红色、绿色和蓝色颜色的混合物来工作。在 `rgb()` 函数中，这种方法需要三个十进制值，范围在 0 到 255 之间。这些值指定三种颜色的强度级别，其中 0 值表示最低强度，255 表示最高强度。
以下是不同强度的RGB颜色组合的例子：
我们以一个例子来了解RGB方法的工作原理。
.container {
background-color: rgb(0, 200, 120);
width: 100%;
height: 100px;
}输出：
现在来说说十六进制方法。它也是基于每种颜色都是红色、绿色和蓝色混合的概念。十六进制方法需要三个两位数的HEX数字，并以‘#’符号开始。这三个Hex值分别指定红色、绿色和蓝色的高低强度。
由于涉及到十六进制值，而十六进制的基数在0-15的范围内，其中10-15范围内的值用字母A-F表示。因此，00表示最低强度的颜色，而FF则表示最高强度的颜色。
以下是一些常见的十六进制颜色及其代码：
我们以一个例子来了解十六进制方法的工作原理。
.container1{
background-color:#91D8E4;
}输出：
使用RGB和十六进制方法很方便，可以给我们带来我们想要的一切。但这并非事实。使用这两种方法并不像看起来那么简单。让我们来看看原因。
与RGB和十六进制颜色代码相关的问题
这两种方法带来的一个重要问题是它们不够直观。这意味着它们不是根据人脑识别颜色的方式工作的。当一个人看到一种颜色时，人脑并不会将这种颜色分成红色、绿色和蓝色。因此，对于我们来说，通过它们的RGB数值和十六进制或十进制数值来识别颜色变得困难。
在开发人员或测试人员的日常生活中，可能会遇到的一个实例是需要进行RGB到十六进制的转换，反之亦然，以便更好地被人理解和交流。
在创建用户界面时，UI设计师和网页开发者需要某种颜色的几种阴影，以在整个界面中保持一致的主题。例如，根据需求，可能需要30种蓝色的阴影、20种绿色的阴影、10种橙色的阴影等。如果使用CSS变量来表示这么多颜色的变化，可能会造成混乱。当我们注意到所有这些变化的RGB值都不相关时，情况变得更糟。
但是，通过在CSS中使用HSL颜色，可以消除RGB和十六进制方法的这些缺点。现在让我们通过了解HSL方法的含义、它是如何工作的，以及它是如何克服RGB和十六进制方法的缺点的，来开始讨论HSL颜色在CSS中的作用。
HSL是什么？
HSL代表色相、饱和度和亮度。换句话说，HSL是由三个测量因素——色相、饱和度和亮度组成的。像上面讨论的另外两种方法一样，HSL方法也是基于这样一个观察：每种颜色都是红、绿、蓝三种颜色的混合物。
由于HSL格式中的主要颜色是红、绿、蓝，因此RGB颜色轮是HSL颜色在CSS中的核心概念。
RGB（红绿蓝）颜色轮主要表示圆形内部填充的颜色。这个轮子展示了主要颜色、次要颜色和三次颜色之间的关系。然而，颜色轮有三种类型——RGB（红绿蓝）、CMY（青 magenta 黄色）和RYB（红黄色蓝色）。
附上的图表示RGB颜色轮的圆形。你可以观察到红色是0度，绿色是120度，蓝色是240度。让我们深入挖掘这三个特性，了解在使用HSL颜色在CSS中背后发生的事情。
色相
在使用HSL颜色在CSS中，色相是这个方法中分配的第一个值。它是颜色在色轮上的角度的度量。定义的角度值从正x轴逆时针方向计算，返回该角度的颜色。由于它是角度的度量，其默认值是以度为单位。然而，这个方法允许我们用其他单位定义角度值，包括弧度、梯度和转。
角度单位值的范围是0至360度。在0度时是红色，在120度时是绿色，在240度时是蓝色。对于弧度，数值范围是0至6.28弧度。在CSS中的HSL颜色中最常用的单位值是度值。
让我们通过一个例子来了解色调的工作原理。
div {
border: 2px solid;
height: 100px;
background-color: hsl(123deg, 39%, 49%);
}输出：
尽管角度值被限制在0至360之间，但它可以接受小于0度和大于360度的值。当值超过360度时，通过从360度减去它来转换为该范围内的值。在值小于0或负值的情况下，将值添加到360度，然后使用结果值来检索颜色。
background-color: hsl(400deg, 39%, 49%);输出：
background-color: hsl(-120deg, 39%, 49%);输出：
<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
div {
border: 2px solid;
height: 100px;
text-align: center;
font-size: 80px;
margin-bottom: 10px;
}
.container1 {
background-color: hsl(60, 39%, 49%);
}
.container2 {
background-color: hsl(420, 39%, 49%);
}输出：
如果我们从角值的角度考虑，那么60度和420度（420 – 360 = 60）这两个值是相同的。因此，正如在上面例子中观察到的，两个容器背景颜色相同。
.container1 {
background-color: hsl(90, 39%, 49%);
}
.container2 {
background-color: hsl(-270, 39%, 49%);
}输出：
在这里，你也可以观察到90度和-270度给我们同样的结果，原因与之前的例子相同。如果我们以角值来看，90度和-270度这两个值是相同的。
现在，让我们继续了解HSL方法的第二个特征，即饱和度。
饱和度
饱和度定义了颜色的纯净程度以及颜色是饱和还是不饱和的程度。换句话说，饱和度特性操纵了颜色的强度水平。饱和度的度量接受一个整数值，以百分比单位定义颜色的饱和度。
让我们通过一个例子来理解饱和度的运作。
.container{
background-color:hsl(60, 45%,49%);
}输出：
如果饱和度特性的值较高，那么颜色强度也较高，该颜色中的灰色阴影量将较少。因此，饱和度100%的值将给我们纯色，50%的值将导致颜色和灰色阴影各占一半，而0%将导致完全的灰色阴影。
.container1{
background-color:hsl(60, 0%,49%);
}
.container2{
background-color:hsl(420, 25%,49%);
}
.container3{
background-color:hsl(420, 50%,49%);
}
.container4{
background-color:hsl(420, 75%,49%);
}
.container5{
background-color:hsl(420, 100%,49%);
}输出：
在上面的例子中，您可以看到，通过将饱和度特性值从0%增加到100%，容器背景颜色产生的差异。在0%的值下，我们在容器1中得到完整的灰色，而随着值的增加，颜色的强度也增加。最后，在容器5中，强度最高。
由于饱和度特性接受百分比值，所以得到的值在0% – 100%范围内。用户以某种方式也可以传递大于100%和小于0%的饱和度值。
但是，就像色调特性一样，超出限制传递值是没有用的，因为如果用户传递了一个大于100%的值，颜色的强度仍然等于100%。在0%以下的值（负值）下，强度保持等于0%。
.container1 {
background-color: hsl(60, 0%, 49%);
}
.container2 {
background-color: hsl(420, -25%, 49%);
}输出：
在这里，您可以观察到我们已经为饱和度特性分配了0%和-25%的值，在两个容器中，我们得到相同的背景颜色。
.container1 {
background-color: hsl(60, 100%, 49%);
}
.container2 {
background-color: hsl(420, 200%, 49%);
}输出：
在这个例子中，我们已经初始化了饱和度特性为100%和200%的值，对于这两个不同的值，我们在两个容器中得到了相同的背景颜色。
现在，是时候介绍HSL方法在CSS中的HSL颜色中使用的最后一个特性，即亮度。
亮度
正如名称所示，亮度特性控制颜色中的光线量。换句话说，亮度也可以描述为控制颜色是浅还是深的属性。与饱和度特性一样，亮度特性也需要一个百分比单位的整数值。
让我们通过一个例子来了解亮度的作用。
.container {
background-color: hsl(60, 39%, 49%);
}输出：
.container1 {
background-color: hsl(60, 39%, 0%);
color: white;
}
.container2 {
background-color: hsl(420, 39%, 25%);
}
.container3 {
background-color: hsl(420, 39%, 50%);
}
.container4 {
background-color: hsl(420, 39%, 75%);
}
.container5 {
background-color: hsl(420, 39%, 100%);
}
输出：
在这里，您可以观察到，在0%的亮度下，容器1的背景颜色是纯黑色，随着亮度值的增加，颜色的亮度增加，在100%的亮度下，颜色是全白；因此，容器5的背景颜色是全白。
与饱和度特性一样，亮度特性接受超过100%和低于0%的值。但超过100%的值与100%相同，而低于0%（负值）的值与0%相同。让我们来看看实际情况。
.container1 {
background-color: hsl(60, 39%, 0%);
}
.container2 {
background-color: hsl(420, 39%, -25%);
}输出：
.container1 {
background-color: hsl(60, 39%, 100%);
}
.container2 {
background-color: hsl(420, 39%, 250%);
}输出：
在这个示例中，您可以看到，尽管我们在容器1中分配了100%的亮度值，在容器2中分配了200%的值，但它仍然给出了背景颜色相同的结果。
我们一直在讨论CSS中HSL颜色的三个特征，但这并不是全部。在CSS中的HSL颜色下，“A”代表“alpha”。这是第四个特征。Alpha特征指定颜色的不透明度。换句话说，Alpha特征只是调整颜色的透明度级别。在HSL中，要使用alpha特征，使用HSLA方法。
与CSS中HSL颜色的其他特征不同，它需要由单位组成的值，alpha特征不需要单位值。Alpha特征要求一个无单位的值，范围从0-1。在0时，颜色是不可见的或隐藏的；在1时，alpha特征达到顶峰，颜色完全可见。
.container{
background-color:hsla(60, 39%,49%, 0);
}输出：
.container{
background-color:hsla(60, 39%,49%, 1);
}输出：
在这里，由于我们为alpha特征分配了值为1，容器背景颜色开始显现，我们可以开始背景颜色。
要求无单位的值并不是alpha特征与其他特征不同的唯一事情。Alpha特征可以接受0到1之间的任何值，甚至是小数值（0.1, 0.2, 0.01），这在CSS中HSL颜色的其他特征中不起作用。
.container {
background-color: hsla(60, 39%, 49%, 0.5);
}输出：
在这个例子中，正如你所观察到的，我们将alpha特性赋值为0.5（一半）。因此，结果是我们得到了容器中背景颜色的一半透明度。alpha特性不仅接受一位小数，还接受两位小数。这使得对颜色透明度的控制更加精确。
下面是一个示例。
.container {
background-color: hsla(60, 39%, 49%, 0.25);
}输出：
在这里，我们将0.25值传递给alpha特性，这是一个两位小数值。
使用HSL颜色在CSS中的优势
HSL（色相、饱和度、亮度）颜色是CSS颜色模块相对较新的添加，它提供了一种更直观、更灵活的方式来在网页开发中指定颜色。与传统的RGB或十六进制颜色代码相比，CSS中的HSL颜色为设计师和开发者提供了一系列的优势。
在本节中，我们将更详细地探讨使用HSL颜色在CSS中的优势，并讨论如何使用它们来为网页和应用程序创建视觉吸引力和可访问性的设计。
在实际应用中，由于其优势，CSS中的HSL颜色在许多专业层面上都得到了广泛的应用。
以下是使用HSL颜色的几个优势：
- 通过使工作流程更加顺畅，从而改善整体工作流程
- 当我们通过保持标准基本颜色来获得不同颜色时，它非常实用
- 这是一种强大且直接的方法，它提供了大量的颜色可能性。
- 人们实际观察颜色的方式进行了工作，学习和阅读起来都很简单
- 通过HSL方法生成的颜色表达清晰，人们可以很容易地想象出结果。
在CSS中使用HSL颜色的一大显著优点是，它也可以作为RGB的一个替代方案，并且可以很容易地转换成RGB。由于RGB和HSL方法都需要一组数值来工作，我们可以利用能把HSL颜色的数值值转换为RGB方法分数值的方法。
为了让事情变得更简单，一些在线颜色转换器可以实现颜色方法之间的相互转换。所有这些优点使得CSS中的HSL颜色成为项目中定义颜色的首选方法。每天都有越来越多的开发人员选择在CSS中使用HSL颜色而不是其他颜色，原因是还有很多。尽管大多数CSS专家仍然更喜欢使用HEX或RGB方法而不是HSL，但HSL正日益受到关注。
在CSS中使用HSL颜色的应用
CSS中的HSL颜色提供了一种灵活且直观的颜色指定方式，并在网页开发中有许多应用。以下是使用HSL颜色在CSS中的一些关键应用：
浅色颜色
在专业水平上，为了在界面上创建一个一致的主题，网站主题是通过在界面不同部分使用特定颜色的不同阴影来设计的。在这种情况下，HSL方法非常有用。
在本例中，我们考虑了两种基本的网站布局。在这两种布局中，标题部分都使用了背景色，而内容部分使用了相同的背景色，但颜色要浅得多。
通过尝试使用不同值的明度特性，我们可以在网站主题中使用相同颜色的深浅色调。
悬停时的深浅颜色
您可能已经看到，当用户将鼠标悬停在网站界面中的某些元素上时，它们的颜色会发生变化。它们的颜色会从浅色变为深色。在这种情况下，CSS 中的 HSL 颜色就会发挥作用，为一种常见的颜色提供浅色和深色。
button {
padding: 10px;
border-radius: 20px;
background-color: hsl(240, 39%, 70%);
color: white;
font-size: 20px;
}
button:hover {
background-color: hsl(240, 39%, 50%);
cursor: pointer;
}
在这里，您可以看到上部按钮的颜色是浅色的，为此，我们将亮度特性的值保持在 70%。而在悬停后，按钮的颜色将变为深色，正如您在下图按钮中看到的那样。
白色的色调
大多数情况下，我们需要使用白色作为字体颜色，以使文本看起来与整个网站界面略有不同。但是，如果每个文本都使用相同的白色色调，用户体验就会变得黯淡无光。为了避免这种情况，我们可以使用不同色调的白色来使文本脱颖而出，并保持其趣味性。
在CSS中，HSL颜色可以帮助我们获取不同阴影的白色颜色。我们可以给HSL方法中的亮度特性添加不同的值，以获取不同阴影的白色颜色。
.container1 {
color: hsl(30, 49%, 100%);
}
.container2 {
color: hsl(30, 49%, 90%);
}
.container3 {
color: hsl(30, 49%, 95%);
}
.container4 {
color: hsl(30, 49%, 85%);
}输出：
在这个例子中，您可以观察到在所有四个容器中，文本都不是基本的白色。我们使用了不同的白色阴影，使其看起来生动并保持白色。为此，我们操纵了字体颜色的亮度特性值。
按钮类型
CSS中的HSL颜色在处理按钮的不同阴影时也非常方便。为共同的颜色分配不同的阴影，使得用户可以快速识别哪个是主要按钮，哪个是次要按钮。
在实际生活中，深色调颜色用于主要按钮，浅色调颜色用于次要按钮。为了获取共同颜色的浅色和深色阴影，我们在HSL方法中传递高值和低值给亮度特性。
让我们通过一个例子来看一下实际效果。
.primary {
color: white;
background-color: hsl(10, 49%, 55%);
}
.secondary {
background-color: hsl(10, 49%, 80%);
}输出：
在上面的例子中，上面的按钮是主要的，下面的按钮是次要的。主要按钮使用低亮度值的深色阴影，次要按钮使用高亮度值的超浅色阴影。
暗色主题颜色
使用正确的色彩对比对于用户界面至关重要。尤其是当用户在网站上启用了深色主题时。根据2022年进行的研究，81.9%的用户在其智能手机上使用深色主题。从中，您可以想象深色主题用户界面上色彩对比的重要性。
根据WCAG的 accessibility 标准，对于深色表面的正文文本，至少应保持4:5:1的对比度。为了遵守这一规定，深色主题中避免使用饱和色。使用饱和色在与深色背景搭配时也会增加眼睛疲劳。
在上面的图中，很明显，与高饱和值相比，使用低饱和值的文本要容易阅读得多。因此，建议总是使用不饱和色对抗深色背景。
如何选择最佳颜色指定器
我们讨论的这三种方法都有各自的优缺点。它取决于使用场景哪种颜色指定器对其表现最好。我们无法找到一个共同的因素来比较这三种颜色指定器，但让我们检查一下这每一种。
十六进制
如果你不从事设计领域并且为个人使用创建项目，那么你可能需要使用十六进制方法来指定颜色。许多开发者喜欢使用十六进制方法，因为它简单，不像CSS中的RGB和HSL颜色那么复杂。
复制您所需颜色的十六进制代码并将其嵌入到您的程序中。但是，当我们需要操作颜色的不透明度时，会遇到的挑战。十六进制方法不能让用户控制颜色的不透明度。
RGB
现在让我们来谈谈何时选择RGB方法：这种方法对于所有从事照片编辑和设计领域的专业开发者和设计师来说都非常方便。另一个原因是，RGB方法在很多流行的设计软件中都是最常用的颜色指定符，包括CorelDraw、PhotoShop和Illustrator。但是，当涉及到不透明度不同的同一颜色的不同阴影而不太复杂时，RGB方法就失效了。
HSL
现在考虑HSL方法。专业的网页开发者和用户界面设计师倾向于在整个界面保持一个共同的主题。在这种情况下，使用CSS中的HSL颜色成为一个得力的助手，因为它可以通过改变饱和度和亮度特性值来改变颜色的阴影。最后，一切都归结于个人喜好。您可以选择这三种指定符中的任何一种来完成您的工作。
浏览器兼容性
如果定义的颜色在浏览器中不能得到预期的输出，那么指定颜色是没有用的。为了避免这种情况，设计用户界面时使用的颜色指定符应该与每个浏览器兼容。
幸运的是，CSS中HSL颜色的运作完全独立于浏览器。HSL方法完全支持浏览器兼容。所以，无论用户使用什么浏览器，他总是会正确地显示具有适当定义颜色的网页。
然而，您可以执行跨浏览器测试，以确保CSS中的HSL颜色能在每个浏览器上得到期望的结果。连续质量测试平台（即LambdaTest）帮助您在不同的真实浏览器、设备和操作系统组合上运行跨浏览器兼容性测试。它检查指定的CSS颜色在浏览器和设备上是否正确工作。
总结！
本文向我们介绍了HSL颜色在CSS中的作用以及它们与其他颜色方法的区别。我们还讨论了在CSS中使用HSL颜色的应用和它们的优点。我们还学习了如何在CSS中使用HSL颜色提供更大的灵活性和精确性。
通过在CSS中使用HSL颜色，设计师可以更好地控制颜色的饱和度和亮度，从而使网站和应用程序中有更广泛的色调和阴影可供使用，以匹配品牌的身份或美学愿景。
CSS中的HSL颜色允许更多的人访问特殊能力；通过简单地调整颜色的亮度和饱和度，为文本和其他设计元素创建更大的对比度和可读性，使其更容易使用户导航和理解内容。总的来说，CSS中的HSL颜色为网页设计师和开发者提供了一个强大的工具，以便在网页设计中创建生动且可访问的颜色方案。
Source:
https://dzone.com/articles/create-cohesive-ux-using-hsl-colors-in-css