SKILL.md
唯讀
名稱
oklch-skill
描述
適用於網頁專案的 OKLCH 色彩空間。可將 hex/rgb/hsl 轉換為 oklch、產生調色盤、檢查對比度、處理色域邊界，並搭配 Tailwind v4 設定主題。觸發關鍵字：oklch、色彩轉換、調色盤產生、對比度、色域、display p3、設計 token、色相偏移、彩度、深色模式色彩。
OKLCH 色彩
OKLCH 是一種感知均勻的色彩空間，其中的數值真正代表你以為的意義。CSS 中大多數的色彩問題——壞掉的調色盤、對比度不足、色相偏移——都源於使用了不符合人類視覺的色彩空間。OKLCH 修正了模型，讓工具能正常運作。若要互動式探索，請造訪 oklch.fyi。
快速參考
| 類別 | 使用時機 | 參考文件 |
|---|---|---|
| 轉換 | Hex/rgb/hsl 轉 oklch | color-conversion.md |
| 調色盤 | 產生色階、多色相、深色模式 | palette-generation.md |
| 對比度 | APCA/WCAG 檢查、修正對比度不足 | accessibility-contrast.md |
| 色域與 Tailwind | P3 備援、@theme 色階、色域限制 |
gamut-and-tailwind.md |
為什麼選擇 OKLCH
- 感知均勻。 等量的 L 階梯 = 等量的亮度。
oklch(0.5 ...)在視覺上是中間值。HSL 的lightness: 50%會因色相而有極大差異。 - 穩定的色相。 HSL 的藍色在亮度改變時會偏向紫色。OKLCH 的色相在整個亮度範圍內保持恆定。
- 獨立的彩度。 彩度是色彩鮮豔度的絕對度量，不依賴亮度。HSL 的飽和度則依賴亮度。
- 有限的色域。 並非每個 oklch 值都能對應到可顯示的 sRGB 色彩。特定色相的高彩度值會被裁切——必須具備色域意識。
OKLCH 語法
oklch(L C H)
oklch(L C H / alpha)
| 通道 | 範圍 | 說明 |
|---|---|---|
| L（亮度） | 0–1 | 0 = 黑色，1 = 白色。感知均勻。 |
| C（彩度） | 0–~0.4 | 鮮豔度。0 = 灰色。最大值取決於 L 和 H。 |
| H（色相） | 0–360 | 色相角度（度）。 |
| alpha | 0–1 | 可選的透明度。使用斜線語法。 |
oklch(0.637 0.237 25.331)
oklch(0.8 0.05 200 / 0.5)
格式： L 和 C 使用 3 位小數，H 最多 3 位。去除尾隨的零。將 -0 格式化為 0。瀏覽器支援：Baseline 2023，全球覆蓋率 96% 以上。
關鍵閾值
| 規則 | 數值 |
|---|---|
| 亮/暗邊界 | L > 0.6 = 亮色背景 → 使用深色文字 |
| 亮度差距（亮色背景） | 當背景 L > 0.85 時，前景 L < 0.45 |
| 亮度差距（暗色背景） | 當背景 L < 0.25 時，前景 L > 0.75 |
| 色相偏移閾值 | 調色盤階梯間色相差異 > 10° = 明顯偏移 |
| APCA 一般文字 | |Lc| >= 60 為通過，>= 75 為通過+ |
| WCAG 2 一般文字 | 4.5:1 AA，7:1 AAA |
| 對比度修正 | 僅調整 L——彩度影響可忽略 |
檢視輸出格式
一律以 Markdown 表格呈現色彩變更，包含 Before 和 After 欄位。列出所有被變更的色彩——而非僅一部分。切勿在表格之外以獨立的「Before:」/「After:」行列出發現。
| Before | After |
|---|---|
color: #3b82f6 |
color: oklch(0.623 0.188 259.815) |
| 不同色相使用相同的絕對 C | 使用各色相最大彩度的相同 C% |
| P3 色彩沒有 sRGB 備援 | @media (color-gamut: p3) 包覆 |
這樣能讓回饋易於掃讀且方便 diff。每一列都是開發者可獨立處理的完整變更。
常見錯誤
| 問題 | 修正 |
|---|---|
| 新程式碼中使用 Hex/rgb/hsl 色彩 | 轉換為 oklch() |
| HSL 調色盤階梯有色相偏移 | 使用固定的 oklch 色相重建 |
| 對比度不足（使用 APCA 檢查前景與其背景） | 調整 oklch L 通道，保持 C 和 H |
| 高彩度但未檢查色域 | 限制為 sRGB 中該 L/H 的最大彩度 |
| 不同色相使用相同的絕對 C | 使用相同的 C%（最大值的百分比）以獲得一致的鮮豔度 |
| P3 色彩沒有 sRGB 備援 | 加入 @media (color-gamut: p3) 模式 |
| 深色模式使用手動挑選的色彩 | 透過反轉 L 映射從亮色調色盤推導 |
Tailwind v4 @theme 中使用 Hex |
轉換為 oklch 數值 |
| 使用逗號語法的 Alpha | 使用斜線：oklch(L C H / alpha) |
參考檔案
- color-conversion.md — 支援的格式、轉換範例、大量轉換規則、應保留的內容
- palette-generation.md — 色階慣例、產生演算法、多色相調色盤、深色模式、為何不用 HSL
- accessibility-contrast.md — APCA 和 WCAG 2 閾值、使用 L 修正對比度、亮度差距指南、色相偏移偵測
- gamut-and-tailwind.md — sRGB 與 P3、色域限制、CSS 備援模式、Tailwind v4 @theme 與遷移
