您是否知道您选择的调色板会影响您网站的能耗？即使是更环保的颜色选择也可以减少对移动设备电池寿命的影响。在本文中，我们就当今在 CSS 中处理颜色时必须牢记的一些不太明显的事情分享了一些建议。
网络上的颜色比眼睛看到的要多，而且它会变得更有趣！今天，我们将看看在设计系统中使用颜色的最佳方法，以及在不久的将来我们可以从我们的颜色中得到什么。
众所周知的颜色值
在 CSS 中有许多不同的方法来定义颜色。CSS 命名颜色是为元素着色的最简单方法之一：
.my-element {
background-color: red;
}
这些非常有限，很少适合我们正在构建的设计！我们还可以使用颜色十六进制（十六进制）值。这段代码给我们的元素一个红色的背景颜色：
.my-element {
background-color: #ff0000;
}
除非您是色彩专家，否则十六进制值很难阅读。您不太可能通过读取十六进制值来猜测元素的颜色。在构建网站时，设计师可能会给我们一个十六进制颜色值，但如果他们要求我们将其设置为更暗 20%，我们将很难通过调整十六进制值来做到这一点，而没有视觉指南或颜色选择器。
RGB
RGB（红、绿、蓝）表示法是另一种书写颜色的方式，使我们能够以更易读的形式访问与十六进制值相同的颜色范围。rgb()为此，我们在 CSS 中有一个函数。网络上的颜色是相加的，这意味着红色、绿色和蓝色的比例越高，得到的颜色就越淡。如果我们只使用红色通道，结果是红色的：
.my-element {
background-color: rgb(255, 0, 0);
}
将红色、绿色和蓝色通道设置为最高值将导致白色：
.my-element {
background-color: rgb(255, 255, 255);
}
我们还可以使用以下rgba()函数添加 alpha 通道（用于透明度）：
.my-element {
background-color: rgba(255, 0, 0, 0.5); // transparency of 50%
}
.my-element {
background-color: rgba(255, 0, 0, 1); // fully opaque
}
rgb()和rgba()允许我们在一定程度上“混合”我们的代码中的颜色，但结果可能有些不可预测。
HSL
最近，我们已经能够使用 HSL（色调、饱和度、亮度）值hsl()以及 和hsla()颜色函数。作为开发人员，这些在调整颜色值时要直观得多。例如，我们可以通过调整lightness参数来获得相同颜色的更暗和更亮的变体：
.my-element {
background-color: hsl(0deg, 100%, 20%); // dark red
}
.my-element {
background-color: hsl(0deg, 100%, 50%); // medium red
}
.my-element {
background-color: hsl(0deg, 100%, 80%); // light red
}
该hue参数表示色轮上的位置，可以是0和之间的任何值360deg。该函数还接受转弯单位（例如0.5turn）和无单位值。
以下都是有效的：
.my-element {
background-color: hsl(180deg, 50%, 50%);
}
.my-element {
background-color: hsl(0.5turn, 50%, 50%);
}
.my-element {
background-color: hsl(180, 50%, 50%);
}
提示：SHIFT在 Chrome 和 Firefox 开发工具的检查器中按住并单击色样将在十六进制、RGB 和 HSL 之间切换颜色值！
hsl()并且很hsla()适合使用自定义属性进行操作，我们很快就会看到。
currentColor
该currentColor关键字是值得一提的设置，它的存在了一段时间的元件上的颜色的另一种方式。它有效地允许我们使用元素的当前文本颜色作为变量。与自定义属性相比，它非常有限，但它通常用于设置 SVG 图标的填充颜色，以确保它们匹配其父级的文本颜色。
