色彩調色盤設計師
好看且通過對比度檢查的顏色來自同一個流程：先為氛圍選擇色相，再用數學修正明度。和諧色輪、60-30-10 法則與色彩心理學圖表只是沒有可用性證據支持的起始啟發法。真正經得起考驗的是：對比度、克制（僅一個行動色相），以及一個能從周圍環境突顯出來的強調色。為這些目標而設計。
所有數字來自 scripts/palette.mjs（無相依性 Node.js 腳本）。請直接執行它，而不是手動估算比例或 OKLCH 數值；手算對比度經常出錯，其誤差足以影響結果（此技能所依據的研究中，有幾個數值偏差 0.05 至 0.15）。
S=<skill-dir>/scripts/palette.mjs
node $S contrast '#767676' '#ffffff' # 4.54:1, 分級, APCA Lc
node $S oklch '#3F6B4E' # 精確的 OKLCH
node $S solve '#C0643F' '#FFFFFF' 4.5 darker # 僅調整 L 值直到通過
node $S ramp 155 0.12 # 50-950 OKLCH 漸變
node $S generate --hue 155 --chroma 0.07 --neutral-hue 95 --accent-offset -110 --format report
node $S generate ... --format css # 也支援: css-light-dark | json | dtcg
node $S audit sage-wellness # 一個精選調色盤 ID 或任何 roles.json 檔案
node $S presets # 區域分割與狀態混合預設
node $S ratio 70 25 5 --preset calm # 驗證區域分割 (佔可見區域百分比)
node $S states sage-wellness --css # 已解決的 hover/active/disabled/tint 混合 + 檢查
node $S dark midnight-terminal # 深色模式規則 D1-D11 (加上 --light <id|file>, --oled)
node $S cvd '#0072B2' '#D55E00' '#009E73' # 色盲分離
audit、generate、dark、states 和 ratio 在遇到失敗的顏色配對或 FAIL 規則時會回傳非零值，請在向使用者顯示任何內容之前，將它們用作閘門。對於深色模式，generate 和 audit 會自動執行深色規則。
工作流程：從簡要描述到已驗證調色盤
- 解析簡要描述。 品牌色、氛圍詞彙、產業、目標受眾（年齡、視力狀況）、模式（淺色、深色或兩者）、遵循標準（預設為 AA；健康、政府、年長受眾需使用 AAA 主體文字）。如果使用者只給出了一種感覺，請從下面的決策表中選擇一個色相，並用一句話說明假設，而不是提問。
- 選擇策略。 預設為帶色調的中性色 + 一個主色（+ 可選一個強調色）。單色加上語意色是最安全的做法。只有在 CTA 需要脫穎而出時才使用互補色（隔離效應）。三色和四色組合屬於圖表和插圖範疇，很少用於 UI 介面。
- 錨定色相與彩度。 若有品牌色 HEX 值，執行
oklch並保留其色相。將彩度上限設為：自然/健康約 0.12，活潑/科技為 0.20-0.26。若無品牌色，請選擇一個在同類別中與明顯競爭對手區別開來的色相。 - 生成。
generate會為每種模式建立中性色、主色、強調色和語意角色，並自動對明度進行求解以滿足對比度目標。若手動建立調色盤，請使用ramp建立漸變並將步驟對應到角色（見下方表格）。 - 使用
audit驗證每一組顏色配對。 若失敗，僅透過solve調整明度，切勿改變色相；若顏色超出 sRGB 色域則降低彩度。在 15 個精選調色盤中，所有失敗都發生在中明度、高彩度的強調色上（OKLCH L 約 0.60-0.77）：對白色文字來說太亮、對深色文字來說太暗、或對 3:1 標準來說離白色太近。修復方式：將明度調暗至 L <= 0.55 並使用白色文字、將明度調亮至 L >= 0.72 並使用深色文字，或將其保留為裝飾性並加上邊框。 - 使用
cvd進行色盲檢查。 如果主色、成功和錯誤狀態的顏色在任何模擬下合併（dE_OK < 0.10），請透過明度將它們分開，並同時使用圖示和標籤，因為單靠色相無法傳達意義（WCAG 1.4.1）。 - APCA 僅供參考。 WCAG 3 尚未確定對比度演算法（2026 年 9 月的工作草案表示仍在待定中），因此 WCAG 2.2 決定通過/失敗。將 APCA Lc 作為警告報告：主體文字低於 |Lc| 75 會顯得纖細（在深色模式中很常見）；低於 15 則幾乎看不見。
- 使用
states定義狀態，不要手動進行。 Hover 和 active 的百分比取決於調色盤：在我們測量的 45 個調色盤/預設組合中，flat 預設百分比導致至少一個狀態步驟的 dL 低於 0.03（幾乎看不見）的狀況有 37 個，僅 hover 步驟就有 26 個。node $S states <palette> --preset standard --css會求解混合百分比和方向（朝向文字/背景中能保持 on-primary 可讀性的一方），檢查每個狀態的對比度，並輸出color-mix(in oklab, ...)變數；generate --format css --states standard會將它們加入每個模式。停用狀態：向背景混合並加上非色彩提示。焦點狀態：2px 環、偏移 2px、與背景的對比度 >= 3:1。已選取和已訪問狀態需要非色彩提示。 - 選擇比例（見下方「百分比規則」段落），並在交付說明中說明使用的預設。
- 輸出角色表格（HEX + 精確 OKLCH）、通過/失敗表格、CSS 自訂屬性，以及可選的 Tailwind v4
@theme或 DTCG JSON。將理由標註為慣例或證據（參見references/evidence-and-conventions.md），這樣生成的文字就不會重複色彩心理學的民間傳說。 - 展示它。 提供或建立示範頁面（見下方），讓使用者能根據真實佈局而非色票網格來評估調色盤。
角色合約
每個調色盤都為每個支援的模式定義了以下角色。元件應使用角色，而非原始 HEX 值。
| 角色 | 用途 | 最低標準 |
|---|---|---|
bg, surface, surface-2 | 畫布、卡片、浮起面板 | 可區分 (OKLCH dL >= ~0.03) |
border | 裝飾性分隔線 | 無 |
border-strong | 輸入框外框、控制項 | 3:1 對比於背景 (SC 1.4.11) |
text | 主體文字 | 4.5:1 對比於背景和表面 (目標 7+) |
text-muted | 次要文字 | 4.5:1 對比於背景和表面 |
primary / on-primary | 主要行動按鈕填充 / 其上的文字 | 填充 3:1 對比於背景，連結文字 4.5:1；填充上的文字 4.5:1 |
accent / on-accent | 可選的第二色相 | 若承載意義則與 primary 相同 |
success warning error info | 狀態文字與圖示 | 4.5:1 對比於背景；絕不能僅用顏色 |
focus-ring | 鍵盤焦點 | 3:1 對比於相鄰顏色 |
階梯到角色對應（50-950 階梯）：淺色模式背景為 50 或白色、表面為白色/50、surface-2 為 100、邊框為 200、border-strong 為 500、文字為 900-950、text-muted 為 600、primary 為 600-700、on-primary 為白色、焦點為 primary-600。深色模式：背景為 950（或 900）、表面為 900、surface-2 為 800、邊框為 800、border-strong 為 600、文字為 50-100、text-muted 為 400、primary 為 300-400、on-primary 為 950、焦點為 primary-300。將此對應視為初步猜測，並交由 audit 決定。
嚴格規則 (WCAG 2.2 AA，除非要求 AAA)
- 文字 4.5:1；大型文字 (>= 24px，或 >= 18.66px 粗體) 3:1；UI 元件和有意義的圖形 3:1 (SC 1.4.11)；AAA 標準為文字 7:1，大型文字 4.5:1。
- 裝飾性邊框可以很淡，但作為欄位唯一提示的輸入框外框必須達到 3:1。1.3:1 的「優雅」輸入框邊框是失敗的。
- 顏色絕不能單獨承載意義。為主體連結加上底線，或使其與周圍文字的對比度達到 3:1，並加上 hover/焦點提示；錯誤訊息需附帶圖示和文字；圖表序列需使用直接標籤或形狀。
- 有色背景會改變計算結果。針對白色背景調整的語意色在暖色紙張背景上會降至約 4.4:1；請在真實背景上執行
audit，而非白色背景。 - 漸層和照片上的對比度必須在最差的位置（最亮和最暗區域）仍然保持，否則需加上遮罩。
詳細資訊、公式、色盲安全組合（Okabe-Ito）和 APCA 閾值請參閱：references/accessibility.md。
在 OKLCH 中工作
- 使用
oklch(L C H)作為唯一真實來源。L是感知明度（0-1），因此 L 值相等的顏色看起來確實一樣亮；在 HSL 中，50% 黃色和 50% 藍色的感知明度差異極大。在 OKLCH 中旋轉色相可保持明度一致，這也是和諧偏移能在 OKLCH 中生效而在 HSL 中則否的原因。 - 使用非常低的彩度值（約 0.005-0.015 靠近白色，0.01-0.045 在深色中）以品牌色相為中性色上色。暖色中性色（色相 60-100）適合健康、食品、編輯；冷色中性色（色相 240-270）適合 SaaS、金融、開發工具。避免在有色中性色旁邊使用純灰色。
- 階梯目標：針對 50-950 階梯，L 值依序為 0.985, 0.967, 0.928, 0.872, 0.707, 0.554, 0.446, 0.372, 0.279, 0.208, 0.129，彩度在兩端逐漸減少。色域對應應透過降低彩度而非裁剪來實現；瀏覽器的裁剪方式很粗糙。
- 漸層：使用
in oklab或in oklch來插值，以避免灰濛濛的中間點；避免使用接近零彩度的全視窗深色漸層（會產生條帶），或加入細微噪點。 - 支援（2026 年末）：
oklch()自 2023 年成為 Baseline；color-mix()自 2025 年 11 月起廣泛可用；相對顏色語法支援 Chrome 122+、Firefox 128+、Safari 18+；light-dark()將於 2026 年 11 月 13 日達到廣泛可用。作為預設輸出，請產出帶有prefers-color-scheme和[data-theme]覆寫的純 CSS 自訂屬性；並提供light-dark()作為精簡替代方案。在相對顏色語法中，l的範圍是 0-1。
決策表：從簡要描述到策略
| 簡要描述訊號 | 中性色 | 主色 | 強調色 | 模式 | 目標 |
|---|---|---|---|---|---|
| 健康、有機、水療、茶 | 暖色，H 70-100，C 0.008-0.02 | 鼠尾草/苔蘚/墨綠，C 0.05-0.10，L ~0.50 | 類似色或大地色互補（陶土、黏土） | 淺色 | AA，主體文字 7:1 為佳 |
| 電子商務 | 中性/暖色，C <= 0.01 | 品牌色 | 隔離的 CTA 色相，在別處不使用 | 淺色 | AA |
| SaaS / B2B | 冷色，H 250-270，C 0.01-0.04 | 藍色/靛色/紫色 | 單色 + 語意色 | 淺色 + 深色 | AA |
| 開發工具 | 冷色或純灰色 | 藍色/紫色/綠色，深色 L 0.70-0.80 | 單色；語法顏色僅限於程式碼中 | 先深色 + 淺色 | AA，檢查 APCA |
| 代理商 / 作品集 | 米白紙色或近黑色 | 黑色/白色 | 一個電光強調色，如果無法達到 3:1 則加上邊框 | 任一 | AA |
| 金融 | 冷色海軍藍 | 海軍藍/藍色 | 盈虧使用 +/- 和箭頭 | 淺色 (+ 深色) | AA，數字需 AAA |
| 健康 | 冷色中性色 | 墨綠/藍色 | 平靜的綠色 | 淺色 | AAA 主體文字 |
| 兒童 / 創作者 | 暖色奶油色 | 飽和的紫色/藍色 | 三色，每種 <= 10% 面積 | 淺色 | AA |
起點：references/palettes.md（15 個經驗證的調色盤，包含 CSS、OKLCH 和通過/失敗表格）。選擇最接近的一個，調整色相和彩度，然後重新執行 audit。
百分比規則與預設
區域分割是面積預算，而非定律：60-30-10 是室內設計慣例，其確切數字背後並無可用性研究，但較小的強調色比例能保護此處唯一一個有研究支持的效果（CTA 只有在其色相罕見時才能脫穎而出）。份額是可見背景區域的百分比（文字墨水不計入）。使用 ratio 檢查分割；使用 scripts/measure-area.js 測量真實頁面，而不是靠猜測。
| 預設值 | 分割比 n-s-a | 用途 |
|---|---|---|
classic | 60-30-10 | 電子商務和 SaaS 行銷，通用預設 |
calm | 70-25-5 | 健康、金融、編輯 |
dense-app | 80-17-3 | 儀表板、管理後台、開發工具（淺色或深色） |
product-first | 80-15-5 | 照片承載色彩的目錄；一個孤立的 CTA 色相 |
editorial | 70-27-3 | 粗獷/編輯：邊框和文字承擔視覺工作 |
dark-showcase | 70-22-8 | 深色作品集/代理商，搭配一個鮮明的強調色 |
bold-brand | 50-30-20 | 創作者、活動、兒童：強調色可能主導 |
規則：份額總和必須為 100（否則 FAIL）；中性色為最大份額，需 >= 45；強調色保持在預設範圍內（飽和漸層和品牌覆蓋層計入強調色）；主色佔強調色面積的 >= 70%，以確保一個行動色相主導；語意色在靜態時 <= 2%；深色主題保持中性色 >= 70。狀態預設（subtle 8/14/50、standard 12/20/60、strong 16/26/70 作為 hover/active/disabled 的最低百分比，tint 為 8/10/14）由 states 根據每個調色盤進行提升，直到步驟可見。範圍、規則 A1-A7 和 S1-S6、方向邏輯和測量程式碼片段：references/proportions-and-states.md。
深色模式
深色主題是第二個調色盤，絕非反相。引擎會強制執行可測量的規則（node $S dark ...，generate 和 audit 也會執行）；其餘為需要手動應用的實作規則。完整表格與閾值和修復方式：references/dark-mode-rules.md。
已測量（FAIL 會阻止；WARN 需要說明原因）：
- D1 背景非純黑：OKLCH L 0.13-0.24（僅在宣告的 OLED 變體中才使用真正的
#000）。 - D2 文字非純白：L 0.88-0.95。D3 文字/背景比例 <= 17:1。
- D4 透過明度提升層次：background < surface < surface-2，每個階梯約 +0.04 L；陰影在深色主題上不會產生層次感。
- D5 中性色帶有色彩，背景彩度 <= 0.045。
- D6 主色要么是淺色填充（L >= 0.70）搭配深色 on-primary，要么是深色填充（L <= 0.58）搭配白色 on-primary；0.58-0.68 是死區。填充需在背景和表面上達到 3:1。
- D7 相對於淺色主題：同一色相（相差在 10 度以內）、更亮、彩度不更高（降低 10-30%）。
- D8 狀態顏色針對深色重新調整：在背景和浮起表面上達到 4.5:1，並附帶圖示和文字。
- D9 border-strong 需 3:1；裝飾性邊框仍然可見（dL >= 0.05）。D11 焦點環需 3:1。
- D10 APCA 建議：文字 |Lc| >= 75，次要文字 >= 45（目標 60）；深色極性會暴露 WCAG 2 通過但實際上很纖細的文字。
手動規則：切勿使用 filter: invert（N1）；hover 時變亮而非變暗（N3）；不使用透明文字（N4）；調暗明亮的照片並提供淺色/單色 Logo 變體（N5）；避免使用小而細的字體（N6）；設定 color-scheme 和每個 scheme 的 theme-color（N8）；遵循作業系統提供三態切換，且不閃爍（N9）；在深色表面上重新檢查圖表顏色（N10）。對於大多數正常視力的使用者來說，淺色模式閱讀效果更好，而深色模式有助於某些低視力使用者，因此請同時提供兩者。參考深色調色盤和 Token 架構：references/dark-mode-and-tokens.md。
應避免的反模式
三個或更多飽和色相出現在介面中；CTA 色相同時用於標題、圖示和徽章；飽和互補色具有相同的 L 值（邊緣會產生震動）；在彩色背景上使用灰色文字（應使用背景色相的調整後 L 值）；低於 4.5:1 的淺灰搭米白「極簡」文字；中 L 值的強調色搭配白色文字；outline: none 且無替代方案；hover 和 active 狀態僅有微小色相差異（應改變 L 0.05-0.10）；停用狀態看起來仍處於啟用狀態；在深色模式中未經修改地重複使用相同的飽和品牌色；