色碼轉換工具

貼上任一色碼,即可取得 HEX、RGB、HSL、HSV 與 HCV,並檢測作為文字時的可讀性。

解讀色彩對比度

WCAG 2 將內文的 AA 級標準定為 4.5:1、AAA 級為 7:1;大字體(18pt 或粗體 14pt)達到 3:1 即可符合 AA 級。(WCAG 是 W3C 制定的網頁內容無障礙指南。)藍色 #2457E6 在白色背景上的對比度約為 5.9:1,適合用於內文;但在黑色背景上僅有 3.6:1,只適合用於大字體。

為什麼 HSL 很實用

HSL 將色相、飽和度與亮度分開處理,因此要讓顏色變亮或變暗只需調整 L。下方的亮度刻度就是這個功能;點擊任一步驟即可載入該數值。

HSV 與 HCV

HSV(在 Photoshop 與 Figma 中稱為 HSB)代表色相、飽和度與明度;它是大多數檢色器中的正方形區域。V 是最亮的色版,S 則代表其中的色彩濃度。HCV 則將飽和度替換為彩度(C),即最亮與最暗色版之間的差距。#2457E6 為 hsv(224, 84%, 90%) 與 hcv(224, 76%, 90%)。這兩者都不是有效的 CSS 格式,因此在網頁代碼中請使用 HEX、RGB 或 HSL。

支援的格式

#RGB、#RRGGBB、#RRGGBBAA、rgb()/rgba()、hsl()/hsla()、hsv()/hsb()/hcv()、純數字三元組(如 '36, 87, 230'),以及約 50 種常見的 CSS 顏色名稱。

情境使用指南

常見問題

檔案或資料會被上傳嗎?

不會。格式轉換與對比度運算均在您的瀏覽器中執行。

那 Alpha 透明度呢?

#RRGGBBAA 與 rgba() 會反映在 HEX 和 RGB 輸出中。對比度計算會忽略 Alpha 值,並將顏色視為完全不透明。

支援 CMYK 嗎?

印刷 CMYK 取決於色彩設定檔,因此不在此工具的支援範圍內。

我可以使用此工具在哪些色彩格式之間進行轉換?

可轉換 HEX(含 Alpha 透明度)、rgb()、hsl()、純數字三元組以及約 50 種標準 CSS 顏色名稱。

此工具會驗證 WCAG 無障礙對比度比例嗎?

會的,它會計算文字與白色、黑色及自訂背景的對比度比例,以檢查是否符合 WCAG AA(4.5)、AAA(7)及大字體(3)標準。

我可以查看同一個顏色的不同明暗色調嗎?

可以,系統會顯示所選色相的 9 階亮度刻度,點擊任何色階即可立即載入其數值。

有提供互動式檢色器嗎?

有的,除了輸入代碼數值外,您也可以使用內建的檢色器介面以視覺化方式挑選顏色。