代 CSS 颜色规范

新的 CSS Color Module 规范引入了多种新的颜色表示法. 可以支持多种色彩空间和颜色模型. 这解锁了很多的玩法. 比如: 基于一个颜色生成更深或更浅的颜色; 根据背景自适应文本色; 使用广色域颜色等等.

CSS Color Module Level 4 规范

引入了新的颜色表示法, 同时引入了多种色彩空间, 不再仅限于sRGB, 这些方法现代浏览器均已支持:

• 基于 sRGB 色彩空间的方法: hsl(), hwb(), rgb();
• 基于 CIELAB 色彩空间的方法: lab(), lch();
• 基于 Oklab 色彩空间的方法: oklab(), oklch();
• 其它色彩空间的方法: color()

再补充一点, 这些新方法中:

• 带 h 的是使用极坐标的颜色空间: hsl, hwb, lch, oklch
• color()使用任意 color-gamut CSS 媒介功能支持的颜色空间
• 其它使用的是直角坐标系的颜色空间: rgb, lab, oklab

CSS Color Module Level 5 规范

• 引入工具方法: color-mix(), 现代浏览器均已支持.
• 扩展CSS Color Module Level 4 引入的新方法, 是它们支持相对颜色表示法. 相对颜色表示法绝大多数现代浏览器已支持.

CSS Color Module Level 6 规范

• 引入工具方法: color-contrast(), 目前还没有浏览器支持, 但使用Level 4和Level 5中的工具和方法就可以实现.

在详细介绍这些现代新方法之前有必要对一些术语进行解释:

名词解释:

• 颜色模型(color model)

颜色模型是指颜色与坐标系之间的映射和编码方式, 它定义维度分量与色彩空间的关系. 一个颜色模型就会有一个对应的色彩空间.

• 色彩空间(color space)

色彩空间是某一颜色模型所涵盖的颜色的定义和命名. 每个颜色空间都由数学模型和关联的规则集定义. 色彩空间是表示颜色的三维网格, 色彩空间中的每个颜色都由三个通道分量(维度)来表示. 每个颜色空间都有一个定义的色域。

• 色域(color gamut)

色域指的是它可以表示的特定颜色的范围, 通常指设备可以显示的颜色范围. 如 sRGB, P3, Rec2020 等

可以看出三者有一些共性的东西, 通常来说, 当上下文中使用颜色空间时强调的是它的颜色模型和算法. 当使用色域时强调的是能不能显示某些颜色

CSS Color Module Level 4 新引入的颜色方法统一了带和不带alpha通道的表示法

比如, 以前用的最多的rgb方法, 带和不带alpha通道是不同的方法: 不带alpha通道的是: rgb(r, g, b), 而带alpha通道的是: rgba(r, g, b, a)

现在可以统一使用: rgb(R G B [/ A]), alpha通道值是可选的. 注意为了区分旧方法, 新方法不使用逗号分隔分量, 而是用空格替代.

上面只是拿rgb方法举了个例子, 其实Level 4 中的所有新方法都支持这种表示法. 如: oklch(L C H [/A])

CSS Color Module Level 5 相对颜色表示法

语法: rgb(from <color> R G B[ / A]), hsl(from <color> H S L [/A]), oklch(from <color> L C H [/A]), ...

相对颜色是指从一个指定颜色的色彩空间转换到目标色彩空间, 通过对目标色彩空间中的维度变量进行微调后的结果作为输出.

这听起来比较绕, 简单点说就是可以根据原色, 对维度变量进行微调后输出. 主要特性:

1. 可以从任意色彩空间转换到目标色彩空间, 甚至是CSS自定义属性.
2. 转换后可以使用目标色彩模型中的维度变量
3. 维度分量可以使用calc()等CSS函数计算

这3个特性解锁了一些原本只能通过js才能实现的一些功能.

例子1: 鼠标覆盖按钮时加深背景色:

方法1: 使用Level 5 规范中的相对颜色表示法:

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
}
.btn:hover {
  background-color: oklch(from var(--btn-bg) calc(l - 0.1) c h);
}

这个例子中--btn-bg自定义属性可以更改为任意颜色, 本例中使用了oklch作为目标色彩空间, 因为oklch可以做到调整亮度而不会影响色相.

从这个例子中可以看出, CSS自定义属性与相对颜色的结合使用, 可以创造出很多的新玩法.

方法2: 使用Level 5 规范中的color-mix()方法

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
}
.btn:hover {
  background-color: color-mix(in oklch, var(--btn-bg), black 10%);
}

color-mix()方法的意思是将颜色1和颜色2先转换到in关键字指定的目标色彩空间, 然后按百分比混合它们后输出.由于black只有L分量, 因此混合只影响了L分量, 因此就得到了不改变色相的情况下加深了颜色.

例子2: 根据不同背景色自适应高对比度的文本色

这个场景需要一种方式确定高对比度的算法模型. 通用的是WCAG 2.1, 但它不太准确, 还有一种是APCA, 它相对准确性更高, 参考性更大. 在APCA算法下, 采用oklch颜色模型下L分量在72%左右是一个比较好的对比度分界线. 72%以上采用黑色文本, 72%以下采用白色文本.

好了, 有了这个基础, 现在可以使用纯CSS实现自适应高对比度的文本色:

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
  color: oklch(from var(--btn-bg) clamp(0, calc((0.72 - l) * 10000), 1) 0 0);
}

这个例子中--bg自定义属性可以更改为任意颜色, 按钮文本都可以自适应的高对比度颜色. 本例中使用了oklch作为目标色彩空间, 因为oklch可以做到亮度是可预测性.

这里稍微解释这句:clamp(0, calc((0.72 - l)* 10000), 1), 意思是背景色的l维度分量 > 0.72说明背景是浅色的, 那么文本色的L分量就取0即黑色, 否则就说明背景是深色的,L分量就取1即白色. 如果不想纯白或纯黑, 适当调整各分量以及L的上下界即可.

这个例子还可以使用CSS Color Module Level 6中的color-contrast()实现相同的效果, 但目前还没有浏览器支持, 留着将来备用:

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
  color: color-contrast(var(--btn-bg) vs white,black);
}

color-contrast()的意思是选择vs关键字之后与第一个参数指定的颜色对比度最高的颜色作为输出.

这么多CSS颜色新方法, 我应该使用哪个?

现代网页中推荐使用oklch颜色模型, 使用 OKLCH 的好处:

• OKLCH 各分量是独立的,互不影响的, 对一个分量的修改不会影响其它分量. 而 hsl()不是.
• OKLCH 使设计师无需手动选择每种颜色。他们可以定义一个公式，选择几种颜色，并自动生成整个设计系统调色板。
• OKLCH 可用于任意色域, 标准色域 sRGB, 广色域 P3, Rec2020 等。例如，新设备(如 Apple 的设备)可以显示比旧 sRGB 显示器更多的颜色，我们可以使用 OKLCH 来指定这些新颜色。而且超出色域浏览器会呈现最接近的颜色
• 与 hsl() 不同，OKLCH 更适合颜色修改和调色板生成。因为它使用的是感知亮度, 因此不会再出现意想不到的结果，比如在 Sass 中使用 darken() 产生的意外结果。
• 凭借其可预测的亮度 L, OKLCH 提供了更好的 a11y。
• 随着 CSS 相对颜色函数的浏览器普及, 可以很方便的微调颜色(比如根据基色生成强调色, 只需修改 L 分量), 也将不再需要js侦测背景色的高对比度文本色. 根据 APAC 对比度算法,在感知亮度 L >=72% 时所有色相下黑色文本都不会产生对比度的可访问性问题.
• 与 rgb() 或十六进制(#ca0000)不同，OKLCH 是人类可读和可预测的。您只需查看数字即可快速轻松地知道 OKLCH 值代表哪种颜色。OKLCH 的工作方式类似于 HSL，但它对亮度的编码比 HSL 更好。

OKLCH 颜色由亮度(明度)、色度(饱和度或纯度)、色相三个维度组成, 这也是人类认知里的颜色的三个基本属性.

• 亮度(lightness) 是感知亮度，取值: 0-1 或 0-100%，0为黑色，1或100%为白色，"感知"意味着它对我们的眼睛具有一致的亮度,并且是可预测的, 这与 hsl()中的 L 是不同的。
• 色度(chroma) 从灰色到最饱和的颜色, 对于 P3 和 sRGB 颜色空间应低于 0.37, Rec2020 颜色空间应低于 0.4
• 色相(hue) 在色环中的角度, 色环: 红、橙、黄、绿、青、蓝、紫。红为20度左右, 每个颜色间隔50度左右.

详细分析请看这篇文章: OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog

为了兼容性考虑或想在js中使用CSS相同的颜色功能怎么办?

使用这个 colorjs.io npm包即可. 它完全支持CSS Color Module Level 4 和 Level 5 的规范

新的CSS Color Module规范产生的影响:

1. 浏览器原生的颜色选取器元素需要更新以支持新的颜色模型, 目前还没有浏览器实现.
2. 现有第三方的颜色选取器组件都是基于sRGB的, 不能选取新的色彩空间中的颜色. 这些组件需要重构.

我们的正式开源轻量级的基于Tailwindcss的React 组件库中的颜色选取组件正在重构中

言

如果网页只有一种颜色，那是非常可怕的，颜色的设置丰富了网页，就如同多彩缤纷的世界。

在了解css颜色之前，我们回顾下计算机是如何显示颜色的？计算机根据色光三原色的原理通过各种算法来显示颜色。

css 颜色 —— color

网页中使用颜色关键字、16进制字符、rgb、rgba等表示红，绿，蓝三种颜色混合色，如下示例,几种写法都是指同一个颜色（红色）：

color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)

对于16进制形式，每2位表示一个颜色，从左到右分别是红、绿、蓝，每种颜色取值从00 到 FF。

如下示例：

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*红色*/
color: #00ff00; /*绿色*/
color: #0000ff; /*蓝色*/

对于rgb的表示法，由三个参数组成，分别是红、绿、蓝，每种颜色取值从0 到 255。

如下示例：

color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*红色*/
color: rgb(0,255,0); /*绿色*/
color: rgb(0,0,255); /*蓝色*/

红，绿，蓝值从0到255的结合，给出了总额超过1600多万不同的颜色（256 × 256 ×256）。

但是现代大多数显示器能够显示至少16384种颜色。所以在使用颜色时要格外注意，避免设置不能够显示的颜色，可以参考网页安全色：https://www.w3school.com.cn/cssref/css_colors.asp。

颜色除了有三原色红绿蓝组成，还有亮度层级，如下图：

rgba 中的a是指透明度，这个是css3新增加的属性，通过rgba可以设置更加漂亮的颜色。

css 背景 —— background

通过background属性可以设置元素的背景色、背景图片，语法如下：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background 在一个声明中设置所有的背景属性，可以在这里设置如下属性：

• background-color —— 背景颜色。
• background-image —— 使用的背景图像
• background-position —— 背景图像的位置
• background-size —— 背景图片的大小
• background-repeat —— 如何重复背景图像
• background-origin —— 背景图片的定位区域
• background-clip —— 背景的绘制区域
• background-attachment —— 背景图像是否固定或者随着页面的其余部分滚动。

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允许的，但至少有一个值。

建议使用background 简写属性，这样可以更好地兼容较老的浏览器，少写很多代码，当然你也可以分开使用，比如：

background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;

1、背景颜色 —— background-color

background-color 和之前讲的的color 一样，可以使用16进制、rgb、rgba等设置颜色。如下实例：

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>

如下图显示：

注意：background-color: transparent; 指透明色，不显示任何颜色。

2、背景图片的使用——background-image

给html元素添加背景图片，在早期网页制作中被广泛应用，如今已不建议大量使用。如下实例：

body {background-image:url(/static/bg.gif);}

这里使用了一个125*125大小的图片，如下：

但是你会发现，整个网页铺满了图片，上面的代码默认会铺满整个页面从左到右，从上到下 。如果不想被平铺，可以使用background-repeat 设置。

背景图片同时可以设置多个背景图片，如下：

background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

多个图像以逗号隔开，在页面中多个图片会叠加显示，第一张图片显示在最顶端。

如下效果：

3、背景重复方式 —— background-repeat

它有如下几个属性：

实例如下：

4、背景图的位置 —— background-position

背景图片默认显示在左上角，语法如下：

background-position: x y; // x 距离左边距离，y距离顶部距离

如果要改变它的位置，可以使用关键字：top、bottom、left、right 和 center；或者使用长度值，如 100px 或 5cm；也可以使用百分数值。

x 可以取值 百分比| 数值| left | center | right。

y 可以取值 百分比| 数值| top| center | bottom。

当只设置一个值的时候，另一个会缺省为 center。

使用关键字，将背景图片水平居中，垂直居中：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 

使用百分比%：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%; 

50% 50% 等同于 center center，显示效果和上图一样。

还可以使用具体数值，比如 px、em、cm等。

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px; 

显示效果如下：

5、背景图相对于容器的基准点 —— background-origin

就是设置背景图片相对于html元素什么位置作为初始坐标点，语法：

background-origin: padding-box|border-box|content-box;

几种值得含义：

如下实例：

6、背景图片大小 —— background-size

默认会显示背景图原始尺寸，可以通过此属性设置背景图片在元素上的大小，语法：

background-size: width height;

宽度和高度可以使用 数值、百分比%、cover 及 contain ;

数值：可以使用任何单位的数字，比如 px、em、cm等。如果设置一个值，第二个为"auto(自动)"。

百分比%：相对于其所在html原始宽度和高度，如果设置一个值，第二个为"auto(自动)"。

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

如下示例：

7、背景图像是否固定或者随着页面的其余部分滚动

background-attachment 属性有以下几个值：

如设置一个固定的背景图片，不跟随页面滚动：

background-attachment:fixed;

滚动滚动条，会发下背景图片始终固定在屏幕那个位置。

8、背景绘制区域 —— background-clip

语法如下：

background-clip: border-box|padding-box|content-box;

这个属性类似于 background-origin ，只不过它会裁剪背景图片，如下示例：

9、背景层的混合模式 —— background-blend-mode

所谓混合模式就是将图片与颜色或图片与图片进行混合，语法：

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性值：

示例如下：

其它模式可以自己试试，看下有什么区别。

到此，我们了解了颜色和背景的使用方法，尤其是背景的使用，由于它的属性很多，可以简写也可以分开写，要想完全掌握，还得多练习，每种属性进行组合使用看看其效果。

一般建议使用 background 简写方式，主要是可以少写很多代码。以上介绍难免有误，或不齐全，欢迎指出错误，并补充。

上篇：前端入门——css链接样式

节我们来讲一下颜色，因为我们后面学习 CSS 样式时，会经常用到颜色，颜色也是网页中必不可少的一个元素。例如我们可以给某个字体设置颜色，给元素的边框设置颜色，设置元素的背景颜色等。要想一个网页好看，肯定是需要给它添加一些色彩的。

颜色值

颜色是通过对红、绿和蓝光的组合来显示的。我们一般会通过下面三种方式来规定 CSS 中的颜色：

• 颜色名称
• 十六进制颜色值
• RGB 颜色

颜色名称

HTML 和 CSS 颜色规范中定义了 147 种颜色名，其中有 17 种标准颜色，加上 130 种其他颜色。

例如 red 红色、green 绿色、blue 蓝色等，因为颜色名太多了，这里就不一一给大家列出来啦。我们主要讲一下如何设置颜色。

示例：

例如通过颜色名，将字体颜色设置为红色：

color:red;

或者将元素的背景颜色设置为粉色：

background-color: pink;

使用的使用很简单，直接在 CSS 属性后面接颜色名即可，不需要加别的修饰符。

十六进制颜色值

十六进制颜色值就是通过十六进制来表示颜色，十六进制颜色的规定为：#RRGGBB。其中 RR 是红色、GG 绿色、BB 蓝色，十六进制整数规定了颜色的成。所有值必须介于 0-9 与 A-F 之间。

十六进制值使用三个双位数来编写，并且要以 # 号开头。例如 #000000 黑色、#FF0000 红色、#00FF00 绿色、#0000FF 蓝色。

而当双位数相同时（一二位相同、三四位相同、五六位相同），可以缩写，例如 #000000 可以缩写为 #000、#FF0000 可以缩写为 F00 等。但是像 #101010 这种就不能缩写。

示例：

例如分别将字体颜色设置为红色、绿色、蓝色：

color:#FF0000;
color:#00FF00;
color:#0000FF;

上述代码也可以简写成：

color:#F00;
color:#0F0;
color:#00F;

RGB 颜色

RGB 颜色值是通过 rgb(red, green, blue) 来规定的，三个参数分别定义红、绿、蓝的强度，参数值可以是介于 0 与 255之间的整数，或者是 0% 到 100% 的百分比。

例如 rgb(255,0,0) 表示红色、 rgb(0,0,255) 表示蓝色等。

示例：

例如将背景颜色设置为红色、绿色、蓝色：

background-color:rgb(255,0,0);
background-color:rgb(0,255,0);
background-color:rgb(0,0,255);

总结

上述就是我们所讲的三种规定 CSS 中颜色的方法啦，可以设置使用的颜色有很多，但我们不可能将这些颜色值全部记住，所以其实只需要搞清楚颜色值是怎么使用的就可以啦。

像我们平时工作中，一般会由设计师将网页设计好，然后将设计图给我们，我们在制作网页的时候，就只需要通过颜色吸取器吸一下设计图中的颜色，然后就知道是什么颜色啦。