CSS相对颜色语法（Relative Color Syntax）是一项新功能，允许使用相对颜色值来生成新的颜色。这一特性是在CSS Color Module Level 5中定义的，旨在使颜色操作更加灵活和动态。

基本用法

相对颜色语法使用函数形式，如rgb(from <color> <channel> <channel> <channel>)，其中<color>是参考颜色，<channel>表示从参考颜色中提取的颜色通道。你还可以使用alpha变量来控制透明度。

例如：

css
/* 使用绿色的r、g、b通道生成新的颜色 */
color: rgb(from green r g b); 

相对颜色语法主要有以下几种形式：

1. 调整色调、饱和度、亮度等（使用 color-mod()）：

css
/* 调整现有颜色的亮度、饱和度、色调等属性 */
color: color-mod(var(--base-color) lightness(50%));

2. 颜色的相对调整（使用 mix()）：

css
/* 将一种颜色与另一种颜色混合，并指定混合比例。比如，将基础颜色与黑色混合20% */
color: mix(var(--base-color), black 20%);

3. 使用相对颜色函数（color()）：

css
/* 修改颜色的alpha透明度 */
color: color(var(--base-color) a(90%));

4. 变亮颜色：

css
/* 将蓝色变亮25% */
.lighten-by-25 {
  background: oklch(from blue calc(l * 1.25) c h);
}

5. 变暗颜色：

css
/* 将蓝色变暗25% */
.darken-by-25 {
  background: oklch(from blue calc(l * 0.75) c h);
}

6. 增加饱和度：

css
/* 增加兰花紫的饱和度50% */
.saturate-by-50 {
  background: hsl(from orchid h calc(s * 1.5) l);
}

7. 调整颜色 可以使用calc()函数和其他CSS函数来调整颜色通道值。例如，将绿色的色相加倍：

css
color: hsl(from green calc(h * 2) s l);

示例

假设我们有一个基础颜色，并希望基于这个基础颜色生成一组相对颜色。

css
:root {
  --base-color: #3498db;
  --lighter-color: color-mod(var(--base-color) lightness(+20%));
  --darker-color: color-mod(var(--base-color) lightness(-20%));
  --semi-transparent: color(var(--base-color) a(50%));
}

div {
  background-color: var(--base-color);
  border-color: var(--darker-color);
}

h1 {
  color: var(--lighter-color);
}

p {
  background-color: var(--semi-transparent);
}

在这个示例中：

• --lighter-color 是比基础颜色亮20%的颜色。
• --darker-color 是比基础颜色暗20%的颜色。
• --semi-transparent 是基础颜色的50%透明度版本。

浏览器支持

请注意，相对颜色语法是CSS的新特性，浏览器支持可能不完全一致。在实际使用中，建议查看最新的浏览器支持情况，确保兼容性。

总结

CSS 相对颜色语法使得颜色管理更为灵活，尤其在设计系统中，可以轻松地基于一个基础颜色生成不同的颜色变体，从而保持设计的一致性和可维护性。

参考资料

• MDN Using relative colors
• CSS Color Module Level 5
• CSS Relative Color Syntax
• GitHub上的CSS Color Module Level 5文档