Skip to main content

選擇色彩模型

色彩模型和色彩空間​

色彩模型是用來描述色彩的「座標軸空間」，從小學的 RGB 到 HSL 和 LCH 都是不同的色彩模型，不同的座標軸有各自的特性和表現能力，比如 HEX 就沒辦法描述 DCI-P3 色彩空間。

色彩空間則是「可呈現的顏色範圍」，主要用在硬體規格上，比如說螢幕規格可以顯示 DCI-P3 色彩空間，那麼電影拍 DCI-P3 螢幕就能「顯示」那些顏色，請注意能顯示不代表顯示正確。常見的色彩空間由低階到高階大概有 45% NTSC / 72% NTSC (100% SRGB) / DCI-P3 / Rec.2020 / Adobe RGB，前兩個是一般螢幕，接下來兩個是影視作品，最後一個用於紙本影印。

產品的色彩空間不是越大越好，比如說 Windows 色彩管理一團亂，色彩空間大反而顏色容易過飽和，尤其是低階硬體的廣色域根本沒在管色彩映射，色準、校色也理所當然直接關係此問題。

色彩模型​

RGB and Hex​

最古老的色彩模型，用紅綠藍三原色組成，最大的問題是

  1. 開發者難以從數值判斷色相、對比度、亮度
  2. 對比度和亮度無法直接手調

HEX 和 RGB 是一樣東西只是改成 16 進位，為了解決這些問題於是有了 HSL 模型。

HSL​

HSL（Hue 色相，Saturation 飽和度，Lightness明度）解決了上面的問題，可以看到座標完全不同並且直接給你獨立座標專門調整亮度。

這基本上就是 Adobe Lightroom 裡面調整顏色的方式，然而 HSL 只解決了一半問題，另一半的問題是不同色相的亮度數值即使一樣，人眼感受到還是不一樣亮。

hsl(239,100%,52%)
hsl(59,100%,52%)

可以看到亮度設定相同但是黃色明顯更亮，黑色文字在藍色背景下就顯得對比度不足。此外 HSL 和 RGB 都使用 RGB 色彩空間，因此在支援更高色彩空間的顯示器就無法顯示更豐富的顏色。

OKLCH​

OKLCH 其中 LCH 分別代表 Lightness 亮度、Chroma 彩度、Hue 色相，OK 代表沒問題版本的 LCH，至於是改了什麼也不用在意了，反正你不會用 LCH，此標準 2020 才推出，2023 就光速被所有瀏覽器實作支援，這毫無疑問是非常誇張的速度。

HSL 到 OKLCH 之間其實還有 LAB/OKLAB/LCH 最後才是 OKLCH，他最重要的當然就是解決 HSL 的亮度問題，並且支援 DCI-P3 色彩空間。

這樣用文字介紹讀者可能無感，但是實際看設定就知道，RGB 格式對開發者來說就是魔法數字（亂碼）：

:root {
  --color-primary-50: rgb(226, 242, 255);
  --color-primary-100: rgb(186, 221, 255);
  --color-primary-200: rgb(141, 201, 255);
  --color-primary-300: rgb(91, 179, 255);
  --color-primary-400: rgb(50, 162, 255);
  --color-primary-500: rgb(0, 146, 255);
  --color-primary-600: rgb(23, 131, 255);
  --color-primary-700: rgb(31, 113, 235);
  --color-primary-800: rgb(35, 95, 216);
  --color-primary-900: rgb(38, 61, 185);
}

轉成 OKLCH 之後就能很明顯的看出都是類似色相並且亮度級減：

:root {
  --color-primary-50: oklch(95.315% 0.02453 242.467);
  --color-primary-100: oklch(88.35% 0.06007 247.791);
  --color-primary-200: oklch(81.505% 0.09861 246.538);
  --color-primary-300: oklch(74.462% 0.13931 247.098);
  --color-primary-400: oklch(69.499% 0.16798 248.565);
  --color-primary-500: oklch(65.367% 0.19099 251.173);
  --color-primary-600: oklch(62.343% 0.20555 256.407);
  --color-primary-700: oklch(57.27% 0.20001 259.211);
  --color-primary-800: oklch(52.22% 0.19616 262.208);
  --color-primary-900: oklch(43.164% 0.19541 268.192);
}

一目了然而且沒有色相之間的亮度問題，非常好模型。

至於是否該採用 OKLCH？他在 2023 之後的瀏覽器才能用，但是如果你的專案已經使用 Tailwind V4 又沒額外設定，那麼 Tailwind V4 預設會使用 2024 之後的瀏覽器才支援的原生 CSS nesting 語法，這也代表用戶都有新瀏覽器，沒必要用 @support 檢查。

真正的問題是色彩空間，在不支援 DCI-P3 的硬體使用 OKLCH，超出的 SRGB 色彩空間的顏色會回退，而且不支援 DCI-P3 的硬體非常多，雖然手機基本上全都支援了，但是低階筆電不用想連 72% NTSC 都沒有，一般筆電也才勉強 100% SRGB，中高階才會看到支援 DCI-P3，電腦螢幕也是如此。

唯一的解決方案就是找到 https://oklch.com/ 這種工具檢查顏色是否正常。

相關工具​

  1. Refactoring UI 有教學文章說明如何自建色彩主題。
  2. tints.dev 根據 Refactoring UI 建立了 Tailwind 色彩生成器。
  3. Material Design Palette Generator 可以快速建立 Material Design 的顏色。
  4. Tailwind 內建顏色 不固定 OKLCH 的 H，數值會浮動。
  5. oklch-smooth 用 OKLCH 建立視覺鮮明的資料可視化顏色。

請到這裡看 Hugo Blowfish 主題這種自創 color scheme 的方案和 Tailwind 生態系的方案有什麼差異。

更新日期：