色彩格式轉換
在 HEX、RGB、HSL、HWB、OKLCH 與 OKLab 之間轉換顏色，附取色器與 WCAG 對比度檢查。
支援 HEX、rgb()、hsl()、hwb()、oklch()、oklab() 與 CSS 顏色名稱。
轉換結果
#3366cc
輸入格式：HEX
- HEX
- RGB
- HSL
- HWB
- OKLCH
- OKLab
對比度（WCAG 2）
白色背景
Aa 文字
5.36:1
✓ AA 通過
黑色背景
Aa 文字
3.91:1
✗ 僅大字通過 AA
使用說明
- 在「顏色」欄位輸入任何 CSS 顏色，例如 #3366cc、rgb(51 102 204)、hsl(220 60% 50%)、oklch(52% 0.16 262) 或 tomato；也可以用「取色器」直接挑選。
- 下方會即時列出 HEX、RGB、HSL、HWB、OKLCH 與 OKLab 的 CSS 寫法，按「複製」即可貼到樣式表中。
- 「對比度」區塊顯示這個顏色搭配白色與黑色時的 WCAG 對比值，以及是否達到 AA／AAA 標準。
- 按「範例」可以輪流查看幾種不同格式的顏色，包括半透明與超出 sRGB 色域的顏色。
常見問題
OKLCH 是什麼？為什麼要用它？
OKLCH 是以人眼感知為基礎的色彩空間，L 是亮度、C 是彩度、H 是色相。調整亮度時色相不會偏移，用來製作色階或深色模式配色比 HSL 更直覺。現代瀏覽器的 CSS 都已支援 oklch()。
什麼是「超出 sRGB 色域」？
OKLCH 與 OKLab 可以描述比一般螢幕（sRGB）更鮮豔的顏色。遇到這種顏色時，本工具依 CSS Color 4 的做法降低彩度、保持亮度與色相，找出最接近的可顯示顏色，再換算成 HEX、RGB 等格式。
對比度怎麼看？
WCAG 2 規定一般文字與背景的對比至少 4.5:1 才達 AA，7:1 達 AAA；大字（18 pt 以上，或 14 pt 粗體）只需 3:1。對比值只會無條件捨去，不會四捨五入進位，避免誤判為通過。
有透明度的顏色怎麼處理？
透明度會保留在各格式中，例如 HEX 會變成 8 位數（#rrggbbaa），其他格式則加上「/ 0.5」。取色器與對比度計算則使用不透明的顏色。
為什麼轉回來的數字有一點點差異？
HEX 與 RGB 每個通道只有 256 階，從 OKLCH 等連續的色彩空間換算時會四捨五入，所以來回轉換可能有極小的差異，肉眼看不出來。
我的資料會被上傳嗎？
不會。所有轉換都在你的瀏覽器中完成，不需要連網。