相对颜色语法

CSS 颜色模块 Level 5 为 CSS 颜色函数引入相对颜色语法，此语法允许基于另一个颜色定义新颜色

`from [color] 通道关键字`

此语法可以将一个起始颜色，转换为对应颜色空间的通道关键字

rgb()，则通道关键字为 r g b
oklch()，则通道关键字为 l c h

对于每个颜色函数，还有一个 a 的透明通道关键字

:root {
  color: rgb(from red r g b / a);

  /** 等价 */
  color: rgb(255 0 0 / 100%)
}

相对颜色语法 & `calc`

如果想对某一个通道进行计算，就可以通过 calc() 函数

/* 让 tomato 颜色变暗 */
.tomato-darken {
    background-color: oklch(from tomato calc(l - 0.1) c h);
}

应用

1、快速对 16 进制颜色透明

:root {
  --color: #0f0;
  /* 半透明的红色 */
  color: oklch(from var(--color) l c h / 50%);
}

2、原生实现 `darken` 和 `lighten`

:root {
  --color: #0f0;
  /* draken(#0f0, 20%) */
  color: oklch(from var(--color) calc(l - 0.2） c h);
  /* lighten($0f0, 20%) */
  color: oklch(from var(--color) calc(l + 0.2） c h);
}

3、生成相近色

:root {
    /* 定义 Primary 颜色各通道的值 */
    
    --primary-l: 0.4485;
    --primary-c: 0.081;
    --primary-h: 218.73;
    
    /* 基础主色 */
    --primary: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
    
    /* 通过从亮度通道减去 0.1 来创建比主色的更暗色 */
    --primary-darker: oklch(calc(var(--primary-l) - 0.1) var(--primary-c) var(--primary-h));
    
    /* 通过从亮度通道加上 0.1 来创建比主色更亮（轻）的色 */
    --primary-lighter: oklch(calc(var(--primary-l) + 0.1) var(--primary-c) var(--primary-h));
}

Polyfill

使用 @csstools/postcss-relative-color-syntax 这个 PostCSS 插件，可以进行自动化的转换

/* input.css */
.element {
    background: oklab(
        from oklab(54.3% -22.5% -5%)
        calc(1.0 - l) 
        calc(a * 0.8)
        b
    );
}

编译之后的 CSS 代码：

.element {
    background: rgb(12, 100, 100);
    background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b);
}

如果正在使用 postcss-preset-env，并且使用的是最新版本，则已经拥有了此插件