TomasValleDuran/color-theory

UI 介面的色彩理論

UI 中的色彩多半是穿著色相外衣的明度問題。層級、對比、易讀性及深色模式都由明度決定；色相承載身份與意義；彩度（飽和度）則承載強調效果。請依此順序進行。

工具箱 —— 用它取代猜測

scripts/palette.py（Python 3，無依賴）可用 OKLCH 計算所有數值，並進行色域映射至 sRGB。千萬別再靠目測對比度或手動發明漸層，直接交給它計算。

S=<skill-dir>/scripts/palette.py   # <skill-dir> = 此技能載入時顯示的基礎目錄
python3 $S system "#6d28d9"                    # 完整系統：漸層 + 淺色/深色角色，所有配對皆經驗證
python3 $S system "#6d28d9" --format tailwind  # Tailwind v4 @theme + 語意變數（也支援：css, json = DTCG）
python3 $S ramp "#0f766e" --format css         # 單一 50–950 漸層（輸入值會被吸附至最近的步驟）
python3 $S neutral "#0f766e" --tint 0.01       # 帶品牌色調的灰色漸層
python3 $S contrast "#fff" "#7c3aed"           # WCAG 比率 + 等級 + APCA Lc
python3 $S cvd "#16a34a" "#dc2626" "#2563eb"   # 色盲模擬 + 易混淆配對
python3 $S harmony "#6d28d9" --scheme split    # OKLCH 中的色相關係
python3 $S convert "hsl(...)/#hex/oklch(...)"  # 標記法轉換 + 色彩鮮豔度

system 會在配對失敗時自動沿著漸層調整（例如將 text-muted 調暗直到達到 4.5:1），並輸出每一次調整——請將這些資訊傳達給使用者，這些都是設計決策。

工作流程：從「我需要顏色」到交付的符記

1. 找到錨點。 有現成的品牌色嗎？使用它。沒有？從產品個性推導（見下方選擇色相），提出 2–3 個種子色並附上一行簡短的選擇理由，而不是隨機挑一個。
2. 用 palette.py system <seed> 生成系統。 一個強調色漸層、一個中性色漸層，以及產品實際會渲染的狀態色漸層。
3. 映射到語意角色。 永遠不要在元件中使用原始色（--color-accent、--color-text-muted，而不是 --violet-600）。設計系統建構技能會詳細說明符記架構。
4. 驗證： 檢查實際渲染配對的對比度（文字在其實際背景上，包括 alpha/覆蓋層）、兩種主題，以及任何以顏色編碼的資訊（圖表、狀態、標籤）的 CVD 檢查。
5. 謹慎使用（見下方），然後檢視渲染結果。

色彩用量：分佈

• 中性色承擔約 90% 的工作。 背景、表面、文字、邊框。一個基於優質中性色、搭配一個強調色的 UI，幾乎總是比多色 UI 看起來更專業。
• 60-30-10 是一個有用的健康檢查：約 60% 的主導中性色、30% 的次要表面/中性色變化、10% 的強調色。如果強調色超過約 10–15% 的像素，它就不再代表「在此處操作」。
• 每個視圖只有一個已填色的主要操作按鈕。 按鈕背景上的顏色從遠處看就像主要操作；而彩色文字則看起來像連結。
• 一種顏色只代表一個意義。 如果紫色代表「品牌/互動」，就不要再用它來做分類標籤。狀態色必須與強調色明顯區分（工具會讓它們在 OKLCH 色相上保持 ≥25°）。
• 顏色絕非唯一的信號。 約 8% 的男性和約 0.5% 的女性有色覺缺陷；請將顏色與圖示、標籤、圖案或位置配對使用。

選擇色相（在沒有品牌色的情況下）

聯想是依文化而異的，且與執行相比影響力較弱——一個建構良好的任何色相的調色盤，都勝過一個使用不當的「心理學上正確」的色相。把它們當作最後的參考：

色相家族	常見 UI 解讀	典型產品	注意事項
藍 / 靛藍	信任、冷靜、能力	金融科技、SaaS、健康、企業	最常見的選擇；提高彩度或偏向靛藍/青色以突出
紫色	創意、高端、「AI」	創意工具、AI 產品	非常高飽和的紫色現在已成為「AI 泛濫」的標誌
綠 / 青綠	成長、金錢、健康、成功	金融、永續、健康	與「成功」狀態衝突——請調整狀態色相
紅 / 玫瑰	活力、緊迫、熱情	食品、媒體、娛樂	與「危險」衝突；用於品牌時刻，將破壞性操作區分開來
橙 / 琥珀	溫暖、友善、行動	消費性產品、食品、市場	深橙色會轉為棕色；檢查淺色模式的填色
黃 / 萊姆	樂觀、引人注意	消費性、趣味導向	無法承載白色文字；在黃色填色上使用深色文字，或將品牌色作為強調色-次要色，並選擇較深的步驟作為填色（--hue-shift -15 可讓色調保持金黃色而非橄欖色）
近中性（黑/石色/沙色）	奢華、編輯、工具	開發工具、時尚、作品集	需要排版與空間上的工藝才不會顯得空洞

值得注意的地域差異：紅色在中國代表好運/喜慶，但在西方金融領域代表虧損（而在中國/日本股票行情中代表上漲）；白色在部分東亞文化中與哀悼相關。對於金融 UI，請讓上漲/下跌的顏色可配置。

感知色彩 —— 為什麼是 OKLCH

HSL 的明度會騙人：hsl(60 100% 50%)（黃色）和 hsl(240 100% 50%)（藍色）的「L=50%」相同，但感知亮度差異極大。這就是為什麼 HSL 漸層的對比度不均勻，且不同色相的深淺步驟無法對齊。

OKLCH = L（感知明度 0–1）· C（彩度，約 0–0.37）· H（色相角度）。相近的 L ≈ 不同色相間相近的感知亮度，因此：

• 不同漸層的相同步驟（例如所有 -600）對白色的對比度相似，
• 可以在不改變明度的情況下旋轉色相（和諧色、與之「匹配」的狀態色），
• 深色模式可以透過推理 L 來推導。

注意事項：sRGB 色域是不規則的——每個色相在每個 L 值都有不同的最大彩度（黃色在 L≈0.95 附近達到峰值，藍色在 L≈0.45 附近）。該工具透過降低彩度來進行色域映射，同時保留 L 和 H。廣色域（Display-P3）顏色是一種增強：先宣告 sRGB 值，再在 @media (color-gamut: p3) 中宣告 P3/oklch() 的鮮豔版本。

所有現代瀏覽器都支援 CSS 的 oklch()；在新的網頁專案中使用它。在原生的平台，請轉換為該平台的標記法（hex/sRGB、Color(red:green:blue:)、Color(0xFF…)）——工具中的 --notation hex 可以幫助你。

漸層、中性色與色調

• 漸層從頭到尾保持同一色相，在淺端（背景所在處，也是人眼最敏感的地方）步驟更細，並在中間步驟達到彩度峰值。11 個步驟（50–950，Tailwind 慣例）或 12 個步驟（Radix 慣例，每個步驟都有指定的工作）——請參閱 references/ramps-and-roles.md 以了解角色映射。
• 調色中性色：在灰色中混入少量品牌色相（彩度約 0.005–0.02）。這會讓整個 UI 感覺一致；純粹的 #808080 灰色在飽和的強調色旁邊會顯得不協調。暖色品牌 → 暖灰色；冷色品牌 → 冷灰色。
• 在品牌 UI 中，長篇文字永遠不要使用純黑對純白；使用近似黑色（中性色-950）搭配近似白色可以減少眩光。在深色模式中使用純黑背景會導致 OLED 在滾動時出現殘影；請使用 L ≈ 0.13–0.18。

深色模式不是單純反轉

• 層級應變亮，而不是陰影變深：表面層 > 背景層約 0.03–0.06 L。
• 稍微降低強調色的飽和度並提高其明度；在深色背景上，飽和的中間色調會產生震動感。
• 正文使用略微偏灰的白（中性色-50/100），次要文字約為中性色-400。
• 填色通常會將其標籤切換為深色文字（工具會根據對比度決定）。
• 重新測量每一對配對；對比度不會因為反轉而保持不變。請參閱 references/dark-mode.md。

對比度 —— 標準

配對	WCAG 2.2 AA	AAA	APCA 建議（參考用）
正文（<24px / <18.66px 粗體）	4.5:1	7:1	Lc 75+（建議 90）
大型文字（≥24px 或 ≥18.66px 粗體）	3:1	4.5:1	Lc 60+
理解 UI 元件及圖形物件所需的元素（輸入邊框、圖示、焦點環、圖表記號）	3:1（SC 1.4.11）	—	Lc 45+
禁用控制項、裝飾性元素、商標	豁免	—	—

WCAG 2.x 是法律/合規基準（ADA、EN 301 549 / 歐洲無障礙法案）。APCA（WCAG 3 的候選標準）能更好地模擬感知，特別是在深色模式和淺色文字方面，但 WCAG 3 尚未定案——請滿足 WCAG 2.2 AA，並將 APCA 作為次要參考。詳細資訊、焦點環規則與注意事項請參閱 references/contrast-and-cvd.md。

漸層、覆蓋層與透明度

• 在 in oklab 中插值漸層（平滑，無中間髒色）；對於會在中間過渡到灰色的多色相漸層，請使用 in oklch。在文字後方的背景上，請讓顏色停止點保持相近的明度。
• 圖片上的文字：使用漸層遮罩或實色襯底；測量最差情況的區域。
• 透明色（/50、rgba）的對比度會根據其下的內容而變化。為文字優先使用實色符記；將透明度保留給覆蓋層、懸浮效果和陰影。

資料視覺化

分類色板需要相近的明度與最大的色相間距；序列色板沿著明度單調變化；發散式色板共享一個中性中間點。如果可用，請使用 dataviz 技能——它有一個經過驗證的調色盤方法。務必在圖表系列顏色上執行 palette.py cvd。

審查他人的配色 —— 快速檢查清單

• 每個文字/背景配對已在兩種主題中測量（而非估計）
• 輸入邊框、焦點環、承載意義的圖示 ≥ 3:1
• 元件中沒有原始 hex/rgb 值；僅使用語意符記
• 一個強調色，僅用於互動/主要意義
• 在 CVD 模擬下，狀態色與強調色及彼此之間保持明顯區別
• 中性色調一致（非冷暖灰色混合）
• 深色模式是設計出來的（較亮的表面表示層級，調整過強調色），而非反轉的
• 意義從不單獨由顏色承載

如需完整的色彩系統審查（含嚴重性排序的發現），better-colors 技能非常出色；對於選色/推導/生成，請留在這裡。

參考資料

• references/ramps-and-roles.md —— 逐步角色映射（Tailwind 50–950 和 Radix 1–12）、狀態色（懸浮/啟用/禁用/選中）
• references/dark-mode.md —— 深色主題建構、層級、平台特定實作（iOS 語意顏色、Material 色調表面）
• references/contrast-and-cvd.md —— WCAG 2.2 細節、APCA 等級、焦點指示器、CVD 設計規則
• references/harmony-and-brand.md —— 和諧色系方案、推導次要顏色、品牌到 UI 的轉換、色溫、同時對比