设计系统每次改品牌色都要重调整套色板？CSS 一个关键字把它自动全算出来了

写过前端的都踩过这个坑——设计系统里主色定了，还要给 hover、active、disabled、浅色背景、深色背景各配一套变体。以前要么靠 Sass 函数批量算，要么每个值手写一遍，改一次品牌色要改十几处。

CSS 相对颜色语法（Relative Color Syntax）把这件事用一个 from 关键字原生化了。

/* 旧方式：每个变体独立写死 */
:root {
  --brand: oklch(62% 0.18 255);
  --brand-hover: oklch(70% 0.16 255);    /* 手调 */
  --brand-light: oklch(88% 0.06 255);    /* 手调 */
  --brand-overlay: oklch(62% 0.18 255 / 0.15); /* 手调 */
}

/* 新方式：从一个 base token 自动派生全部变体 */
:root {
  --brand: oklch(62% 0.18 255);
}

.button {
  background: var(--brand);
}
.button:hover {
  background: oklch(from var(--brand) calc(l + 0.08) c h);
}
.button:active {
  background: oklch(from var(--brand) calc(l - 0.06) c h);
}
.overlay {
  background: oklch(from var(--brand) l c h / 0.15);
}
.border {
  border-color: oklch(from var(--brand) calc(l - 0.08) c h);
}

from var(--brand) 把 --brand 作为 origin color 解构成 oklch 的三个通道变量 l（明度）、c（色度）、h（色相），然后你用 calc() 对任意通道做数学运算得到新颜色。不只是 oklch，rgb()、hsl()、display-p3 都能用，浏览器会自动做色彩空间转换：

/* 从十六进制 origin，在 oklch 空间里做色相旋转 */
--primary: #3b82f6;
--secondary: oklch(from var(--primary) l c calc(h + 120));

这个语法是 CSS Color Module Level 5 的一部分，Chrome 119+、Firefox 128+、Safari 18.4+ 已经全面支持，覆盖率约 93%，已经在 Baseline 2026 清单里。渐进增强也很简单，层叠机制会自动处理：

.button {
  background: #3b82f6; /* 旧浏览器回退 */
  background: oklch(from var(--brand) calc(l + 0.08) c h); /* 现代浏览器覆盖 */
}

它本质上消灭了「每个变体都要单独 token」的模式——一个 base 定义，所有派生在用到的位置就地算出来。改品牌色只需要动 --brand 一个地方。

下一步：如果你现在用 Sass/Less 的 color 函数做这件事，可以把这套模式原地换进来，感受一下少了多少 token 定义。