為什麼 HSL 亮度與顏色看起來的亮度不符？

因為 HSL 亮度是最大和最小通道的簡單平均值，而不是人類視覺的模型。hsl(60 100% 50%) 是黃色，hsl(240 100% 50%) 是藍色；兩者都宣稱 50% 亮度，但黃色看起來大約亮六倍。OKLCH 的亮度是感知性的，這就是為什麼相同的 L 值在不同色相下看起來亮度相同。

我實際上需要多少對比度？

內文需要 4.5:1，18pt 或 14pt 粗體文字需要 3:1 以符合 WCAG AA；7:1 符合 AAA。具有意義的介面元件和圖形需要 3:1。低於 3:1 則沒有任何項目通過。

可以。所有目前的瀏覽器都支援它，而且它可以透過 @supports 規則或先前的 hex 宣告乾淨地降級，以支援更舊的瀏覽器。特別是在產生色彩比例時，值得切換，因為 HSL 產生的步驟看起來不均勻。

在 HEX、RGB、HSL、HWB 和 OKLCH 之間轉換，並檢查對比度。

瀏覽器本機執行影像與色彩 824

永和九年歲在癸丑

顏色取色

hex: #3b82f6
rgb: rgb(59 130 246)
hsl: hsl(217.2 91.2% 59.8%)
hwb: hwb(217.2 23.1% 3.5%)
oklch: oklch(62.3% 0.188 259.8)

永和作為白底上的文字3.68:1

永和作為黑底上的文字5.71:1

讀取樣式表中可能包含的任何色彩表示法，並提供所有其他表示法，以及與黑色和白色的對比度。包含 OKLCH，因為這種表示法能讓較亮或較暗的變體看起來確實是同一種顏色——這是 HSL 著名的缺點，因為兩個相同亮度的 HSL 顏色，其視覺亮度可能差異極大。

哪也沒去。本工具完全在你的瀏覽器裡執行：你貼上的文字由頁面處理，不會傳輸到任何伺服器，也不會寫進任何紀錄。

當一次執行消耗點數時，會往你自己的歷史裡儲存一行摘要，方便回頭查找。摘要記錄的是這次執行的形態——大小、數量、你查詢的值——而不是你貼上的內容。

本工具完全免費，不需要登入，也不消耗點數。

為什麼 HSL 亮度與顏色看起來的亮度不符？: 因為 HSL 亮度是最大和最小通道的簡單平均值，而不是人類視覺的模型。hsl(60 100% 50%) 是黃色，hsl(240 100% 50%) 是藍色；兩者都宣稱 50% 亮度，但黃色看起來大約亮六倍。OKLCH 的亮度是感知性的，這就是為什麼相同的 L 值在不同色相下看起來亮度相同。
我實際上需要多少對比度？: 內文需要 4.5:1，18pt 或 14pt 粗體文字需要 3:1 以符合 WCAG AA；7:1 符合 AAA。具有意義的介面元件和圖形需要 3:1。低於 3:1 則沒有任何項目通過。
我可以在生產環境中使用 OKLCH 嗎？: 可以。所有目前的瀏覽器都支援它，而且它可以透過 @supports 規則或先前的 hex 宣告乾淨地降級，以支援更舊的瀏覽器。特別是在產生色彩比例時，值得切換，因為 HSL 產生的步驟看起來不均勻。

本工具是獨立實作，並未打包第三方函式庫。Qix-/color-convert（MIT）在程式碼層面做的是同一件事——如果你需要在自己的程式裡實作它，從那裡開始，而不是呼叫一個網頁。