关于前端:CSS中常用的颜色格式

49次阅读

共计 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 种命名色彩。这些是非凡的关键字值,如 dodgerbluehotpinktomato

开发人员 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)

正文完
 0