CSS 有大量不同的颜色格式: 十六进制代码，rgb () ，hsl () ，lch () ，还有很多！
HTML 提供了140种命名颜色
开发人员 Anthony Lieuallen 创建了这个简洁的演示，将140种已命名的网页颜色全部显示在一个圆圈中。
演示效果查看：https://www.xuehuafei.cn/web-color-wheel/colors.html
140种网页颜色来自不同的地方，包括 HTML4规范、 X11 Unix 视窗系统和一个令人心碎的纪念碑。它是不同调色板的大杂烩，所以它并不总是非常一致。
RGB
和大多数颜色格式一样，rgb 是首字母缩写，它代表红绿蓝。
每个值ーー红色、绿色、蓝色ーー都被称为通道。每个通道值从0到255。通过混合不同数字的通道纸，我们可以创造超过1600万种不同的颜色。
Rgb 颜色格式还允许我们为 alpha 通道指定第4个可选值，以控制透明度。
background: rgb(255 0 0 / 0.5);
background: rgba(255, 0, 0, 0.5);Hex codes
这可能是网络上最常用的颜色格式，看起来像这样:
color: #ffff00;它是这样工作的: 一个6位十六进制代码包含三个2位值，每个通道一个(红色/绿色/蓝色)。它不使用10位十进制系统，而是使用16位十六进制系统。
基本上，十六进制代码与 RGB 值相同。在这两种情况下，我们都为红色、绿色和蓝色提供了一个值。
透明度表示：
color: #ffff0080;在本例中，我们将80指定为 alpha 通道，这相当于十进制系统中的128，50%的透明度。
HSL
这个颜色选择器可能感觉更熟悉。它类似于图形设计软件如 Figma 或 Photoshop 中使用的那些。
色相: 这是我们要用的颜料。有效值范围从0到360，并且我们以度指定它，因为刻度是圆形的(0deg 和360deg 表示相同的红色色调)。
饱和度: 颜色中有多少色素？有效值范围从0% 到100% 。在0% 时，颜色中没有色素，完全是灰度。在100% ，颜色是尽可能充满活力。
亮度: 颜色有多亮/暗？有效值范围从0% 到100% 。在0% 时，颜色是漆黑的。在100% ，颜色是纯白色。
正如我们在 RGB 中看到的，我们可以使用/分隔符指定透明度:
color : hsl(0deg 100% 50% / 0.5)LCH
LCH 代表“亮度色调”。“色度”或多或少是“饱和度”的同义词 * 它在概念上与 HSL 非常相似，但有两大不同之处:
如前所述，它优先考虑人类的感知，因此，两种颜色共享相同的“亮度”价值将感觉同样轻。
它不受任何特定颜色空间的限制.
background: lch(50% 120 20);
background: lch(50% 500 20);LCH 目前只支持 Safari (尽管他们正在 Chrome 中开发!).我认为这种颜色格式可以安全使用还需要几年的时间。
结论
HSL 的美妙之处在于它的直观性。它与我们对颜色的看法非常一致。通过一些实践，您将能够在看到 hsl ()值时立即描绘任何颜色。
引用自：https://www.joshwcomeau.com/css/color-formats/
本文作者：Fly
本文链接：https://www.xuehuafei.cn/archives/color-format-of-css.html
版权声明：白嫖注明出处
