设计师给你 oklch(70% 0.1 140) 你直接写进 CSS 了——color() 函数把颜色这件事彻底变了

设计师给你了一个颜色：oklch(70% 0.1 140)，你第一反应是——这个到底怎么写到 CSS 里？转 hex？转 rgb？凭什么我要替设计师干这个活？

CSS Color Level 5 给了你一个答案：color() 函数。这个函数让你在 CSS 里直接用任何颜色空间，而且还能把一个颜色在不同颜色空间之间来回转换。

它到底能做什么

color() 函数有两种用法。

第一种：直接写某个颜色空间的值。

.brand {
  /* 直接用 OKLCH，设计师给你什么你写什么 */
  color: oklch(70% 0.1 140);

  /* 直接用 Display P3，更宽的色域 */
  color: color(display-p3 0.8 0.2 0.1);

  /* 直接用 sRGB，传统的写法但更精确 */
  color: color(srgb 0.8 0.2 0.1);
}

第二种：把一个已有的颜色转换到另一个颜色空间。

这是它真正值钱的地方。

:root {
  --brand: oklch(70% 0.1 140);
}

.button {
  /* 把 --brand 转成 sRGB 空间下的值 */
  background: color(from var(--brand) in srgb r g b);
}

注意这个 r g b — 转换到 sRGB 之后，你拿到的是三个独立的通道值，不是字符串。你可以直接对这些值做数学运算。

为什么这个「颜色转换」以前做不到

CSS 历史上每种颜色空间是各写各的。rgb() 转 hsl() 要靠设计软件，oklch() 转 srgb 更是没人想手动算。

现在你可以在 CSS 里直接做这件事，而且是在运行时根据你的变量值实时转换。

/* 设计师给你一套 oklch 调色板 */
.theme-dark {
  --primary: oklch(60% 0.12 240);
  --secondary: oklch(50% 0.08 200);
}

/* 你要把这套颜色用到某个只认 sRGB 的老组件上 */
.legacy-widget {
  /* 一句搞定，不用算 */
  color: color(from var(--primary) in srgb r g b);
}

这在实际项目中很常见——设计工具在用 OKLCH，但某些 Canvas 2D 或者 WebGL 的 shader 可能只认 sRGB 或者 xyz。

相对颜色语法：把调色板自动化

最有意思的用法是「相对颜色」——从一个已有颜色推导出新的颜色，而且是在任何颜色空间里做推导。

:root {
  --base: oklch(65% 0.15 220);
}

/* 在 OKLCH 空间里调亮度，比在 hex 里调直观 100 倍 */
.card {
  background: color(from var(--base) oklch calc(L) 0.1 220);
}

/* 在 sRGB 空间里调，只调红色通道 */
.accent {
  color: color(from var(--base) in srgb calc(r + 0.1) g b);
}

/* 在 Display P3 空间里，把亮度减半 */
.dark-variant {
  color: color(from var(--base) in display-p3 calc(r/2) calc(g/2) calc(b/2));
}

以前你在 CSS 里「调亮一点」「偏红一点」只能靠猜或者靠工具。现在你可以明确指定在哪个颜色空间里做运算。

还能做什么：给老颜色空间续命

有些设备只支持 sRGB，有些支持 Display P3（iPhone 的屏幕）。用 color() 你可以优雅地写降级方案。

.hero-gradient {
  background: color(display-p3 0.8 0.3 0.1, srgb 0.8 0.3 0.1);
}

display-p3 如果浏览器不支持，会 fallback 到后面那个 srgb 值。不用媒体查询，不用 JavaScript 检测，CSS 原生支持。

浏览器支持情况

根据 MDN 文档，color() 函数和相对颜色语法已经在主流浏览器中支持。OKLCH 和 Display P3 相关的颜色空间也已经进入 Baseline 2023+。如果你要兼容更老的浏览器，可以用 @supports 做检测：

.card {
  /* 不支持 color() 的浏览器用这个 */
  background: #4a7cff;
}

@supports (color: color(from oklch(50% 0.1 200) in srgb r g b)) {
  .card {
    background: color(from var(--brand) in srgb r g b);
  }
}

下一步：把这个用到你的设计系统里

如果你现在在维护一个设计系统，可以考虑把颜色变量全部改成 OKLCH——因为 OKLCH 更符合人类对颜色的直觉感知（亮度、色度、色相三个维度是分开的），然后在需要的地方用 color() 转换到你需要的颜色空间。

:root {
  /* 所有颜色用 OKLCH 定义，维护和调整最直观 */
  --color-bg: oklch(98% 0.01 240);
  --color-surface: oklch(95% 0.015 240);
  --color-border: oklch(85% 0.02 240);

  /* 主题切换也直接换 OKLCH 值，比拼 hex 好维护多了 */
  --color-bg-dark: oklch(15% 0.02 240);
  --color-surface-dark: oklch(20% 0.015 240);
}

现在设计师给你一个 oklch() 值，你可以直接写进 CSS，不用再转成 hex 绕一圈了。