从 RGB 到 OKLCH，为什么，以及怎么做

一、引言

颜色是 UI/UX 设计的核心元素，它不仅影响视觉美感，也直接关系到可读性和品牌一致性。传统的 RGB/HSL 色彩系统长期以来被设计师和前端工程师使用，但在现代设计系统中，尤其是需要生成色阶、适配暗色模式时，它们的局限性逐渐暴露。

OKLCH 色彩系统应运而生，它基于人眼的感知特性，使颜色调整更加线性和可控。本篇文章将介绍为什么从 RGB 迁移到 OKLCH 具有必要性，以及具体的实践方法。

二、RGB 是什么：优势与局限

1. RGB 的本质

RGB 是一种硬件驱动模型，通过红绿蓝三通道混合光线形成颜色。它直接对应显示器的物理输出，是图像处理和底层渲染的标准。

2. RGB 的优势

通用性强：所有显示设备和图形库都支持 RGB。

适合图像处理：对像素级操作和底层渲染效率高。

成熟的工业标准：几十年来广泛使用，工具链完备。

3. RGB 在 UI 设计中的局限

视觉亮度不均：数值亮度不等于人眼感知亮度。

调亮或调暗会偏色：红色调亮变粉，蓝色调暗变紫，绿色调亮偏黄。

渐变发灰：例如蓝到黄的渐变中间会出现灰色段。

深色模式适配困难：需手动准备两套颜色。

色阶生成不均匀：自动生成 50–900 色阶时容易出现断层，维护成本高。

这些问题在现代设计系统中尤其明显，例如 Tailwind、Radix 或 Material UI 等都需要多级色阶和动态主题，RGB 难以满足工程化需求。

三、OKLCH 的优势

OKLCH 是一种感知均匀的色彩空间，它的三个分量对应人眼感知：

L (Lightness)：亮度

C (Chroma)：彩度或鲜艳度

H (Hue)：色相

OKLCH 的主要优势

感知均匀：亮度线性可控，调亮或调暗不会偏色。

品牌色稳定：C/H 保持不变，深浅模式和色阶都可保持一致。

自动生成色阶：50–900 色阶无需手工修正。

渐变自然：视觉上平滑，无 RGB 常见的“脏灰”现象。

深色模式适配简单：只调 L，颜色仍然保持原有色调。

现代浏览器支持：Chrome、Firefox、Safari 已原生支持 oklch()。

四、RGB 与 OKLCH 的实际对比

1. 亮度调节

RGB：调亮红色可能变粉，调暗蓝色可能变紫。

OKLCH：只调亮度 L，C/H 不变，色调保持一致。

2. 渐变效果

RGB：蓝到黄的渐变会出现灰色脏段。

OKLCH：渐变自然，视觉线性。

3. 深色模式适配

RGB：通常需要为深色模式单独准备一套颜色。

OKLCH：只调整 L 即可自动适配，C/H 保持不变。

4. 色阶生成

RGB：自动生成色阶可能出现断层或偏色。

OKLCH：线性生成亮度阶梯即可，工程化友好。

五、如何从 RGB 迁移到 OKLCH

1. 确定品牌色 H/C 值

可通过工具将 RGB/HEX 转换为 OKLCH。

H 表示色相方向，C 控制彩度，保证品牌识别一致性。

2. 生成浅色与深色主题

浅色模式：选择适合亮底的 L 值。

深色模式：只调整 L，保证在暗底上可读，同时保留原色彩感。

3. 自动生成色阶

将 L 值均匀分布生成 50–900 色阶，C/H 保持固定。

可以使用简单脚本自动生成，如 JavaScript 示例：


function generateScale(h, c, lightStart, lightEnd, steps = 10) {
  const scale = {};
  for (let i = 0; i < steps; i++) {
    const l = lightStart + (lightEnd - lightStart) * (i / (steps - 1));
    scale[i] = `oklch(${l.toFixed(3)} ${c} ${h})`;
  }
  return scale;
}

const brandScale = generateScale(280, 0.12, 0.95, 0.25);
console.log(brandScale);

4. CSS 使用

定义变量：


:root {
  --brand-l: 0.60;
  --brand-c: 0.12;
  --brand-h: 280;
  --brand: oklch(var(--brand-l) var(--brand-c) var(--brand-h));
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-l: 0.75;
  }
}

在组件中直接使用：


.button {
  background: var(--brand);
  color: white;
}

5. Tailwind 使用

在 tailwind.config.js 中声明颜色：


theme: {
  extend: {
    colors: {
      brand: "oklch(var(--brand-l) var(--brand-c) var(--brand-h))",
    },
  },
},

按钮和组件即可自动适配浅/深色模式，无需额外 dark 颜色。

六、总结

RGB 是为显示器设计的硬件模型，不适合现代 UI 系统的工程化色彩管理。

OKLCH 是为人眼感知设计的色彩空间，能够保证亮度、色相和饱和度的可控性。

迁移到 OKLCH 可以实现：

品牌色视觉一致
色阶均匀自然
深浅模式自动适配
UI 渐变平滑

对设计系统和前端工程化维护具有明显优势，是现代 UI 系统的首选颜色方案。