什麼是 OKLCH？為何要用它取代 HEX 或 HSL？

OKLCH（亮度、彩度、色相）是基於 Oklab 模型的感知均勻色彩空間。與 HEX 或 HSL 不同，OKLCH 中相同的數值變化會產生相同的感知差異。這使它非常適合設計無障礙色彩調色盤、建立流暢漸層，以及產生一致的 Tailwind v4 色階，讓設計師能夠更精確地掌控色彩呈現。

如何將 HEX 轉換為 OKLCH？

將您的 HEX 值（例如 #3b82f6）貼入 HEX 輸入欄位，OKLCH 欄位便會立即更新為對應的 oklch(0.6 0.18 250) 符號。所有其他格式——OKLab、RGB 和 HSL——也會同時同步更新，方便您在各種格式間切換使用。

「超出 sRGB 色域」是什麼意思？顏色會怎麼處理？

某些 OKLCH 顏色——尤其是高彩度值——超出了大多數顯示器使用的 sRGB 色彩空間範圍。發生這種情況時，工具會套用 CSS Color 4 toGamut 演算法，找出最接近的可顯示 sRGB 顏色。畫面上會出現琥珀色警告橫幅，同時顯示原始超出色域的值及對應後的結果，讓您清楚了解色彩的變化。

Tailwind v4 OKLCH 調色盤產生器如何運作？

產生器使用 Tailwind v4 官方亮度排程（50=0.971、100=0.945，直至 950=0.238），套用於目前的色相與彩度。它會產生從淺到深共 11 個色階，並以 @theme { --color-brand-50: oklch(...); } 程式碼區塊格式匯出，可直接貼入您的 CSS 中使用，大幅簡化設計系統的建立流程。

為何 OKLCH 插值在漸層上的效果比 HSL 更好？

HSL 在圓柱座標系統中插值，這與人類視覺感知不符，常在漸層中段產生灰色坑洞或意外的色相偏移。OKLCH 在感知均勻的 Oklab 空間中插值，因此亮度和彩度的過渡更加平滑，不會產生意外的色彩偏差，視覺效果更加自然且一致。

這個 OKLCH 轉換器是免費且私密的嗎？

是的。本工具完全免費，使用 culori 函式庫在瀏覽器中本機運行。您的任何色彩值都不會上傳至伺服器，所有計算均在您的裝置上完成，保障您的隱私與資料安全。

CSS Color 4 的 OKLCH 語法是否所有瀏覽器都支援？

OKLCH 色彩語法（oklch()）自 2023 年起已獲所有主流瀏覽器支援，包含 Chrome 111+、Firefox 113+、Safari 15.4+ 及 Edge 111+。若需支援舊版瀏覽器，請使用本轉換器所提供的 HEX 或 RGB 備用值作為後備方案。

色彩工具

OKLCH 色彩轉換器 – CSS Color 4、Tailwind v4 調色盤產生器

免費 OKLCH 色彩轉換器，支援 OKLCH、OKLab、RGB、HSL 與 HEX 即時同步。包含 L/C/H/alpha 滑桿、CSS Color 4 色域對應及 Tailwind v4 調色盤匯出。

OKLCH（亮度、彩度、色相）是建構於 Oklab 模型之上的感知均勻色彩空間，已正式納入 CSS Color Level 4 標準。與 RGB 或 HSL 不同，OKLCH 在不同色相間保持一致的感知亮度，非常適合用於無障礙色彩系統、Tailwind v4 調色盤及流暢漸層。

如何使用 OKLCH 色彩轉換器

1
輸入色彩值
以任何支援格式輸入或貼上色彩值：oklch(0.6 0.18 250)、#3b82f6、rgb(59, 130, 246)、hsl(217deg 91% 60%) 或 oklab(0.6 -0.056 -0.169)。工具會立即同步所有其他格式。
2
使用 L/C/H/Alpha 滑桿微調
拖曳亮度（L）、彩度（C）、色相（H）或 Alpha 滑桿。彩度滑桿上會顯示 sRGB 色域邊界標記，讓您隨時掌握顏色是否超出標準顯示範圍。
3
若出現色域警告請確認
若您的 OKLCH 色彩超出 sRGB 色域，將顯示琥珀色警告橫幅，呈現原始值及用於顯示的 CSS Color 4 toGamut 對應結果。
4
產生 Tailwind v4 調色盤
Tailwind v4 OKLCH 調色盤區段會依照官方 Tailwind 亮度排程，自動為目前色相產生 50–950 色階。點擊複製即可將 @theme 區塊直接貼入您的 CSS 檔案。

參考資料

W3C CSS Color Level 4 – oklch()
定義 OKLCH 色彩符號與色域對應演算法的 W3C 規格文件。
Culori – JavaScript 色彩函式庫
支援本工具 OKLCH 轉換、toGamut 對應及感知插值的開源函式庫。
Evil Martians – CSS 中的 OKLCH：為何放棄 RGB 和 HSL？
深入說明 OKLCH 相對於 RGB 和 HSL 在現代色彩工作上優勢的完整指南。
Tailwind CSS v4 – 預設調色盤
Tailwind 官方色彩調色盤文件，包含本調色盤產生器所使用的 OKLCH 亮度值。

常見問題

什麼是 OKLCH？為何要用它取代 HEX 或 HSL？: OKLCH（亮度、彩度、色相）是基於 Oklab 模型的感知均勻色彩空間。與 HEX 或 HSL 不同，OKLCH 中相同的數值變化會產生相同的感知差異。這使它非常適合設計無障礙色彩調色盤、建立流暢漸層，以及產生一致的 Tailwind v4 色階，讓設計師能夠更精確地掌控色彩呈現。
如何將 HEX 轉換為 OKLCH？: 將您的 HEX 值（例如 #3b82f6）貼入 HEX 輸入欄位，OKLCH 欄位便會立即更新為對應的 oklch(0.6 0.18 250) 符號。所有其他格式——OKLab、RGB 和 HSL——也會同時同步更新，方便您在各種格式間切換使用。
「超出 sRGB 色域」是什麼意思？顏色會怎麼處理？: 某些 OKLCH 顏色——尤其是高彩度值——超出了大多數顯示器使用的 sRGB 色彩空間範圍。發生這種情況時，工具會套用 CSS Color 4 toGamut 演算法，找出最接近的可顯示 sRGB 顏色。畫面上會出現琥珀色警告橫幅，同時顯示原始超出色域的值及對應後的結果，讓您清楚了解色彩的變化。
Tailwind v4 OKLCH 調色盤產生器如何運作？: 產生器使用 Tailwind v4 官方亮度排程（50=0.971、100=0.945，直至 950=0.238），套用於目前的色相與彩度。它會產生從淺到深共 11 個色階，並以 @theme { --color-brand-50: oklch(...); } 程式碼區塊格式匯出，可直接貼入您的 CSS 中使用，大幅簡化設計系統的建立流程。
為何 OKLCH 插值在漸層上的效果比 HSL 更好？: HSL 在圓柱座標系統中插值，這與人類視覺感知不符，常在漸層中段產生灰色坑洞或意外的色相偏移。OKLCH 在感知均勻的 Oklab 空間中插值，因此亮度和彩度的過渡更加平滑，不會產生意外的色彩偏差，視覺效果更加自然且一致。
這個 OKLCH 轉換器是免費且私密的嗎？: 是的。本工具完全免費，使用 culori 函式庫在瀏覽器中本機運行。您的任何色彩值都不會上傳至伺服器，所有計算均在您的裝置上完成，保障您的隱私與資料安全。
CSS Color 4 的 OKLCH 語法是否所有瀏覽器都支援？: OKLCH 色彩語法（oklch()）自 2023 年起已獲所有主流瀏覽器支援，包含 Chrome 111+、Firefox 113+、Safari 15.4+ 及 Edge 111+。若需支援舊版瀏覽器，請使用本轉換器所提供的 HEX 或 RGB 備用值作為後備方案。

如何使用 OKLCH 色彩轉換器

參考資料

相關工具

常見問題