IT博客汇 | 全新的CSS相对颜色语法-使用from和calc()

全新的CSS相对颜色语法-使用from和calc()

张鑫旭发表于 2024-12-11 15:56:35

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11455
本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。

无论是rgb()颜色函数，还是hsl()颜色函数，现在还支持一种使用from关键字的相对语法，可以基于现有的色值设置相似色或互补色。

特别适合用在hover等交互效果的实现上。

一、相对语法本质是解构

先来学习下语法，这语法看起来花里胡哨，其实很简单，一学就会。

例如，设置一个文字颜色为红色：

p {
  color: rgb(from red r g b / alpha);
}

实时渲染效果如下：

我是文字，看看我的颜色是啥子？

如果你使用的是Chrome浏览器，或者Safari版本在18以上，就可以看到上面的文字（含外面的虚点）都会是红色。

而其中的 r g b 以及 alpha 实际上是对red的解构，其计算值分别是255 0 0 / 1（或者100%）。

于是，我们就可以基于结构后的值进行对应的颜色设置处理。

1. 直接设置

r g b 以及 alpha可以直接使用数值进行替换，从而改变color的计算值。

例如，50%透明度的red颜色，我们可以这般设置：

p {
  color: rgb(from red r g b / .5);
}

实时渲染效果如下：

我是50%的透明红色吗？

此方法要比使用color-mix()更简单，但是color-mix()支持更早，兼容性更好，详见“CSS好用的color-mix颜色函数也可以使用啦”一文。

又例如，紫色的rgb色值是rgb(255,0,255)，因此，我们把上面代码中的b换成255，就可以得到紫色。

p {
  color: rgb(from red r g 255 / alpha);
}

真实的颜色计算结果如下：

紫色是我，我是紫色，啦啦啦😝

注意，实际开发，我们不会使用上面这种用法，这里只是为了展示语法作用。

二、使用calc()用于实战

在生产过程中，我们一般都是使用calc()函数，对结构的色值进行相对计算处理，原因很简单，如果你已经知道具体的色值，那还使用相对语法作甚，岂不多此一举。

1. 语法示意，红色减半

例如：

canvas {
  background-color: rgb(from red calc(r / 2) g b / alpha);
  /* 等同于 rgb(128,0,0) */
}

此时，就是深红色背景，截图渲染结果：

上面这个例子其实也不常用，只是给大家演示下calc()的用法。

2. 文字自动适配背景色

开始进入正题了。

其实文字自动适配背景色很多年前我就介绍过，不过，是需要将r, g, b分别作为变量表示才可以，详见此文“CSS文字和背景color自动配色技术简介”，写于2018年，已经有6年多了。

此时再看依然不过时。

现在有了color色值的相对语法，我们的实现就简单多了。

假设有一个按钮，类名是btn：

<button class="btn">我是按钮</button>

则下面这段CSS代码就可以轻松实现，按钮的文字和边框颜色根据背景色自动适配的效果：

.btn {
    font-size: 150%;
    padding: .5em 2em;
    --bgcolor: var(--color, #2c87ff);
    background-color: var(--bgcolor);
    color: hsl(from var(--bgcolor) h s calc((l - 60) * -999999));
    --border-alpha: calc((var(--lightness) - var(--border-threshold))* 100);
    border: .2em solid;
    border-color: hsl(from var(--bgcolor) h s calc(l - 20 * clamp(-1, calc(l - 50), 1)));
}

眼见为实，您可以狠狠地点击这里：使用CSS相对颜色实现按钮文字和背景色自动适配demo

我们改变演示页面的颜色选择输入框的值，就可以看到，随着颜色的不同，按钮的文字自动适配白色或者黑色，而边框色，则在浅色背景下使用深色，深色背景下使用浅色，很智能实现效果，效果如下录屏所示（不动点击播放）：

3. 悬停点击等邻近色变化

hover一个文字链接，颜色会适当高亮。

在过去，我们会选择两个不同的色值处理。

现在，除了使用color-mix()（和白色混合），还可以使用这里的相对颜色语法，不过不能使用rgb()函数了，而需要使用hsl()函数，因为这种交互的颜色变化，都是亮度或饱和度这块的调整，hsl()函数再合适不过了。

例如：

<a href class="link">我是链接</a>

.link {
    --color: #2a80eb;
    color: var(--color);
}
.link:hover {
    color: hsl(from var(--color) h s calc(l + 10));
}

类似的，按钮点击的时候，背景色会适当加深。

除了使用box-shadow内阴影模拟，filter属性的brightness亮度滤镜设置，还可以试试相对色值。

使用示意：

<button class="btn">我是按钮</button>

.btn {
    --color: #2a80eb;
    background-color: var(--color);
    color: #fff;
    border: 0;
}
.btn:active {
    background-color:hsl(from var(--color) h s calc(l - 10));
}

以上案例均可体验，您可以狠狠地点击这里：CSS相对颜色鼠标悬停或点击交互变色demo

相对颜色在常见交互中的应用