OKLCH 与广色域：为什么你的颜色在别人的屏幕上不一样

约 7 分钟读完 · 更新于 2026-10-21 · 文中每条都能在下面的配套工具里动手验证

sRGB 是 1996 年的显示器，不是颜色的全部

HEX 和 rgb() 描述的是 sRGB 色域里的点——1996 年为 CRT 定的标准，只覆盖人眼可见范围的一小部分。现代手机与显示器普遍支持 display-p3，饱和的红绿青比 sRGB 多出近三分之一。你写的 #22c55e 在 p3 屏幕上被硬映射，在别的设备上就显得不一样；而 OKLCH 把「颜色」与「设备能力」解耦：L 明度、C 色度、H 色相都按人眼感知均匀刻度。

广色域写法与回落

CSS Color 4 的正确姿势：@supports 里写 p3 增强，外层保留 sRGB 回落；再用 color-gamut 媒体查询判断设备能力。色值超出目标色域时浏览器会裁剪（gamut mapping），但主动控制比被动裁剪可控得多。

.brand {
  color: oklch(64% 0.2 262);                        /* 全浏览器：OKLCH 语法 */
}
@media (color-gamut: p3) {
  .brand { color: oklch(64% 0.28 262); }            /* p3 屏：更高色度 */
}
/* 极老浏览器连 oklch() 都不认 → 再补一行 hex 放最前 */

--brand-50:  oklch(97% 0.03 262);
--brand-500: oklch(64% 0.21 262);
--brand-900: oklch(32% 0.12 262);
/* L 从 97 线性降到 32，视觉上每级亮度差一致。
   用 HEX 手调的 #eef→#123 色阶明度忽高忽低。 */

排查清单：颜色不对劲时看哪里

1. 确认设计稿色值的色彩空间：Figma 导出的 sRGB hex 到 p3 设计稿里直接用会偏差
2. 用转换工具看目标色是否溢出 sRGB——溢出的颜色在普通屏幕上必然「缩水」，要准备回落值
3. 检查对比度：广色域提饱和后白字可能不达标，WCAG 4.5:1 重新验一遍
4. 同一品牌色在暗色模式下重调 L/C，而不是直接复用亮色值
5. 截图对比不同设备时关掉系统的「鲜艳/自然」显示模式，排除系统级色差干扰

常见问题