本文翻译自 [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）