RGB 还不够：HSL、CMYK 与 OKLCH 颜色表示法

在上一篇文章计算机如何表示颜色：RGB、HEX 与二进制中，我们了解到颜色不过是三个数字——红、绿、蓝，各自范围 0～255。屏幕用这些数字运转得很好。但当人类开始操作颜色时，RGB 很快就变得棘手起来。

RGB 方便，但不直观

“稍微亮一点的红色。“用 RGB 怎么做？需要同时把三个通道都微调一点。“只降低饱和度”——光看 RGB 根本不知道该改哪里。“把这个颜色原样印到纸上”——RGB 对此束手无策。

其他颜色表示法正是为了解决这些问题而出现的。

HSL — 符合人类思维的方式

HSL 将颜色拆分为色相、饱和度、亮度三个维度。hsl(14, 100%, 60%) 与 #FF5733 是同一种颜色，但每个参数代表什么一目了然。

如果说 RGB 是计算机的语言，那么 HSL 就是设计师的语言。它让你从想改变什么的角度来处理颜色。

Hue — 色相是一个 360° 的圆

色相像时钟一样循环一圈：从 0° 到 360°。0° 和 360° 都是同一种红色。

Saturation — 饱和度决定颜色的鲜艳程度

即使是同一色相，降低饱和度也会逐渐趋向灰色。

Lightness — 亮度从黑到白

L 为 0% 就是纯黑，100% 就是纯白。50% 是该颜色的”本来”亮度。

HSL 真正的用武之地——创建调色板

保持色相（Hue）不变，只调整 L，就能得到一组自然协调的颜色。同样的事情用 RGB 需要逐一手动计算 9 格，而 HSL 只需将 L 从 12% 到 92% 按步调整即可。

以上两组调色板都可以用一行代码生成。

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... 只需将 L 每次调整 10 即可 */
}

这正是 HSL 在构建设计系统时最能发挥优势的地方。

CMYK — 墨水的语言

要在纸张而非屏幕上呈现颜色，需要一套完全不同的系统。CMYK 是印刷厂使用的四种墨水比例。

为什么黑色用 “K” 而不是 “B”？因为 B 容易与 Blue 混淆。“K” 来自印刷术语 “Key plate”——即用于对齐其他墨水的基准印版。

光叠加越多越亮，墨水叠加越多越暗

RGB 与 CMYK 最大的区别在于混合方式。

红色墨水之所以看起来是红色，是因为它吸收了其他光，只反射红光。墨水的作用是减少光线，因此叠加越多颜色越暗。理论上 CMY 三色全部混合应该得到黑色，但实际上只会得到浑浊的棕色——这就是为什么需要单独备一种真正的黑色墨水（K）。

CMYK 用在哪里

做屏幕设计几乎不会接触 CMYK，它只在需要印刷到纸张时才出现。

• 向印刷厂交付文件时 — 名片、海报、书籍、包装。印刷厂收到 RGB 文件后会将其转换为 CMYK。
• 在 Photoshop / Illustrator 中做印刷用图 — 一开始就将色彩模式设为 CMYK。
• 品牌规范 — 同时标注屏幕用 HEX 值和印刷用 CMYK 值，确保同一品牌色在两种媒介上视觉接近。

屏幕色与印刷色不同的原因 — 色域（Gamut）

屏幕能表现的色彩范围（RGB gamut）与墨水能表现的范围（CMYK gamut）并不相同。屏幕上鲜艳的荧光粉印出来就是不一样的颜色——因为墨水根本无法还原那种颜色。

因此印刷设计师在开工前只会选用 CMYK 色域内的颜色。把 RGB 设计稿直接送印的话，颜色大打折扣是常有的事。

CMYK 值的写法

记录每种墨水喷涂的百分比：0% 表示不喷，100% 表示全喷。

只用 K 100% 的话，印出来往往是偏灰的浑浊黑色。因此印刷厂会同时叠加 CMY，制造更深邃的黑色。

OKLCH — 人类的坐标系

这是 2020 年代正式兴起的颜色模型，核心理念只有一条——“对人眼而言自然准确。”

三个坐标与 HSL 看起来名称相似：

• L — Lightness（亮度，0～1）
• C — Chroma（色度，0～约 0.4）
• H — Hue（色相，0～360°）

但 HSL 有一个隐藏问题：即使 L = 50% 相同，不同颜色实际感知到的亮度差异悬殊。来直接对比一下。

一句话总结——RGB 和 HSL 是机器的坐标系，OKLCH 是人类的坐标系。

L · C · H 各自的作用

看看固定其他值、只改变一个坐标时颜色如何变化。

适用场景

• 亮度均匀的调色板 — 需要将 8 种分类色统一为相同亮度时
• 深色/浅色模式自动切换 — 只需反转 L 值，就能自然生成深色主题
• 无障碍设计 — 可精确预测文字与背景之间的亮度对比
• 渐变 — 中间不会出现灰带，过渡更自然

CSS Color Level 4 已正式纳入，现代浏览器可直接使用。

.btn { background: oklch(67% 0.18 30); }       /* 橙色 */
.btn:hover { background: oklch(60% 0.18 30); } /* 只降低 L 7 → 精确变暗同等幅度 */

何时用哪种格式

绝大多数数字化工作用 RGB/HEX 就足够了。HSL 在创建调色板时值得记住，OKLCH 则在深色/浅色模式设计中大有帮助。

在 fns 中处理颜色

知道颜色本质上是数字之后，下一步就是把常用颜色随手可取。fns 将颜色的提取、存储与调用流程整合在一个按键背后。

随时随地从屏幕取色的 Eyedropper — ⌘+Shift+K

Eyedropper 能精确捕获屏幕上任意像素的颜色，相当于把原本只能在 Figma/Photoshop 内使用的取色器扩展到了全系统。

按下 ⌘+Shift+K，fns 的 Eyedropper 在屏幕任意位置弹出。设计稿中的某个像素、图片的特定区域、其他应用的背景色——把鼠标移过去点击，就能精确捕取那里的颜色。

• 每次点击后自动保存到剪贴板，无需额外的”复制”操作。
• 可以在 Eyedropper 小部件中选择以 RGB / HEX / HSL / CMYK / OKLCH 哪种格式写入剪贴板。
• 同时显示所取颜色的视觉预览及近似系统色。

Eyedropper → 自动存入剪贴板 → 从剪贴板选取器调用——整个流程一气呵成。无需像 Mac 自带数字颜色计一样单独打开，也不用每次都按复制快捷键。

剪贴板自动识别颜色

fns 的剪贴板历史能自动识别复制的文本是否为颜色代码，无论是哪种格式都能识别。

从历史记录中重新调用已复制的颜色时，单看文字很难记起是哪种颜色。fns 在每条记录旁显示小色块，让颜色一目了然。

单独查看颜色

一键在剪贴板历史中只筛选颜色代码。设计作业时想快速找到最近用过的颜色，不必在文字、URL 和代码之间翻找。

• 在同一个选取器里输入 color: 等过滤关键词 → 只显示颜色条目
• 按颜色名称搜索——输入 “blue”、“red” 就只显示对应色系
• 相近颜色会在视觉上归组排列

将颜色转换为其他格式

可以转换格式后再调用同一种颜色。从 Figma 复制了 #FF5733，想在 CSS 里以 rgb(...) 形式粘贴时，在 fns 剪贴板选取器中选中该条目，按一次快捷键即可自动转换。

在 Figma（HSB）与 CSS（HSL/HEX/OKLCH）之间切换时，不必每次都打开转换工具。

文本展开与整合

将常用品牌色注册为文本快捷词。

无论是 CSS 颜色输入框、Figma、Slack 消息还是代码编辑器，同一个快捷词都能直接使用。不必再每次翻查品牌规范手册去复制颜色值。

每次打开转换工具、手动改格式的时间，用 fns 来节省一下吧。

好奇这些数字到底从何而来——RGB 三通道的基础、二进制与 HEX 表示法的原理？从计算机如何表示颜色：RGB、HEX 与二进制开始读起吧。