在CSS中设置颜色的高级指南

颜色是你作为一个网页开发者在学习CSS时首先要学习应用的东西之一，但一旦你学会了基本知识，你又有多长时间会重新审视它？

通过先进的技术，用CSS应用颜色可以为项目提供更多的功能和深度。在这篇文章中，我们将探讨用CSS应用颜色的所有常见和更高级的方法，包括一些令人兴奋的方法，希望这些方法很快就会在CSS中被广泛采用。

CSS中的基本颜色语法

在谈论CSS中的颜色应用时，我们不能不涉及每个人在开始学习CSS时都会用到的基础知识：关键字和HEX。

关键字

通常，新的开发者学习在CSS中应用颜色的第一个方法是使用CSS中预定义的颜色关键字列表。这些关键词是一系列相当于颜色的词，适用于元素。

.SomeElement {
  color: blue;
  background-color: black;
}

你可以使用相当多的预定义词。如果你有兴趣看到它们，你可以查看MDN页面上关于颜色的这一部分。

HEX值

在你的CSS之旅的某个阶段，开发者很自然地会超越CSS中可用的预定义词，而需要更强大的东西。通常，CSS色彩之旅的下一步是了解十六进制值，也称为HEX值。

HEX值很好，因为它们被每个主要的浏览器所支持，并且比独立的关键字提供了更多的灵活性和可定制性。

然而，HEX值的一个主要缺点是，它们不容易阅读或理解。例如，你能猜到#ff8c00 是什么颜色吗？是的，它是一种明亮的橙色...

除了难以理解之外，它们也很难操作。如果不使用取色器或某种指南，在不完全理解HEX数字系统的工作原理的情况下，使HEX值变深或变浅是很困难的。

而且，即使你有这些辅助工具，也不像仅仅调整一个参数那么简单和直观。

下面是一些其他的HEX颜色的例子。

.SomeElement {
  color: #ffffff; /* White */
  background-color:#ff8c00; /* Orange-y color from before */
}

了解RGB和HSL

现在我们已经介绍了在网络上定义颜色的基本知识，让我们来看看两个更高级但更灵活和可用的替代方案。RGB和HSL。

RGB

红、绿、蓝，或称RGB，使我们能够获得与HEX相同的颜色，但其格式更易读、更方便用户。我们通过使用CSS中的rgb() 函数来定义颜色，稍后我们在看一些例子时将会看到。

通过使用传递给函数的三个参数，我们可以创建颜色；但是，请注意，颜色是加法的，这意味着我们添加的红色、绿色和蓝色越多，整体颜色就越浅。

如果我们把这三个值都设置得很高（达到255），那么我们最终会得到白色；如果我们把这三个值都设置为0，那么我们会得到黑色。

background-color: rgb(255,255,255); /* White */

使用RGB比HEX更有逻辑性，同时还能提供相同的色彩空间来工作。这里有一些例子，显示了HEX和相同的RGB值来说明这一点。

/* Dark Red */
#a60000;
rgb(166,0,0);

/* Light Blue */
#046cdb
rgb(4, 108, 219);

尽管人们可能不会立即明白RGB产生了什么，但它比HEX更容易阅读。当涉及到对颜色进行小的改变时，RGB要比HEX好得多。

例如，如果你想在一个HEX颜色中加入更多的红色，你会知道要改什么，改成什么吗？但是，对于RGB，你只需将红色值递增1或2就可以实现。

HSL

尽管RGB很好，是在HEX的基础上向正确的方向迈出的一步，但当涉及到 "你能为我把这个颜色变深30%吗？"的问题时，它仍然有其缺陷。

以上面的一个RGB值为例，尝试在没有辅助工具的情况下将其中一个颜色变暗30%。虽然你可能会比用HEX做得更快，但这仍然远远不够理想，因为RGB值并不直接映射到数值的明度。

要使颜色变深，你需要对所有三个值进行实验，以达到理想的效果。但是，这就是奇妙的色相、饱和度和明度（HSL）的作用。

作为一个开发者，HSL是一个梦想，因为它为处理颜色和操作颜色提供了一个更合理的方法，因为它使用参数来调整颜色属性。

然而，在使用HSL时，有一个比较陡峭的学习曲线，因为与RGB不同的是，我们处理的是我们已经知道的颜色（红色、蓝色和绿色），HSL要求我们学习一些颜色科学，如颜色的色调和饱和度。

现在让我们来看看用HSL的三个主要参数来定义颜色，以便更好地理解这种颜色方案的工作原理。

• hue 参数表示在色轮上的位置，范围从0 到 。360deg
• saturation 参数表示一种颜色的饱和度，范围从0 到 。100%
• lightness 参数代表一种颜色的亮度，范围是：0 至100%

请注意，如果你把亮度设置为0 ，无论其他参数如何，你都会得到黑色，如果你把它设置为100% ，你会得到白色。

下面的图表显示了HSL色彩空间以及你如何使用上述三个参数来操作它。

下面是我们之前用HEX和RGB定义的同样的颜色，但现在有了它们相应的HSL值。

/* Dark Red */
#a60000;
rgb(166,0,0);
hsl(0°, 100%, 33%);

/* Light Blue */
#046cdb
rgb(4, 108, 219);
hsl(211°, 96%, 44%);

一旦你理解了HSL背后的色彩科学，并且能够操纵它的三个属性，使用HSL就会比RGB灵活得多。

使用HSL，你可以很容易地改变颜色的明度，而不需要在线工具的协助。例如，想象一下，你在一个表单上有一个按钮，它的状态是禁用的。使用HSL，你可以通过简单地降低明度参数来使禁用状态变暗，从而达到效果。

另一方面，使用RGB，你需要对数值进行试验，或者使用在线工具来帮助，这都不是一个有效的过程。

在HSL和RGB中使用alpha通道

关于HSL和RGB，最后要提到的是，你现在可以传递一个可选的第四个参数来控制alpha通道；通俗地说，我们在控制颜色的透明度。这里有一些使用这个的例子。

hsl(211° 96% 44% / .5); /* 50% opacity */
hsl(0° 100% 33% / .25); /* 25% opacity */

rgb(166 0 0 / 0.7); /* 70% opacity */
rgb(4 108 219 / 0.3); /* 30% opacity */

眼光敏锐的人可能还注意到上述语法的一些不同之处：没错，没有逗号。感谢CSS色彩模块第4级，你现在可以使用空格来分隔数值，并传递一个可选的第四个参数，前面有一个/ ，以控制alpha通道。

使用高级色彩空间

在介绍了CSS中最常见的定义颜色的方法之后，让我们来看看一些更具实验性的定义颜色的方法，这很可能是CSS中定义颜色的未来。

这些方法目前被认为是实验性的，因为在写这篇文章时，它们的浏览器支持有限。

HWB

色相、白度和黑度（HWB）与HSL类似。hue 参数可以从0 到360deg 的任何地方设置，但是，与HSL不同，我们可以通过控制添加到我们选择的原始色调中的白色或黑色的数量来控制饱和度和亮度。

尝试通过下面的CodePen混合HWB颜色。注意，HWB只能在Safari浏览器或Firefox开发者浏览器中看到。

请参阅CodePen上Coner Murphy（@conermurphy）的Pen
HWB颜色操场
。

但是，为什么使用HWB而不是像HSL这样的东西，HSL可以说提供了更细化的控制，因为它允许你调整颜色的饱和度？嗯，HWB的设计原因是为了让人类更直观地使用，并比其他方法更快地进行计算。

使用HWB，如果你想要一个较浅的颜色，添加白色；如果你想要一个较深的颜色，添加黑色。它没有比这更简单的了。

下面是我们以前的例子，但加入了HWB。

/* Dark Red */
#a60000;
rgb(166 0 0);
hsl(0 100% 33%);
hwb(0 0% 35%);

/* Light Blue */
#046cdb
rgb(4 108 219);
hsl(211 96% 44%);
hwb(211 2% 14%);

LAB

LAB和LCH（我们稍后会提到），都被定义为与设备无关的颜色，这意味着无论你在哪里应用颜色坐标，你都会得到相同的颜色输出。

如果你把一个LAB值应用于不同的媒介，从网站到数字艺术，再到物理打印的东西，颜色都会保持不变。这种统一性是LAB和LCH色彩空间的关键优势之一。

要使用LAB，你需要传入三个参数：L,A, 和B 。

明度(L)参数，与本文讨论的其他参数类似，接受0到100之间的百分比，0% 为黑色，100% 为白色。

然而，与我们所讨论的其他方法不同，LAB使用a轴 (A) 和b轴 (B) 参数来定义颜色。

a 参数表示你想在绿色和红色之间沿着LAB色彩空间的a轴走多远。同样，b 参数表示在LAB色彩空间中，你想在蓝色和黄色之间沿b轴走多远。

从概念上讲，LAB是比较难掌握的色彩空间之一，因为它在空间中移动而不是线性数字。因此，这里有一个颜色空间的视觉表现，以显示数值如何共同创造一个颜色。

另外，这里还有一支笔来展示LAB色彩空间的使用，但只能在Safari浏览器中看到。

请参阅CodePen上Coner Murphy（@conermurphy）的笔
LAB颜色的游乐场
。

这里是我们之前的例子，但加入了LAB。

/* Dark Red */
#a60000;
rgb(166 0 0);
hsl(0 100% 33%);
hwb(0 0% 35%);
lab(34% 58 48);

/* Light Blue */
#046cdb
rgb(4 108 219);
hsl(211 96% 44%);
hwb(211 2% 14%);
lab(46% 17 -63);

如果你使用的是Safari浏览器，你可以在下面的CodePen中查看渲染的LAB颜色。

参见Coner Murphy(@conermurphy)
在CodePen上的笔
CSS颜色值。

LCH

我们要看的最后一个颜色空间和CSS中定义颜色的方法是亮度、色度和色调（LCH）。

再次，与其他使用亮度值的颜色函数类似，亮度参数接受0到100之间的百分比，0% 为黑色，100% 为白色。

然而，LCH引入了色度，表示我们想要使用的颜色量；从概念上讲，它与HSL中的饱和度相似，但色度理论上是无限的。

然而，在过于兴奋之前，虽然色度在理论上是无限的，但不幸的是，我们的浏览器和显示器所能显示的颜色是有限制的。因此，超过一定的限度（大约是230 ），你所选择的数值就不可能对用户产生任何明显的区别。

最后，和HSL一样，色相可以从0 到360 ，选择的值由色轮上的位置决定。

为什么我们需要高级色彩空间？

在这一点上，你可能会理直气壮地问，为什么我们在CSS中需要像LAB和LCH这样的颜色空间；HSL有什么问题？随着LAB和LCH的引入，开发人员现在可以访问人类可以感知的整个颜色光谱，而HSL（或其他）则不能。

然而，这的反面是语法和支持方面的问题。LAB和LCH的语法不太直观，而且目前很少有浏览器支持（只有Safari），所以你需要暂时用另一种更广泛支持的方法给出一个后备值。

但是，一旦该语法在其他浏览器中得到更多支持，LAB和LCH都是在CSS中指定颜色的强大选项。

与LAB一样，LCH也是另一个难以掌握的色彩空间，所以这里还有一张图，显示了LCH色彩空间以及参数如何影响我们得到的颜色。

在HWB、LAB和LCH中使用alpha通道

最后，与CSS中的其他颜色函数一样，hwb(),lab(), 和lch() 可以接受第四个可选参数来控制alpha通道。

hwb(0 0% 35% / .5);
lab(34% 58 48 / .24);
lch(34% 75 39 / .9);

这里是我们之前的例子，但加入了LCH。

/* Dark Red */
#a60000;
rgb(166 0 0);
hsl(0 100% 33%);
hwb(0 0% 35%);
lab(34% 58 48);
lch(34% 75 39);

/* Light Blue */
#046cdb
rgb(4 108 219);
hsl(211 96% 44%);
hwb(211 2% 14%);
lab(46% 17 -63);
lch(46% 65 285);

如果你使用的是Safari，你可以在下面的CodePen中查看LCH颜色的渲染。

请参阅CodePen上Coner Murphy（@conermurphy）的笔
CSS颜色值
。

浏览器支持

我们先看的四种定义颜色的方法（关键字、HEX、RGB和HSL）都被主要的浏览器广泛支持，所以你不需要担心使用它们时不知道它们是否能工作。

但是，我们在文章后半部分看到的定义颜色的方法（HWB、LAB和LCH）仍然处于早期支持阶段，所以如果你使用它们，为了安全起见，请在上述四种方法中定义一个回退值。

如果你想了解浏览器对各个方法的支持情况，下面是caniuse上每个页面的链接。

• HEX
• RGB
• HSL
• HWB
• LAB
• LCH

总结

那么，就这样吧!在这篇文章中，我们介绍了在CSS中设置颜色的每一种方法，包括一些尚未在CSS中得到广泛支持的新的、令人兴奋的方法，以及为什么和如何在你的下一个项目中使用每种方法。

我希望你觉得这篇关于在CSS中设置颜色的文章对你有帮助。如果你觉得有帮助，请考虑在Twitter上关注我，我在那里发布关于JavaScript生态系统和整个Web开发的有用和可操作的提示和内容。如果你不喜欢Twitter，请访问我的博客，了解我的更多内容。

帖子《在CSS中设置颜色的高级指南》首次出现在LogRocket博客上。