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 色域）與油墨能呈現的色彩範圍（CMYK 色域）並不相同。螢幕上鮮豔的螢光粉紅印出來顏色就是會跑掉——那是油墨無法製造的顏色。

因此印刷設計師在作業前只選用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 → 自動儲存到剪貼簿 → 從剪貼簿選擇器取用——流程不中斷。不需要像 macOS 內建數位色彩計一樣另外開啟，也不需要每次手動按複製快捷鍵。

剪貼簿自動識別色碼

fns 的剪貼簿歷史記錄能自動辨識複製的文字是否為色碼，格式不限。

從歷史記錄中取回複製的顏色時，光看文字很難記得是哪種顏色。fns 在每個項目旁顯示小色塊，讓人一眼就能辨識。

只查看色彩

只需一個按鍵，就能在剪貼簿歷史記錄中只篩選色碼來查看。設計作業中想集中查看最近使用的顏色時，不需要在文字、URL、程式碼之間翻找。

• 在同一個選擇器中輸入 color: 等篩選關鍵字 → 只顯示色彩項目
• 以顏色名稱搜尋 — 搜尋「blue」、「red」即可篩選出該色系
• 相近顏色會以視覺方式分組排列

將一種顏色轉換為其他格式

可以轉換成其他表示法後取出同一種顏色。從 Figma 複製 #FF5733 後想以 rgb(...) 格式貼入 CSS，只要在 fns 剪貼簿選擇器中選取該項目並按一次快捷鍵，即自動完成轉換。

在 Figma（HSB）與 CSS（HSL/HEX/OKLCH）之間切換時，不需要每次都開啟轉換器。

文字展開與組合

將常用的品牌色登錄為文字縮寫。

無論在 CSS、Figma 的顏色輸入欄、Slack 訊息還是程式碼編輯器，相同的縮寫都能直接使用。不再需要每次搜尋品牌指南再複製色碼。

每次開啟轉換器、把色碼轉成其他格式的時間，試著用 fns 省下來。

好奇這些數字究竟從何而來——RGB 三通道的基礎、二進位與 HEX 表示法的原理？從電腦如何產生顏色：RGB、HEX 與二進位的故事開始讀起吧。