什麼是 OKLCH？
OKLCH 是 OKLAB 色彩空間的圓柱形表示，由 Björn Ottosson 於 2020 年設計。它代表 OK 亮度、色度和色相 - 與傳統的 RGB 或 HSL 系統相比，提供了更直觀的顏色處理方式。
與面向裝置的 RGB 或具有感知缺陷的 HSL 不同，OKLCH 建立在人類視覺原理之上。它確保相同的數值變化產生相同的感知變化，使其成為創建和諧配色方案和無障礙設計的理想選擇。
OKLCH 顏色選擇器和轉換器
理解 OKLCH：網頁顏色的未來
關於這個正在革新網頁設計的感知均勻色彩空間的全面指南
為什麼選擇 OKLCH 而不是 RGB 和 HSL？
RGB 的局限性
- • 裝置相關的值
- • 非直觀的顏色混合
- • 難以創建變體
- • 無障礙計算效果差
HSL 的缺陷
- • 虛假的感知均勻性
- • 亮度隨色相變化
- • 飽和度行為不可預測
- • 僅限於 sRGB 色域
OKLCH 的優勢
- • 真正的感知均勻性
- • 跨色相的一致亮度
- • 可預測的顏色關係
- • 廣色域支援（P3、Rec2020）
感知均勻性的力量
感知均勻性意味著相同數值的變化無論起始顏色如何都會產生相似的感知變化。這對於以下方面至關重要：
設計一致性
創建保持相同感知亮度的顏色變體，對於懸停狀態、禁用狀態和主題變化至關重要。
無障礙性
透過使用真實的感知亮度值準確預測對比度並確保符合 WCAG 標準。
超越 sRGB：廣色域顏色
現代顯示器支援遠超傳統 sRGB 的色域。OKLCH 無縫處理這些擴展的色彩空間：
sRGB
所有顯示器支援的標準色域
P3
25% 更多顏色，常見於蘋果裝置
Rec2020
面向未來的 HDR 顯示器色域
使用 OKLCH，您可以指定充分利用現代顯示器的顏色，同時為標準螢幕提供自動回退。
OKLCH 實踐
創建調色板
/* 基礎顏色 */
--primary: oklch(0.6 0.2 250);
/* 較淺變體 - 只需增加 L */
--primary-light: oklch(0.8 0.2 250);
/* 較深變體 - 只需減少 L */
--primary-dark: oklch(0.4 0.2 250);
/* 互補色 - 色相加 180 */
--secondary: oklch(0.6 0.2 70);無障礙優先設計
/* 確保 WCAG AA 對比度 */
--text-on-light: oklch(0.3 0 0); /* L=0.3 用於深色文字 */
--text-on-dark: oklch(0.9 0 0); /* L=0.9 用於淺色文字 */
/* 一致的感知亮度 */
--success: oklch(0.7 0.15 140); /* 綠色 */
--warning: oklch(0.7 0.15 90); /* 黃色 */
--error: oklch(0.7 0.15 30); /* 紅色 */瀏覽器支援與遷移
目前支援
OKLCH 在所有現代瀏覽器中都得到支援：
- • Chrome 111+（2023 年 3 月）
- • Firefox 113+（2023 年 5 月）
- • Safari 15.4+（2022 年 3 月）
- • Edge 111+（2023 年 3 月）
遷移策略
/* 為舊瀏覽器提供回退 */
.element {
/* 舊瀏覽器的回退 */
background-color: rgb(0, 128, 255);
/* 現代瀏覽器將使用這個 */
background-color: oklch(0.65 0.2 240);
}
/* 或使用 @supports */
@supports (color: oklch(0 0 0)) {
.element {
color: oklch(0.7 0.15 180);
}
}未來是感知均勻的
OKLCH 代表了我們如何思考網頁顏色的範式轉變。透過與人類感知而非裝置能力對齊，它實現了：
- ✓ 更直觀的顏色選擇和操作
- ✓ 透過可預測的亮度實現更好的無障礙性
- ✓ 與顯示技術同步發展的面向未來的設計
- ✓ 跨不同色相的一致顏色關係
立即使用上方的顏色選擇器開始使用 OKLCH，體驗感知均勻性在您的設計中帶來的差異。
常見問題
OKLCH：常見問題解答
了解更多關於 OKLCH 以及如何有效使用此顏色選擇器的資訊。
1
什麼是 OKLCH，為什麼應該使用它？
OKLCH 是一種感知均勻的色彩空間，使建立和諧的調色板變得更容易。與 RGB 或 HSL 不同，在 OKLCH 中調整亮度可以在所有色相中保持一致的感知亮度，使其成為設計系統和無障礙性的理想選擇。
2
什麼是 P3 和 Rec2020 色彩空間？
P3 和 Rec2020 是可以顯示比標準 sRGB 更鮮豔顏色的廣色域。P3 通常在現代 Apple 裝置和高階顯示器上支援，而 Rec2020 為未來的顯示器提供更廣泛的顏色範圍。
3
為什麼某些顏色顯示為"不可用"？
當您選擇高飽和度的顏色時，它們可能超出顯示器可以顯示的顏色範圍。選擇器會顯示一個回退顏色，在您顯示器的能力範圍內近似目標顏色。
4
如何在 CSS 中使用 OKLCH 顏色？
您可以在現代瀏覽器中直接使用 OKLCH 顏色，語法為：color: oklch(0.7 0.1 180)。為了支援舊瀏覽器，請始終提供 RGB 或 HEX 格式的回退顏色。
5
色度和飽和度有什麼區別？
OKLCH 中的色度以感知均勻的方式表示顏色的豐富度或強度。與 HSL 飽和度不同，色度值在不同亮度級別保持一致，使顏色操作更可預測。
6
我可以儲存或收藏特定顏色嗎？
是的！每次顏色選擇都會自動更新 URL 雜湊。您可以收藏任何顏色或與他人分享 URL 以載入完全相同的顏色配置。
7
"回退"按鈕有什麼作用？
當您選擇超出顯示器能力的顏色時，選擇器會顯示目標顏色（如果您的顯示器支援）和可顯示的回退版本。"回退"按鈕讓您使用所選顏色的可顯示近似值。
8
為什麼有時會有兩個顏色預覽區塊？
當您選擇 sRGB 色彩空間之外的顏色時，選擇器會顯示兩個預覽：左側顯示實際顏色（如果您的顯示器支援），右側顯示將在標準顯示器上使用的 sRGB 回退。
9
如何處理透明顏色？
使用 Alpha 滑桿控制透明度。透明度通道顯示在棋盤格背景圖案上，透明度值會自動包含在支援它的顏色格式中（如 rgba 和帶透明度的 oklch）。
10
我可以直接輸入顏色值而不是使用滑桿嗎？
當然可以！您可以在格式輸入欄位中輸入或貼上任何格式（OKLCH、HEX、RGB 或 HSL）的顏色。選擇器會自動轉換並更新所有值。您甚至可以貼上 CSS 顏色宣告，如 'color: #ff0000;'。
11
如何知道我的顯示器是否支援 P3 或 Rec2020？
選擇器會自動偵測您顯示器的能力。如果您看到"此顯示器不支援 P3"或類似訊息，您的顯示器不支援這些更廣的色域。大多數現代 Apple 裝置和高階顯示器支援 P3。
12
建立無障礙調色板的最佳工作流程是什麼？
首先設定所需的色相，然後調整亮度以滿足 WCAG 對比度要求。OKLCH 的感知均勻性意味著具有相同亮度值的顏色將具有相似的感知亮度，使建立無障礙的顏色組合變得更容易。