OKLCH 色彩轉換：檢視色域與顏色

在OKLCH、十六進位制、RGB 和 HSL 之間進行轉換，並構建即使在色調移動時保持亮度和色度也能保持感知的漸進。 sRGB 之外的顏色是透過減少色度來對映的，而不是透過剪下來對映 - 區別在於你的紫色是否保持紫色。

十六進位、rgb()、hsl() 或 oklch()。 

    


    

    

      
為什麼OKLCH中的輕盈感意味著什麼

      
在 HSL 中，改變固定亮度下的色調會改變顏色看起來的亮度：50% 的黃色讀起來比 50% 的藍色明亮得多，這就是為什麼無論您如何仔細地間隔 HSL 漸變，它們看起來都不均勻。 OKLab 適合感知資料，因此它的亮度軸可以追蹤眼睛報告的內容。按住 L 和 C 並旋轉 H，每個樣本都具有相同的視覺重量 - 這就是在這裡而不是在 HSL 中構建調色盤的全部原因。

      
色域對映是重要的部分

      
大量 OKLCH 值沒有 sRGB 等效項，簡單的修復方法是將每個通道限制在範圍內。這明顯地改變了色調：鮮豔的紫色逐個通道向藍色漂移。在保持亮度和色調的同時降低色度可以保持顏色本身的可識別性，並且只會消除螢幕無法顯示的飽和度。此頁面使用CSS Color 4 中的演演演算法 - 在色度上二等分，並在與縮小結果的差異剛好可察覺的範圍內接受裁剪結果。

      
對照參考進行檢查

      
將轉換與四千種顏色的網格上的獨立實現進行比較：亮度和色度在百萬分之一內一致，色調在萬分之一度內一致，並且每個十六進位制值都精確地往返。以同樣的方式針對 480 種色域外顏色檢查色域對映，其中最糟糕的顏色落在 255 種色域內的 1 部分內。閱讀OKLCH的觀眾會注意到一個錯誤的矩陣，因此似乎值得說明它是如何驗證的。

      
使用輸出

      
自訂屬性寫在 OKLCH 中，並在註釋中在它們旁邊新增十六進位制，因為這是您想要檢視的對：您的構建附帶的值和您可以貼上到其他任何內容中的值。目前使用的每個瀏覽器都理解 OKLCH 語法；如果您仍然支援不支援的人，評論就是您的後備力量。


      
常見問題解答

      

        
為什麼色度上限為 0.4？
因為 sRGB 中沒有任何東西可以接近它。最飽和的 sRGB 顏色是藍色，約為 0.313，滑桿會超過該值，因此您可以看到落在外面的內容以及它如何對映回來。

        
這裡有什麼明顯的差異？
OKLab 中的 delta E 為 0.02，這是 CSS Color 4 所使用的閾值。在其之下，剪裁和色度減少是無法區分的，因此該演演演算法採用剪裁的顏色並保留額外的色度。

        
它可以處理 P3 或 Rec2020 嗎？
還沒有。這裡的所有內容都以 sRGB 為目標，這就是色域警告的含義。更廣泛的色域需要自己的原色和第二組矩陣。

        
這些是否有送到任何地方？
否。轉換在此頁面中執行。

      

      
由 GO AI 團隊建構。 CSS Clip() 計算器 · WCAG 對比檢查器 · 所有免費工具