色彩工具

用於選取色彩與在不同格式之間轉換的工具。所有處理都在您的瀏覽器中完成。

選色、轉換與檢查

輸入 HEX、RGB、HSL、HSV 或 OKLCH 色彩值，即可查看同一色彩的所有支援格式。你可以用視覺控制調整色相、飽和度、亮度與透明度，再複製 CSS、設計軟體或樣式指南所需的精確表示法。

對比度面板會依 WCAG 比率檢查色彩搭配白色與黑色時的可讀性，並標示一般文字或大型文字是否通過。產生的明度色階可把單一選色延伸成一致的介面調色盤。

Hex 與 rgb() 是螢幕直接驅動的通道值。hsl() 與 hsv() 把同樣的資訊重新排列成色相、飽和度與亮度（或明度），當你要為某個顏色建立變化版本、而不是單純挑一個顏色時，會更好推想。oklch() 則以一個為符合人類感知而設計的色彩空間來描述同一個顏色。

在 sRGB 色域內，這些格式之間互相轉換不會遺失任何資訊，所以該用哪一種，取決於你的目的地需要什麼：多數設計工具用 Hex，CSS 自訂屬性用 hsl 或 oklch，cmyk 則只能當作粗略參考，因為真正的印刷轉換取決於墨水、紙張與色彩設定檔。

HSL 的亮度是各通道的幾何平均，而不是顏色看起來有多亮的量測。黃色與藍色都位於 50%，但其中一個在人眼看來幾乎是白色。任何固定這個數值所建立的色階都會失衡，最後只能一個顏色一個顏色地手動修正。

OKLCH 從結構上解決了這個問題：亮度上相等的間距，看起來就是相等的間距。在不同色相間固定亮度，整排顏色真的會像同一個family。這讓它成為產生淺色、深色與插值的理想色彩空間，也不會出現 RGB 混色時中間那段混濁的灰。

這裡對白色與黑色顯示的比值採用 WCAG 2 公式，門檻也是慣用的那幾個：內文 4.5:1，大字與介面元件 3:1，AAA 等級 7:1。在多數採購軟體的場合，達到這些標準並非可選項，而它也是成本最低的無障礙工作。

不過，數字並不是全部的答案。這個公式會高估深色背景上淺色文字的對比，也完全不考慮字重，所以及格的極細字型仍可能難以閱讀。先達到比值，再以實際上線的字級與字重親眼檢視結果。