色彩選擇器

各種格式與適用時機

Hex 與 rgb() 是同一件事的不同寫法：螢幕實際驅動的三個通道值。它們精確、通用，卻完全無法告訴你一個顏色放在另一個顏色旁邊看起來如何。

hsl() 把同樣的資訊重新排列成色相、飽和度與亮度，比較好推想：轉動色相、其他保持不變。這也是它成為 CSS 中建立色盤預設方式的原因。hsv() 是它的兄弟，多數繪圖軟體的取色器用的就是它。

如果你還不認識 oklch()，它是最值得學的一個。cmyk() 僅供參考，應視為近似值，因為真正的轉換取決於墨水、紙張與輸出設定檔；這裡的數值來自標準的算術公式，適合用來大致估算，但不適合直接交給印刷廠。

OKLCH 有何不同

HSL 的亮度是各通道的幾何平均，而不是顏色看起來有多亮的量測。純黃色與純藍色在 HSL 中亮度都是 50%，但在人眼看來，一個幾乎是白色，另一個幾乎是黑色。因此，固定 HSL 亮度所建立的色盤，結果都會深淺不均，最後只能一個顏色一個顏色地手動修正，直到看起來順眼為止。

OKLCH 建立在 Oklab 感知色彩空間之上，數值上相等的間距，大致對應到感知上相等的差異。在不同色相間固定亮度，顏色看起來就真的一樣亮；以相等間距調整亮度，就能得到均勻的色階。這讓它很適合用來產生淺色與深色變化、建立符合無障礙需求的配色組合，以及在兩個顏色之間插值，而不會出現 RGB 混色時中間那段混濁的灰色。

有一點要注意：OKLCH 可以描述 sRGB 色域以外的顏色，這些顏色在一般螢幕上顯示時會被裁切。這種情況常見於極端亮度下的高彩度，結果是兩個不同的 OKLCH 值顯示出來一模一樣。

如何解讀對比度

對比度以 WCAG 2 公式計算：先將 sRGB 通道線性化，求出每個顏色的相對亮度，再以較亮者加 0.05 除以較暗者加 0.05。結果從兩個相同顏色的 1:1，到白底黑字的 21:1。

門檻是：AA 等級一般內文為 4.5:1；大字（約 24px，或粗體 19px）以及介面元件與有意義的圖形為 3:1；AAA 等級為 7:1。這裡同時顯示對白色與黑色的比值，因為需要哪一個取決於顏色放在什麼底色上，而在白色上不及格的顏色，放在黑色上往往輕鬆過關。

這個公式有已知的弱點，所以不要把數字當成全部的答案。它會系統性地高估深色背景上淺色文字的對比，這就是為什麼有些深色主題帳面上合格，讀起來卻很吃力；除了單一的大字門檻外，它也不考慮字重與字級，所以及格的極細字重仍可能很難閱讀。後繼指標 APCA 解決了這兩個問題，但目前還不是指引的正式要求。先達到比值，再親眼看看。

透明度與八位數 Hex

Hex 可以把透明度當作第四個通道：完整寫法是 #RRGGBBAA，簡寫是 #RGBA。目前所有瀏覽器都支援，這裡也都能接受。

它們有兩個常見問題。第一是通道順序：包括 Android 在內的某些平台把透明度放在最前面，寫成 #AARRGGBB，所以從這類工具複製出來的值貼進 CSS，不會報錯，而是給出一個看似正確的錯誤顏色。第二是透明度是十六進位，所以 50% 不透明度是 80 而不是 50；現代的 rgb(0 0 0 / 50%) 語法完全免去換算，半年後回頭看也更容易讀懂。

一個色彩值究竟描述了什麼

十六進位三元組不是顏色，而是給顯示器的指令。#CC0000 的意思是把紅色通道推到最大值的 80%，其餘為零；而觀看者實際看到什麼，取決於面板、它的校正狀態、環境光線，以及這組數字被解讀成哪一個色彩空間。

除非另有說明，那個色彩空間就是 sRGB。它於 1996 年標準化，用來描述當時的 CRT 螢幕，之所以沿用至今，是因為網路需要一個大家都能共享的假設。現代手機與筆電螢幕能呈現的範圍比 sRGB 更廣，這就是為什麼標記為 Display P3 的圖片，看起來會比同樣數字被當成 sRGB 解讀時更飽和。

還有一個細節藏在數字裡：sRGB 不是線性的。數值 128 的亮度並不是 255 的一半，因為編碼中有一條 gamma 曲線，把更多精度分配給暗部，也就是人眼較敏感的區域。這也是為什麼把兩個十六進位值逐通道平均，會比在線性空間中混合同樣的顏色更混濁，以及為什麼對比度公式會在計算前先把通道線性化。

從一個顏色建立可用的色盤

多數介面色盤是少數幾個色相，各自以數個亮度階呈現：背景、低調的表面、邊框、次要文字色、實心品牌色，以及一兩個用於 hover 與 active 的更深色。每個色相選九到十一階是常見做法，因為這樣一份定義就能同時涵蓋淺色與深色主題。

行得通的方法是把每一階的感知亮度固定在所有色相上，再讓彩度變化。藍色、綠色與紅色的第 500 階，在頁面上應該讀起來一樣重；如果其中一個特別跳，那麼這套色階在任何用到的地方看起來都會失衡。在 OKLCH 中這麼做，數字會替你完成工作；在 HSL 中，就得一個顏色一個顏色用眼睛修正。

彩度通常必須在兩端收斂。非常亮與非常暗的顏色在 sRGB 色域內無法承載太高的飽和度，所以固定彩度的色階會在兩端被裁切，讓相鄰的兩階顯示成一模一樣的顏色。

色彩不是唯一的溝通管道

大約每十二位男性、每兩百位女性中就有一人有某種色覺缺陷，最常見的是紅綠辨識能力下降。只用紅色與綠色建立的狀態系統對他們而言是看不見的，只靠色相區分系列的圖表也是一樣。

解法是冗餘，而不是避開顏色：把顏色與形狀、圖示、文字標籤或位置搭配使用。一則帶有驚嘆號圖示與「錯誤」字樣的紅色訊息對所有人都有效；只有紅色則只對多數人有效。對圖表而言，直接標註優於圖例，而同時改變亮度與色相，能讓系列在頁面以黑白列印時仍可分辨。

對比度在這裡同樣重要，而且檢查成本很低。內文 4.5:1、介面元素 3:1，這些門檻正是多數軟體採購規範與無障礙稽核所採用的。

深色主題不是反轉

把每個顏色翻轉過來，得到的深色主題會讓人覺得哪裡不對，原因多半來自感知。深色背景上的淺色文字看起來會暈開、讀起來更重，所以同樣的字重顯得更粗；飽和的顏色在深色表面上會振動；而純黑配純白文字會產生光暈效應，讓內文讀起來很累。

常見的調整是：用很深的灰色而不是純黑；降低強調色的飽和度；以較淺的表面而非陰影來表現層級，因為陰影在黑色上看不見；以及略微降低字重，而不是完全照搬淺色主題。

兩種主題都必須各自檢查。在白色上通過對比度的顏色，常常在深色表面上不通過，反之亦然。這就是為什麼這裡會同時顯示對白色與黑色的比值。

CSS 中的色彩，以及如何組織它

現代 CSS 直接接受以上所有格式，包括 oklch() 以及用斜線表示透明度的空格語法：rgb(0 0 0 / 50%)。這個語法值得採用，因為它讀起來毫無歧義，而且透明度是百分比，而不是沒人能心算的兩位十六進位數。

組織色彩最持久的方式是兩層自訂屬性。第一層以字面命名色盤：--blue-500、--grey-900。第二層命名用途：--color-text、--color-surface、--color-border、--color-accent。元件只引用用途層，於是深色主題只是重新定義用途層，而不是逐一修改每個元件。

兩個較新的功能改變了可能性。color-mix() 以指定比例在指定色彩空間中混合兩個顏色，所以 hover 狀態可以從基準色推導，而不必手動挑選。相對色語法則讓你從既有值調整單一通道來建立變體，使色階與其衍生來源保持同步。兩者在目前的瀏覽器中都獲得支援，而且在 OKLCH 中都比在 HSL 中容易推想得多。