HEX、RGB、HSL、CMYK 與文字對比度檢查

色碼就是同一種顏色的不同寫法。HEX、RGB 和 HSL 描述的是螢幕上的同一種光，因此彼此可以精確互換，只有捨入時會有誤差。CMYK 描述的是紙上的墨水，所以從螢幕數值轉成 CMYK 只能當作估計。WCAG 對比度比值則是另一個數字，用來比較兩種顏色的明暗差異，決定文字好不好讀。把顏色貼進 顏色轉換器，就能一次看到所有格式。

顏色轉換器需要另一種格式的顏色免費使用

如果你需要的顏色在照片、標誌或截圖裡，請先用 圖片取色器 讀取那個像素的顏色，再把 HEX 貼到這裡。如何從圖片取出精確的顏色 會說明步驟。

HEX 與 RGB 是同一組數字

HEX 色碼由三組十六進位數字組成。#34D6A0 包含紅、綠、藍三個數值。每一組都是 00 到 FF 之間的數字，換算成十進位就是 0 到 255。所以 34 是 52，D6 是 214，A0 是 160，RGB 寫法就是 rgb(52, 214, 160)。

改用十六進位書寫，只會改變數字的樣子。簡寫 #abc 等於 #aabbcc，每個數字重複一次。八位數色碼最後會多出一組透明度，從 00 代表完全透明，到 FF 代表完全不透明，所以 #34D6A080 大約是半透明。RGBA 則是用 0 到 1 之間的數字表示同樣的透明度。

CSS 也接受顏色名稱。rebeccapurple 就是 #663399。轉換器會透過瀏覽器本身讀取名稱，所以瀏覽器認得的名稱都可以使用。

HSL 用的是人描述顏色的方式

HSL 代表色相、飽和度與亮度。色相是色環上的角度：紅色是 0 度，綠色是 120 度，藍色是 240 度。飽和度說明顏色離灰色有多遠，亮度則說明它離黑或白有多遠。

同樣的 #34D6A0 是 hsl(160, 66%, 52%)。它的色相落在綠色與藍色之間，飽和度很高，亮度則略高於中間值。HSL 是最容易手動調整的格式，因為你可以保留色相，只調整亮度，就能得到較淺或較深的色階。

HSV 和 HSL 很接近，但它用的是明度，也就是最強通道的亮度，而不是亮度。部分取色工具會使用 HSV，所以你可能會在其他工具中看到它。轉換器會把 HSV 與 HSL 並排顯示，方便你比較兩者。

CMYK 用於墨水，所以只是估計

螢幕是加法混色：紅、綠、藍加在一起會變成白色。印刷則是減法混色：青、洋紅、黃與黑墨水疊在白紙上。兩套系統無法完全對應，因此 CMYK 數值一定是換算結果。

轉換器使用簡單的公式。黑色的 K 值是 1 減去紅、綠、藍數值中最大的那個，數值範圍為 0 到 1。青、洋紅與黃則是根據扣除 K 之後剩下的部分算出來。這個公式沒有考慮印表機使用的墨水、紙張與色彩描述檔，因此實際印出的結果會有所不同。非常明亮的顏色，甚至可能超出 CMYK 墨水能印出的範圍。CMYK 數值可以用來與印刷廠開始討論，但大量印刷前，請先要求樣品校對。

對比度看的是明暗，不是色相

WCAG 對比度比值是用相對亮度來比較兩種顏色。相對亮度是先經過伽瑪校正，再根據紅、綠、藍數值算出的。由於人眼對綠色最敏感，綠色的權重也最高。計算時會先把每個通道從 0 到 255 的範圍換算過來，亮度為 0.2126 乘以紅，加上 0.7152 乘以綠，再加上 0.0722 乘以藍。

比值的算法是：較亮的亮度加 0.05，再除以較暗的亮度加 0.05。黑字配白底可得到 21 比 1，是最大值。兩種顏色的色相可能差很多，但如果亮度相近，比值仍然會很低，而這正是對比度檢查要抓出來的情況。同樣的低對比也是 QR code 掃不到 的原因之一。

各級標準的門檻

WCAG 2.x 分為兩個等級，要求的比值取決於文字大小。

• AA 等級：一般文字需要 4.5 比 1，大型文字需要 3 比 1。
• AAA 等級：一般文字需要 7 比 1，大型文字需要 4.5 比 1。

大型文字指 24 像素以上，或是 18.66 像素以上且為粗體。比這更小的都算一般文字。白底上的灰色文字是常見的不合格情況。例如白底上的中灰色 #777777 大約是 4.48 比 1，一般文字的 AA 標準差一點點不合格，但大型標題則能通過 AA。

轉換器會把比值四捨五入到小數點後兩位，但判定是否通過時使用的是精確數值。因此顯示為 4.50 的結果，如果實際上稍微低於 4.5，仍然會不合格。這項檢查只衡量一件事，不涵蓋字重、行距，也不會模擬色盲者如何看見設計，所以還是要在實際頁面與實際字級下進行測試。

色階與色調

轉換器下方的色條，會顯示這個顏色周圍的九個階層：四個往白色混合的淺色調、原本的顏色，以及四個往黑色混合的深色調。點擊任一色塊，就會複製它的 HEX 色碼。當你需要一組相關顏色，例如淺色背景、滑鼠懸停狀態與深色文字，而且全部都要從同一個品牌色延伸時，這個功能很有幫助。選好每一組配色後，都請先用對比度區塊檢查，再開始使用。

在 fixmint 上操作的步驟

1. 把顏色以 HEX、RGB、HSL 或 CSS 顏色名稱（例如 rebeccapurple）貼到 顏色 欄位。
2. 查看 HEX、RGB、HSL、HSV 和 CMYK 各列。按下你需要那一列旁的 複製。CMYK 會標示為約略值。
3. 把背景色輸入 背景，或使用它的色票，然後讀取 白底上、黑底上 與 您的背景上 下方的比值。
4. 查看每個比值下方的四個標記：AA 和 AAA，各自分為一般文字與大型文字。
5. 在 色階與色調 下，點擊色塊即可複製。

快速解答

CMYK 數值精確嗎？

不精確。它只是單純的算術換算，沒有考慮印表機、紙張與色彩描述檔。請把它當作起點，並要求樣品校對。

對比度比值通過，設計就一定好用嗎？

這只代表文字顏色符合一項可量化的門檻。無障礙設計還取決於字級、間距、動態效果與頁面的建構方式，所以比值只是參考，不能取代完整的檢視。

樣式表該存哪一種格式？

選你最容易閱讀與編輯的那一種。HEX 簡潔又常見。HSL 比較容易手動調整，因為你只要改變亮度，不必更動色相。