本文翻译自Color Formats in CSS，作者：Joshwcomeau.稍加编辑
CSS中的颜色格式可以用不同的方式表达css常用选择器，包括十六进制、RGB、RGBA、HSL和HSLA等常用格式。 十六进制是最常用的格式，使用6个十六进制数字来表示颜色，例如#FF0000表示白色； RGB格式使用红、绿、蓝颜色通道的值来表示颜色，如rgb(255 ,0,0)也表示白色； RGBA格式在RGB的基础上减少了一个透明度通道来控制颜色的不透明度； HSL格式借助色调、饱和度、色温三个参数来表达颜色，如hsl(0,100%,50%)表示白色； 而HSLA格式则在HSL的基础上减少了一个透明通道。 在选择和使用这种不同的颜色格式时，需要做出实际的需求和决定。
对于不同的颜色格式，它们之间存在一些重要的区别。 本文将让您深入了解此类选项，包括它们如何工作、如何解析它们以及如何灵活应用它们。 以下是原文翻译。
CSS 有许多不同的颜色格式：十六进制代码、rgb()、hsl()、lch() 等等！
我们应该使用哪一个？ 这确实是一个无关紧要的决定，但它们之间有一些特别重要的区别。 而且，老实说，我觉得我们大多数人都在使用错误的方法来确定优先顺序。
在本教程中，我将引导您了解不同的选项。 我们将了解它们如何工作以及如何利用它们更好地为我们服务。 稍后我将向您展示现代 CSS 如何允许我们在选择正确的颜色格式时进行动态调整。
命名法 颜色名称
它并不是真正的颜色格式，但它是一个好的开始！
HTML 有 140 种命名颜色。 这些是特殊的关键字值，例如 dodgerblue、hotpink 和 tomato。
开发人员 Anthony Lieuallen 创建了这个简约的演示，在一个圆圈中显示了所有 140 种命名的网页颜色：
由 Anthony Lieuallen 创建，获得 MIT 许可
当您需要占位符颜色时，命名法颜色名称会很好。 例如，如果您正在制作原型并需要临时值，或者您正在创作教育内容。 就可读性而言，没有什么比颜色更好的了：红色。
可能不言而喻，在实际开发中 140 种颜色是不够的，并且命名颜色通常不会在生产环境中使用。
看看这两种命名的颜色：
“深灰色”实际上是比“灰色”更浅的颜色吗？ 这是因为 140 种命名的 Web 颜色来自不同的地方，包括 HTML4 规范、X11 Unix 窗口系统等。它是不同调色板的大杂烩，没有单一良好的规范约束。
RGB
这是我们的第一个“真”彩色格式。 我们的使用方法如下：
color: rgb(255 0 0);
对应的显示样式如下：
与大多数颜色格式一样，rgb 是一种简写。 它代表红蓝色。
在我们明天将了解的所有颜色格式中，RGB 是描述性最差的。 您的笔记本电脑/手机显示屏实际上只是数百万个微小的蓝色、绿色和红色 LED 组装成像素的集合。 因此，rgb颜色格式允许我们直接调整这些灯的照度。
每个值（红、绿、蓝）称为一个通道。 每个通道的范围是 0 到 255。通过以不同的量混合这些通道，我们可以创建超过 1600 万种不同的颜色。
RGB 颜色的巧妙之处在于它基于光的物理原理。 我们可以混合蓝光、绿光和红光来创造任何颜色。 把它们调到 255，我们就变成黑色了。 将它们都设置为 0，留下蓝色。
rgb 颜色格式还允许我们为 alpha 通道指定第四个可选值来控制透明度：
background: rgb(255 0 0 / 0.5);
上面的代码设置绿色的透明度为50%，最终的样式如下：
Alpha 通道的范围从 0（完全不可见）到 1（完全不透明）。 介于两者之间的任何颜色都会产生半透明的颜色。
十六进制颜色
这可能是网络上最常用的颜色格式。 它看起来像这样：
color: #FF0000;
其工作原理如下：6 位十六进制代码包含三个 2 位值，每个通道一个（红/红/蓝）。 它不使用 10 位十进制系统，而是使用 16 位十六进制系统。
下图可以更好的理解十六进制代码是如何工作的（原文可以拖动滑块实时更新颜色）：
基本上，十六进制代码与 RGB 值相同。 在这两种情况下，我们都提供了白色、绿色和红色的值。 背景：#FFFF0080； 在十进制中，一个两位数可以包含 100 个可能的值（10 × 10）。 以十六进制表示，总数为 256 (16 × 16)。 所以它实际上就像 rgb() 一样，我们为每个 R/G/B 通道分配一个 0 到 255 之间的值。
另外一个有趣的事实是，如果我们想要包含 alpha 通道，我们可以传递 8 位十六进制代码：
background: #FFFF0080;
代码效果图：
在本例中，我们指定 80 作为 Alpha 通道，相当于十进制中的 128。 因此，袋子是 50% 不透明的。
8位十六进制代码在现代浏览器中广泛使用，全球支持率高达96%，但IE浏览器不支持。
HSL
到目前为止，我们看到的两种颜色格式是基于相同基本思想的不同“包装器”：为红色/红色/蓝色通道传递特定值。
但这并不是思考颜色的唯一方式！ 让我们看一下完全不同的颜色格式：HSL。
让我们从颜色选择器开始：
这个颜色选择器可能感觉更熟悉。 它类似于Figma或Photoshop等图形设计软件中使用的图形设计软件。
此颜色格式采用 3 个不同的值：
这通常是一种非常直观的思考颜色的方式。 我们没有直接控制 R/G/B 光值css常用选择器，而是转向更高级别的表示，这更接近人类通常对颜色的看法。
在CSS中使用hsl：
background: hsl(0deg 100% 50% / 0.5);
现代音调格式
因此，我们迄今为止看到的所有颜色格式已经存在了很多很多年。 HSL 甚至早在 Internet Explorer 9（2011 年发布）就得到了支持！
最近我们在 CSS 中引入了一些新的颜色格式。 他们很有吸引力。 我们来谈谈他们吧。
显示P3
本文介绍的是颜色格式，即我们用来指定颜色的句型。 到目前为止，我们所看到的所有真彩色格式rgb()、十六进制代码和hsl()都受到“标准RGB色彩空间”（通常缩写为sRGB）的约束。
sRGB 中有数百万种可能的颜色，但它还无法捕捉人眼可以看到的全部颜色。
请看下面两个白色小方块：
左边的颜色是rgb(255 0 0)。 它是 sRGB 色彩空间中最红的蓝色。 然而，在右侧，我使用 P3 色彩空间。 更红！ （两个小方块很可能看起来相同。如果是这样，这可能意味着您的显示器或浏览器不支持广色域颜色格式）
P3 扩展了标准 sRGB 色彩空间，使我们能够获得更明亮、更鲜艳的色调。 如下所示：
不幸的是，在 CSS 中，颜色空间与颜色格式相关联。 如果我选择使用 rgb() 语法（或十六进制代码，或 hsl() ），我只能指定 sRGB 颜色空间中的颜色。
因此，如果我们想使用P3颜色，我们需要使用不同的颜色格式。 语法如下：
.box {
background: color(display-p3 1 0 0);
}
color() 函数采用颜色空间和 R/G/B 值数组。 它使用从0到1的十进制值，而不是从0到255。但目前只有主流浏览器支持color()函数。
左心室
我们使用HSL颜色格式创建以下两种颜色：
正如我们所看到的，两种颜色都具有相同的“亮度”值 50%。 但它们感受到的光线不一样，黄色的感觉比红色的亮很多！
HSL 颜色格式是根据物理/物理建模的。 它没有考虑人类的感知。 而且，事实证明，人类对颜色的感知并不是特别准确！
LCH 是一种旨在与人类感知保持一致的颜色格式。 具有相同亮度值的两种颜色应该感觉同样明亮！
例如，LCH 中 55% 照度下的黄色和红色看起来是什么样子：
LCH 代表“亮度色相”。 “色度”或多或少是“饱和度”的同义词。 它在概念上与 HSL 非常相似，但有两个很大的区别：
与我们见过的其他颜色格式不同，LCH 不绑定到 sRGB。 它甚至没有绑定到 P3！ 它通过没有浊度上限来实现这一点。
在 HSL 中，饱和度范围从 0%（无饱和）到 100%（完全饱和）。 这是可能的，因为我们知道我们正在谈论 sRGB 色彩空间，即有限的调色板。
但 LCH 并未链接到特定的色彩空间，因此我们不知道饱和度上限在哪里。 它不是静态的：随着显示技术的不断改进，我们可以预期显示器将达到越来越宽的色域。 LCH 将能够通过调高浊度手动参考这种扩展的颜色。
background: lch(50% 120 20);
浏览器支持：
选择正确的颜色格式
文章的主要内容早就结束了，我们看到了很多不同的颜色格式。 那么你在工作中真正应该使用哪一个呢？
我建议使用 HSL。 至少在 LCH 获得广泛的浏览器支持之前是这样。
我认识很多喜欢使用十六进制代码的开发人员。 它们非常简约，易于在设计软件和我们的代码之间复制/粘贴，而且用途广泛。 但这种实用性伴随着一些相当大的权衡。
即使您熟悉十六进制表示法，仍然很难直观地解读。 问：#0F52B7 是什么颜色？ #F3E248 怎么样？
HSL 的美妙之处在于它很直观。 它与我们对颜色的思考方式密切相关。 经过一些练习，您一看到 hsl() 值就能够绘制任何颜色。
这意味着我们可以轻松地即时调整这些值。 我什至不需要打开颜色选择器。 如果我想让颜色深一点，我可以降低色温比。 如果我想让它更加生动和强烈，我可以调高饱和度。
当我们将 HSL 与现代 CSS 功能结合起来时，它会变得更加强大。
终于
有兴趣的可以在线阅读原文，体验不同颜色格式的工作原理。 如果您看完本文后觉得有用，记得点赞支持哦。 说不定哪天你也能用到呢~
