共计 4094 个字符，预计需要花费 11 分钟才能阅读完成。
本文翻译自 [Color Formats in CSS
](https://www.joshwcomeau.com/css/color-formats/)，作者：Joshwcomeau。略有删改
CSS 中的色彩格局能够采纳不同的示意形式，包含罕用的十六进制、RGB、RGBA、HSL 和 HSLA 等格局。十六进制是最罕用的格局，应用 6 个十六进制数字来示意色彩，例如 #FF0000 示意红色；RGB 格局应用红、绿、蓝三个色彩通道的数值来示意色彩，例如 rgb(255,0,0) 也示意红色；RGBA 格局在 RGB 的根底上减少了一个透明度通道，用于管制色彩的不透明度；HSL 格局利用色相、饱和度和亮度三个参数来示意色彩，例如 hsl(0,100%,50%) 示意红色；而 HSLA 格局则在 HSL 的根底上减少了一个透明度通道。抉择和应用这些不同的色彩格局时，须要思考理论需要并进行决策。
对于不同的色彩格局，它们之间存在一些重要的区别。本文将带您深刻理解这些选项，包含它们的工作原理、如何解析它们以及如何灵便利用，以下是原文翻译。
CSS 有很多不同的色彩格局：hex codes，rgb（），hsl（），lch（），等等！
咱们应该用哪一个？这仿佛是一个无关紧要的决定，但它们之间却有一些十分重要的区别。而且，诚实说我认为咱们大多数人都在优先思考应用谬误的形式。
在本教程中，我将带您浏览不同的选项。咱们将看到它们是如何工作的，以及咱们如何利用它们为咱们更好的服务。前面我将向您展现古代 CSS 如何让咱们在抉择正确的色彩格局时进行动静调整。
命名式色彩名
这并不是一个真正的色彩格局，但它是一个很好的开始！
HTML有 140 种命名色彩。这些是非凡的关键字值，如 dodgerblue、hotpink 和tomato。
开发人员 Anthony Lieuallen 创立了这个简洁的演示，在一个圆圈中显示了所有 140 种命名的 Web 色彩：
当你须要一个占位符色彩时，命名式色彩名是很好的。例如，如果您正在构建原型并须要长期值，或者如果您正在编写教育内容。在可读性方面，没有什么比 color: red 更好。
这可能是显而易见的，理论开发中 140 种颜色是不够的，通常不会应用命名的色彩在生产环境中。
看看这两种命名的色彩：
“darkgray”实际上是比“gray”更浅的色彩？
这是因为 140 种命名的 Web 色彩来自不同的中央，包含 HTML4 标准，X11 Unix 窗口零碎等。这是一个不同调色板的大杂烩，没有一个好的标准束缚。
RGB
这是咱们的第一个“实在的”色彩格局。以下是咱们如何应用它：
color: rgb(255 0 0);对应显示的款式如下：
像大多数色彩格局一样，rgb 是一个缩写。它代表绿色蓝。
在咱们明天要学习的所有色彩格局中，rgb 是最不形象的。你的电脑 / 手机显示屏实际上只是数百万个渺小的红色、绿色和蓝色 LED 的汇合，它们被组装成像素。因而，rgb 色彩格局容许咱们间接调整这些灯光的亮度。
每个值（红色、绿色、蓝色）被称为通道。每个通道从 0 到 255。通过将这些通道以不同的量混合，咱们能够发明超过 1600 万种不同的色彩。
RGB 色彩的奇妙之处在于它是基于光的物理学。咱们能够混合红色、绿色和蓝色光来发明任何色彩。把它们调到 255，咱们失去红色。把它们都设为 0，剩下彩色。
rgb color 格局还容许咱们为 alpha 通道指定第四个可选值，以管制透明度：
background: rgb(255 0 0 / 0.5);以上代码设置了红色 50% 的透明度，最终的款式的如下：
Alpha 通道的范畴从 0（齐全不可见）到 1（齐全不通明）。介于两者之间的任何货色都会产生半透明的色彩。
十六进制色彩
这可能是网络上最罕用的色彩格局。它看起来像这样：
color: #FF0000;它的工作原理如下：6 位十六进制码蕴含三个 2 位值，每个通道一个值（红 / 绿色 / 蓝）。它不应用 10 位十进制零碎，而是应用 16 位十六进制零碎。
以下图示能够更加理解十六进制代码的工作原理（原文可拖动滑块实时更新色彩）：
基本上，十六进制代码与 RGB 值雷同。在这两种状况下，咱们都为红色、绿色和蓝色提供了一个值。
background: #FFFF0080;
在十进制零碎中，一个两位数的值能够蕴含 100 个可能的值（10 × 10）。如果是十六进制，则总数为 256（16 × 16）。因而，它实际上就像 rgb()一样，咱们为每个 R /G/ B 通道指定一个介于 0 和 255 之间的值。
还有个乏味的事实如果咱们想蕴含一个 alpha 通道，咱们能够传递一个八位十六进制代码：
background: #FFFF0080;代码效果图：
在本例中，咱们指定 80 作为 alpha 通道，相当于十进制零碎中的 128。因而，这个盒子是 50% 不通明的。
8 位十六进制代码在古代浏览器中失去了广泛应用，寰球支持率达到 96%，IE 浏览器不反对。
HSL
到目前为止，咱们看到的两种色彩格局都是基于雷同根本思维的不同“包装器”：传递红 / 绿色 / 蓝通道的特定值。
但这并不是思考色彩的惟一形式！让咱们来看看一个齐全不同的色彩格局：HSL。
让咱们从色彩选择器开始：
这个色彩选择器可能感觉更相熟。它相似于图形设计软件中应用的图形设计软件，如 Figma 或 Photoshop。
此色彩格局采纳 3 种不同的值：
- H 色相：这是咱们要用的色彩，有效值的范畴是 0 到 360。咱们以度为单位指定它，因为刻度是圆形的（0 度和 360 度示意雷同的红色色相）。
- S 饱和度：有效值的范畴为 0% 到 100%。在 0% 时，色彩中没有色，齐全是灰度级的。在 100%，色彩尽可能娇艳。
- L 亮度：色彩有多浅 / 多深？有效值的范畴为 0% 到 100%。在 0% 时，色彩是乌黑的。在 100% 时，色彩为纯白色。
这往往是一个十分直观的形式来思考色彩。咱们没有间接管制 R /G/ B 光值，而是转向了更高层次的形象，这与人类通常对色彩的认识更靠近。
css 中应用 hsl：
background: hsl(0deg 100% 50% / 0.5);古代色调格局
所以，咱们到目前为止看到的所有色彩格局都曾经存在了很多很多年。HSL 甚至早在 Internet Explorer 9（2011 年公布）中就反对了！
最近咱们在 CSS 中失去了一些新的色彩格局。它们很有吸引力。让咱们谈谈他们。
Display 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() 函数反对。
LCH
咱们应用 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 个性相结合时，它会变得更加弱小。
最初
有趣味的能够看看原文，能够在线体验不同色彩格局是如何工作的。看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）