在 23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。

简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。

其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。

其功能能够涵盖：

• 精简
• 调暗
• 饱和度
• 降低饱和度
• 色度增强
• 调整不透明度
• 反转
• 补充
• 转换
• 对比度
• 调色板

快速语法入门

发表于

更新于

阅读量

相对颜色语法的目标是允许从另一种颜色派生颜色。

首先，通过一张图，一个案例，快速入门 CSS 相对颜色语法：

上图显示了将原始颜色 green 转换为新颜色的颜色空间后，该颜色会转换为以 r、g、b 和 alpha 变量表示的各个数字，这些数字随后会直接用作新的 rgb() 颜色的值。

举个例子,实现一个color为红色的字体

<p>CSS Relative Color</p>

p{
	color:rgb(255,0,0);
}

基于上面的相对颜色语法，可以实现从红色变成绿色，代码如下：

p{
    --color:rgb(255,0,0);
    color:rgb(from var(--color) calc(r-255) calc(r-255) b); /* result = rgb(0,255,0) */
}

效果如下，我们就能得到绿色字体

通过这个 DEMO，我们把几个核心基础语法点学习一下：

1. from 关键字

from 关键字，它是相对颜色的核心。它表示会将 from 关键字后的颜色定义转换为相对颜色！在 from 关键字后面，CSS 会期待一种颜色，即能够启发生成另一种颜色。

2. from 关键字 后的颜色表示，支持不同颜色表示或者是 CSS 变量

第二个关键点，from 后面通常会接一个颜色值，这个颜色值可以是任意颜色表示法，或者是一个 CSS 变量，下面的写法都是合法的：

p {
    color: rgba(from #ff0000) r g b);
    color: rgb(from rgb(255, 0, 0) r g b);
    color: rgb(from hsl(0deg, 100%, 50%) r g b);
    color: rgb(from var(--hotpink) r g b);
}

3. 对转换后的变量使用 calc() 或其他 CSS 函数

另外一个非常重要的基础概念就是，我们可以对 (from color r g b) 后的转换变量 r g b 使用 calc() 或其他 CSS 函数。即我们上面的例子

4. 相对颜色语法支持，各种颜色表示函数：

相对颜色的基础的使用规则就是这样，它不仅支持 rgb 颜色表示法，它支持所有的颜色表示法：

• sRGB 颜色空间：hsl()、hwb()、rgb()；
• CIELAB 颜色空间：lab()、lch()；
• Oklab 颜色空间：oklab()、oklch()；

使用css相对颜色，实现文字颜色自适应背景颜色

发表于

更新于

阅读量

相对颜色，还有一个非常有意思的场景 -- 让文字颜色能够自适应背景颜色进行展示。

有这么一种场景，有的时候，无法确定文案的背景颜色的最终表现值（因为背景颜色的值可能是后台配置，通过接口传给前端），但是，我们又需要能够让文字在任何背景颜色下都正常展现（譬如当底色为黑色时文字应该是白色，当背景为白色时，文字应该为黑色）。

像是这样：

在不确定背景颜色的情况下，无论什么情况，文字颜色都能够适配背景的颜色。

在之前，纯 CSS 没有特别好的方案，可以利用 mix-blend-mode: difference 进行一定程度的适配：

div {
    // 不确定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

实操过这个方案的同学都会知道，在一定情况下，前景文字颜色还是会有一点瑕疵。并且，混合模式这个方案最大的问题是会影响清晰度。

有了 CSS 相对颜色后，我们有了更多的纯 CSS 方案。

利用 CSS 相对颜色，反转颜色

我们可以利用相对颜色的能力，基于背景色颜色进行反转，赋值给 color。

一种方法是将颜色转换为 RGB，然后从 1 中减去每个通道的值。

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b));  /** 基于背景反转颜色 **/
}

用 1 去减，而不是用 255 去，是因为此刻，会将 rgb() 表示法中的 0~255 映射到 0~1。

配个动图，我们利用背景色的反色当 Color 颜色，适配所有背景情况：

当然，这个方案还有两个问题：

1. 如果颜色恰好是在 #808080 灰色附近，它的反色，其实还是它自己！会导致在灰色背景下，前景文字不可见；
2. 绝大部分情况虽然可以正常展示，但是并不是非常美观好看

为了解决这两个问题，CSS 颜色规范在 CSS Color Module Level 6 又推出了一个新的规范 -- color-contrast()。

利用 color-contrast()，选择高对比度颜色

color-contrast() 函数标记接收一个 color 值，并将其与其他的 color 值比较，从列表中选择最高对比度的颜色。

利用这个 CSS 颜色函数，可以完美的解决上述的问题。

我们只需要提供 #fff 白色和 #000 黑色两种可选颜色，将这两种颜色和提供的背景色进行比较，系统会自动选取对比度更高的颜色。

改造一下，上面的代码，它就变成了：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: color-contrast(var(--bg) vs #fff, #000);  /** 基于背景色，自动选择对比度更高的颜色 **/
}

此方案的优势在于：

1. 可以限定前景 color 颜色为固定的几个色值，以保证 UI 层面的统一及美观
2. 满足任何情况下的背景色

当然，唯一限制这个方案的最大问题在于，当前，color-contrast 还只是一个实验室功能，未大规模被兼容。