HEX、RGB 與 HSL 並不是三套互不相干的顏色，而是用不同座標描述同一個螢幕色彩。RGB 直接寫出紅、綠、藍三個通道的強度；HEX 把同樣三個數值改用十六進位表示；HSL 則把顏色整理成色相、飽和度與亮度，方便人調整。色彩工具的核心工作，就是在這些表示法之間轉換，再依相對亮度計算文字與背景是否有足夠對比。
RGB 是加法混色的數字版本
螢幕像素以紅、綠、藍三種光組合顏色。常見 8 位元通道讓每個通道可取 0 至 255，共有 256 種強度。RGB 的 rgb(255, 0, 0) 代表紅光最強、綠光與藍光關閉；三個通道都是 255 時接近白色，都是 0 時則是黑色。
三個通道總共能形成 256 × 256 × 256，也就是 16,777,216 種數值組合。不過顯示器、色彩描述檔與觀看環境都會影響實際呈現，所以數值相同不保證所有裝置看起來完全一致。
HEX 只是把 0 至 255 改寫
十六進位使用 0 至 9 與 A 至 F 表示數字。兩位十六進位可表達 00 至 FF，換成十進位正好是 0 至 255。六位 HEX 色碼依序分成紅、綠、藍三組：
#RRGGBB
例如 #2A7FFF 可拆成 2A、7F、FF。十六進位轉十進位的方法，是第一位乘以 16，再加第二位：
- 2A = 2 × 16 + 10 = 42
- 7F = 7 × 16 + 15 = 127
- FF = 15 × 16 + 15 = 255
所以它等於 rgb(42, 127, 255)。反向轉換時，把十進位數除以 16，商是第一位，餘數是第二位。簡寫色碼如 #3AF，等同把每位重複成 #33AAFF，不是在末尾補零。
HSL 為何比較適合調色
HSL 的 H 是色相角度，通常以 0 至 360 度環繞色輪；S 是飽和度；L 是亮度。飽和度為 0 時，色相不再影響結果，只剩灰階。亮度為 0 是黑，為 100% 是白，而 50% 附近保留最完整的色彩。
從 RGB 轉 HSL 時，先把三通道除以 255，縮放到 0 至 1，再找最大值 max、最小值 min 與差值 d：
亮度 L = (max + min) ÷ 2
若 d 為 0，表示三通道相等，飽和度為 0。若不相等，飽和度要依亮度位於中點哪一側調整；色相則看最大通道是紅、綠或藍，再計算通道差的相對位置。工具會把最後結果換成角度與百分比。
HSL 的亮度不是人眼感受的實際明亮程度。兩個顏色即使 L 相同，黃色往往看起來比藍色亮，因此不能用 HSL 的 L 直接判斷無障礙對比。
透明度會先和背景混色
RGBA 或八位 HEX 多了一個 alpha 通道，表示前景覆蓋背景的比例。alpha 為 1 時完全不透明，為 0 時完全透明。顯示結果可概念化為：
結果通道 = 前景通道 × alpha + 背景通道 × (1 − alpha)
同一個半透明藍色放在白底與黑底上，最後 RGB 不同。計算對比度前，必須先決定真實背景並完成混色，不能只拿未合成的前景色碼直接比較。
對比度不是 RGB 數字相減
人眼對不同光強的反應不是線性的，紅、綠、藍對亮度感受的貢獻也不同。網頁無障礙常用 sRGB 相對亮度。計算時先把 0 至 255 的通道正規化，再依 sRGB 轉換曲線線性化，最後加權：
相對亮度 = 0.2126 × 線性紅 + 0.7152 × 線性綠 + 0.0722 × 線性藍
綠色權重最高，反映人眼在明視條件下對綠光較敏感。取得較亮顏色 L1 與較暗顏色 L2 後：
對比度 = (L1 + 0.05) ÷ (L2 + 0.05)
結果介於 1:1 和 21:1。1:1 表示亮度相同，黑白則達最大值。字體大小、粗細與採用的無障礙準則會影響合格門檻，工具顯示通過時仍應確認實際文字情境。
常見轉換誤區
第一，HEX 不比 RGB 更「精準」，六位 HEX 和整數 RGB 能表達的是同一組 8 位元通道。第二，HSL 調高亮度不保證對比一定增加，因為背景顏色與人眼亮度權重也參與計算。第三，螢幕色彩不能直接等同印刷 CMYK；發光顯示和油墨吸收光線的原理不同。
此外，色覺差異不能只靠提高明暗解決。介面若只用紅綠區分狀態，仍可能讓部分使用者難以辨識，應搭配文字、圖示或形狀。
工具結果應如何判讀
色彩工具適合快速取得等價色碼、建立明暗變化並檢查前景背景對比。輸入顏色後，可以先確認 alpha 與背景，再查看 RGB、HEX、HSL 是否對應，最後依實際字級檢查對比。若調色，以對比數值和真實預覽反覆驗證，不要只盯著 HSL 亮度。
HEX 是十六進位包裝，RGB 是螢幕通道，HSL 是方便操作的幾何描述，而對比度另有基於視覺感受的計算。把四者分清楚，就能知道色彩選取器不是憑感覺產生答案，而是在不同數學表示與人眼亮度模型之間做翻譯。