色彩系統
概述
一個精選的即用色彩調色盤庫（淺色 + 深色），涵蓋四大領域——網頁應用程式 UI、行銷/登陸頁面、資料視覺化和終端/TUI——以及建立新調色盤和驗證其無障礙性的方法論。
核心原則： 根據語義角色（背景、文字、主要、錯誤……）選擇顏色，而非根據原始色相。這裡的每個調色盤都將十六進位色碼對應到角色，因此主題可以保持可替換、一致且易於存取。先選擇一個角色，然後讀取其十六進位色碼——將十六進位色碼硬編碼到角色應屬的位置，正是日後破壞主題的原因。
導覽
下方的索引和角色契約本身就能回答「該用哪個調色盤」。當任務需要某個參考文件的負載時，才載入該文件——而不是一次載入全部四個。
| 載入 | 時機 |
|---|---|
| references/carbon.md | 建構必須使用 Carbon 的頁面或成品——只讀取此文件；它包含 Carbon 的角色、儀表板套件和兩種模式下的三元組 |
| references/palettes.md | 你需要任何其他調色盤的十六進位色碼——四大領域，淺色 + 深色；填滿/柔和/強調三元組；Dusk、Driftwood 和 Meadow 背後的 12 階色階 |
| references/contrast.md | 驗證 WCAG/APCA 閾值、色盲安全性，或除錯一對失敗的組合 |
| references/build-your-own.md | 沒有庫存調色盤適用，而你正在產生新的色階（OKLCH 配方） |
| references/theory.md | 選擇和諧方案，或證明色彩空間/色階決策的合理性 |
調色盤庫（快速索引）
當某個調色盤是第一個正確的選擇時，會標記為 ⭐；行銷和 TUI 沒有預設值，因為選擇取決於品牌或用戶自己的終端主題。
網頁應用程式 UI — 淺色 + 深色，13 個語義角色 + 每種顏色的三元組
- Carbon ⭐ （預設） — 深石板藍，深色優先。分析儀表板、效能報告和開發工具。內含完整的儀表板套件（A–F 等級標籤、有序階段序列、內聯程式碼色調、成功高亮）。當淺色模式需要手工調校至同等水準時，請改用 Graphite。
- Graphite — 冷石板色 + 藍色。密集的 B2B 儀表板、開發工具；淺色+深色均等的預設值。
- Evergreen — 祖母綠品牌色搭配真正中性的鋅色。清新、自信、非藍色的識別。
- Terracotta — 暖陶土/濃縮咖啡中性色 + 鐵鏽色。編輯、內容平台、寫作工具。
- Bloom — 柔和長春花/紫羅蘭色，深色模式深邃。友善的開發工具，有趣但乾淨的應用程式。
- Teal Slate — 深藍綠色搭配冷石板色，單一暖色強調色。技術報告、SRE / 速率限制儀表板；與單一字型搭配用於圖表。
由 12 階 OKLCH 色階產生，這些色階會與其角色一起提供，以便擴展或重新推導：
- Dusk — 靛藍色主要色，藍綠色強調色，接近中性的冷灰色。專注工具、編輯器、長時間使用的應用程式。
- Driftwood — 深海洋藍主要色搭配暖沙色中性色，陶土色強調色。這個調色盤在深色模式下會將其中性色轉為冷色調。
- Meadow — 柔和鼠尾草綠主要色，古金色強調色，暖骨色中性色。這組中最柔和的；給人寧靜而非自信的感覺。
行銷 / 登陸頁面 — 淺色 + 深色，主視覺漸層
- Sunbloom — 精緻的珊瑚/琥珀暖色調。平易近人的消費者/創作者品牌。
- Tidewater — 藍綠色/鼠尾草綠。金融科技、健康、B2B 信任感。
- Obsidian & Gold — 接近黑色 + 金屬金色。高級、奢華、代理商。
- Paper & Ink — 暖色紙張 + 墨黑色 + 一個陶土色強調色。部落格、長篇文章、作品集。
資料視覺化 — 色盲友善，暖色/冷色大地色系
- 類別型： Lunar Valley ⭐ （預設） · Hearthstead · Vintage Warm · Glass Wall · Okabe-Ito （當 CVD 安全性為硬性要求時使用）
- 順序型： Viridis ⭐ （預設） · Magma · Inferno · Plasma · ColorBrewer Blues · YlOrRd （所有皆為感知均勻）
- 發散型： Console & Window ⭐ （預設） · Alien Sun · Orchard Dusk · Coffee & Coolant — 全部暖色↔冷色，無紅↔綠
終端 / TUI — 16-ANSI + 背景/前景/游標/選取
- Solarized Dark · Nord · Catppuccin Mocha · Catppuccin Latte （唯一的淺色方案） · Dracula · Tokyo Night
→ 完整十六進位色碼表： Carbon 在 references/carbon.md 中，所有其他調色盤在 references/palettes.md 中
語義角色（契約）
UI 調色盤填滿這些角色。將意圖對應到角色，然後將角色對應到十六進位色碼。
| 角色 | 用途 |
|---|---|
background | 應用程式/頁面基礎畫布 |
surface | 卡片、面板、工作表 |
surface-elevated | 浮起表面（彈出視窗、模態框）；在深色模式中，越亮 = 越高 |
border | 分隔線、輸入框邊框、焦點環 |
text-primary | 高強調度前景 |
text-secondary | 淡化標籤、提示、說明文字 |
primary / primary-hover | 品牌操作顏色及其懸停狀態 |
accent | 次要強調色，與主要色不同 |
success / warning / error / info | 語義狀態（按西方慣例為綠色/琥珀色/紅色/藍色） |
每個有顏色的角色需要一個三元組，因為一個十六進位色碼無法完成三項工作。 一個被設計為「坐」在上面的數值，並不會自動在作為「文字」時清晰可讀；而一個純色填滿，在表格密度下作為徽章背景又過於突兀。
| Token | 工作 | Bootstrap 5.3 稱之為 | Material 3 稱之為 |
|---|---|---|---|
{c}-fill + {c}-on-fill | 按鈕、啟用中的晶片 | --bs-{c} + color-contrast() | primary + on-primary |
{c}-subtle + {c}-emphasis | 徽章/提示框背景 + 其標籤 | --bs-{c}-bg-subtle + -text-emphasis | primary-container + on-primary-container |
{c}-subtle-border | 該背景周圍的邊框 | --bs-{c}-border-subtle | — |
link | 作為 surface 上文字的品牌色調 | （在 v6 中拆分） | — |
所有九個 UI 調色盤的現成三元組都在 palettes.md 中，除了 Carbon 的，它在 carbon.md 中。深色模式的填滿是淺色色調，因此它們的標籤是調色盤中最深的中性色，而不是白色。
資料視覺化調色盤改為提供有序的顏色列表（類別型 = 不同的序列；順序型 = 低→高漸層；發散型 = 暖色↔冷色，帶有中性中點）。TUI 方案提供 16 個 ANSI 插槽加上 4 個特殊角色。
核心概念
- 在 OKLCH 中設計，而非 HSL。 OKLCH 是感知均勻的；HSL 的「亮度」會誤導（相同 L 值的藍色看起來比相同 L 值的黃色暗得多），因此即使 HSL 均勻步進也會產生不平滑的色階。
- 和諧： 選擇一個方案（單色 / 類似 / 互補 / 三色組……）並讓一個顏色在飽和度和面積上主導；降低其他顏色的飽和度。
- 色階： 10–12 階，步進亮度均勻，在中間範圍達到峰值色度，並在極端處逐漸減少，使淺色調不會被沖淡，深色調不會混濁。
- 對比度： WCAG AA — 正文字體 ≥ 4.5:1，大字型 & UI/邊框 ≥ 3:1。
- 淺色 vs 深色不是反轉，且 WCAG 2 比率會高估黑色附近的對比度。 兩種失敗模式及其修復方法在下方常見問題中；閾值和 APCA 程序在 references/contrast.md 中。
- 色盲安全性： 除了色相之外，還要使用文字、圖示或位置來編碼意義，因為約 8% 的男性無法僅靠色相來區分。對於發散型資料，使用暖色↔冷色（藍/橙、藍綠/玫瑰紅），而不是紅↔綠。
範例
範例：為 SaaS 儀表板選擇顏色
✅ 正確做法
使用者：「我需要一個管理儀表板的顏色，淺色和深色。」
→ 推薦 Carbon（深石板藍，深色優先，專為密集資料 UI 設計）——預設值；
如果手工調校的淺色模式平衡比儀表板套件更重要，則提供 Graphite。
→ 從 carbon.md 複製其角色→十六進位色碼表（兩種模式）。
→ 依角色套用：background→surface→border→text，主要 CTA 使用 primary，
狀態徽章使用 success/warning/error。確認 background 上的 text-primary ≥ 4.5:1。
❌ 反模式
→ 從 Coolors 調色盤中挑選四種色相並臨時指派：#2b2d42 導覽列、#8d99ae 文字、
#edf2f4 背景、#ef233c 按鈕。深色模式 = 反轉十六進位色碼。
為什麼有效：角色對應的調色盤可以直接放入 CSS 變數，並且在建構時就具有可存取性。臨時版本沒有中性色調、沒有層級、沒有狀態顏色，而且反轉淺色調色盤會產生純黑色表面和沖淡的品牌色調（請參閱常見問題：淺色 vs 深色不是反轉）。
範例：狀態徽章顏色
✅ 正確做法
.badge-error { background: var(--error); color: #fff; } /* 角色，而非硬編碼的紅色 */
❌ 反模式
.badge-error { background: #ff0000; color: #000; } /* 原始色相；#f00 在 #000 上 ≈ 5.2:1 但會產生眩光，
且無法切換主題或深色模式 */
為什麼失敗：硬編碼色相會破壞主題和深色模式，而純紅/純黑會導致光暈效應。
範例：挑選圖表調色盤
✅ 正確做法
類別型序列（≤8）→ Lunar Valley（預設），或當需要 CVD 安全性時使用 Okabe-Ito。
連續低→高 → Viridis（感知均勻，色盲安全）。
具有中點的帶符號資料 → Console & Window（暖色↔冷色，中性中心）。
超過約 8 個類別型顏色後，序列將無法區分——改為匯總為「其他」。
❌ 反模式
十二個類別型序列，使用 UI 調色盤的 success/warning/error/info 角色加上品牌淺色調來著色；
利潤/損失以綠↔紅編碼，且無標籤。
為什麼有效：將資料的結構與正確的調色盤系列匹配，並尊重可區分性限制。反模式重複使用與序列識別相衝突的 UI 狀態角色，超過了約 8 種色相的限制，並且對色盲使用者使用沒有文字或圖示備援的紅↔綠編碼。
常見問題
- 症狀： 品牌色作為正文字體無法閱讀。原因： 飽和的中間色調（琥珀色、珊瑚色、藍綠色）通常在其自身背景上無法達到 4.5:1——填滿顏色和文字顏色是同一色階的不同步驟。修復： 將
fill和link保留為不同的值；將文字步進到更深的顏色直到通過。在此庫中，只有 Evergreen 淺色模式有分歧（#059669在按鈕標籤上達到 4.70:1，但在白色背景上作為連結僅達到 3.77:1，因此其link為#00875b），這就是為什麼這個區分經常被忽略。 - 症狀： 狀態徽章看起來正確，但在表格密度下過於喧賓奪主。原因： 在白色文字後使用純
--error填滿，對於按鈕是正確的，但對於行級徽章來說太突兀了。修復： 使用{c}-subtle背景搭配其配對的{c}-emphasis標籤。在該淺色調上重用狀態色調作為其自身的標籤，通常無法達到 4.5:1——請從 palettes.md（Carbon 的從 carbon.md）中獲取配對值，而不是假設。 - 症狀： 從 12 階色階生成的調色盤仍然無法通過對比度測試。原因： 色階映射不是對比度的保證。Radix 僅保證階梯 11 和 12 相對於階梯 2 的對比度，不保證其他；階梯 9 很少能承載 4.5:1 的按鈕標籤，階梯 8 很少能達到 3:1 的控制邊緣。修復： 針對它們的實際背景來解決這兩個問題。在淺色模式中，使用白色標籤並將填滿加深——針對當前得分較高的標籤進行最佳化，會產生一個通過但看起來很弱的淺色。
- 症狀： 在淺色模式中看起來正確的調色盤，在深色模式中感覺渾濁。原因： 中性色調被選擇一次後繼承使用。在高亮度下讀起來像紙張的暖色調，在低亮度下讀起來像棕色。修復： 每種模式重新決定中性色調和色度；在非常低的色度下轉向冷色調是常見的答案。palettes.md 中的 Driftwood 就是這樣做的（淺色色調 64，深色色調 224）；Meadow 的鼠尾草綠不需要這樣做。
- 症狀： 從 Color Hunt、Coolors 或趨勢文章複製的調色盤無法建構介面。原因： 畫廊調色盤是四種裝飾性色相，沒有中性色階、沒有深色墨色和沒有狀態——在最受歡迎的 30 個 Color Hunt 調色盤中，有 16 個無法用其任何一對顏色承載 4.5:1 的正文字體。修復： 將這些色相作為種子材料，並從中建立色階（build-your own.md）；Dusk、Driftwood 和 Meadow 就是以這種方式製作的。
- 症狀： 次要/淡化文字（「dimmed」、
text-secondary）在設計工具中看起來不錯，但在應用程式中無法通過對比度測試。原因： 元件庫會提供一個預設的淡化文字顏色（例如 Mantine 的dimmed），該顏色是為視覺層級而非對比度調整的——通常落在 ~3.4:1 左右，遠低於 4.5:1 的 AA 標準。修復： 自行挑選並驗證你的text-secondary十六進位色碼對比 contrast.md，而不是繼承庫的預設值，並根據每個主題重新檢查——同一個覆寫值可能在一個主題中通過，但在另一個主題中失敗。也要在有淺色調/浮起的表面（卡片、條紋行）上重新驗證，而不僅僅是平面畫布。 - 症狀： 深色模式「通過 WCAG」，但難以閱讀。原因： WCAG 2 數學計算會高估黑色附近的對比度。修復： 使用 APCA (Lc) 重新檢查深色配對，而不是僅使用 4.5:1 比率。
- 症狀： 深色主題看起來平淡，層級無法閱讀。原因： 純
#000背景 + 相同亮度的表面。修復： 將基礎底色提高到約#0d1117–#1e1e2e，並使每個層級更亮。 - 症狀： 色盲使用者無法閱讀圖表。原因： 紅↔綠編碼或僅基於色相的意義。修復： 切換到暖色↔冷色發散型調色盤，並添加標籤/圖示；對於類別型，使用 Okabe-Ito 安全集合（在 palettes.md 中）。
- 症狀： 即使你的調色盤定義了正確的文字顏色，圖表文字仍然對比度不足。原因： 圖表庫（Recharts、Mantine charts）會將軸/圖例/數值文字渲染為 SVG，並使用其自己的內聯
fill，繞過你的顏色 token。修復： 直接定位庫的文字元素（例如.recharts-wrapper text { fill: var(--text) }）—— CSS 級聯永遠不會到達它。 - 症狀： TUI 顏色在某些終端機上消失。原因： 硬編碼十六進位色碼，或將重要文字放在亮黑色（插槽 8）中。修復： 將意義綁定到 ANSI 插槽 1–6，以便使用者自己的主題可以渲染它，並將插槽 8 僅用於淡化。
- 症狀： 調色盤階梯看起來不平滑/不均勻。原因： 在 HSL/RGB 中步進亮度。修復： 重建