螢幕上的顏色最後都是紅、綠、藍三個頻道在發光，但溝通時大家用的字串不一樣：設計稿常見 #3B82F6，程式有時寫 rgb(59, 130, 246)，調色盤又用色相與飽和度。同一顆顏色可以同時有 HEX、RGB、HSL 三種寫法；對不上通常不是眼睛看錯，而是複製了不同格式、或漏了井字號與全形字元。本文處理怎麼讀色碼、怎麼互轉、文字對比要過哪個門檻；光為什麼能混出白、顏料為什麼越混越髒，請看色彩混合專文，這裡不重複那套光學敘事。

HEX 在記什麼

HEX 是十六進位寫法，常見格式為 #RRGGBB。每兩碼對應一個頻道，範圍 00 至 FF，也就是十進位 0 至 255。

  • #FF0000：紅滿、綠藍為 0，看起來是純紅。
  • #00FF00：純綠。
  • #0000FF：純藍。
  • #FFFFFF：三頻道全滿，白。
  • #000000：全 0，黑。

有人會寫三碼簡寫，例如 #3BF 展開成 #33BBFF。對色時以六碼為準，避免簡寫在某個軟體能讀、另一個不能。井字號有的欄位可省略，有的必填；從聊天室貼上時，也要小心全形 # 或全形英數，看起來像色碼，貼進 CSS 或設計軟體卻無效。

HEX 的優點是短、好搜、CSS 與多數設計工具都吃。缺點是你很難單靠字串「看出比較亮還是比較飽和」，要調淺色或灰階時，HSL 比較直觀。

RGB 比較接近螢幕，但不代表比較好溝通

RGB 把同一個事實寫成十進位三個數字：紅、綠、藍各 0 至 255。rgb(59, 130, 246) 與 #3B82F6 是同一顆藍。工程師除錯、Canvas、列印前預覽，常直接看 RGB，因為它和像素值一一對應。

互轉規則很單純：每個頻道先換成 0 至 255 的整數，再轉兩位十六進位；反向則把兩位 HEX 當十六進位解回十進位。不要用「先扣 5%」那種口算去估亮度，色碼沒有那個百分比。

需要半透明時，會再多一個 alpha，寫成 8 碼 HEX 或 rgba()。對比度計算通常看不透明前景與背景；半透明文字的實際對比會變弱，不能只拿不透明色碼去過關。

HSL 適合「調深淺」，不適合當唯一真相

HSL 把顏色拆成：

  • 色相 H：0 至 360，繞一圈色環。
  • 飽和度 S：0 至 100%，越高越鮮，越低越接近灰。
  • 亮度 L：0 至 100%，接近 0 偏黑、接近 100 偏白。

同一個藍，想做按鈕的 hover 淺色，多半是提高 L 或略降 S，而不是去改 HEX 的某一對字元碰運氣。設計系統裡的 tints（加白變淺）與 shades（加黑變深），概念上接近沿亮度走一排樣品，但數學不一定等於只改 HSL 的 L；對色時仍以轉回 HEX 或 RGB 的結果為準。

HSL 的亮度也不是 WCAG 對比用的相對亮度。一個飽和黃在 HSL 看起來「很亮」，對深色文字的對比卻可能不及格。所以調色用 HSL，過門檻用對比度數字，兩件事不要混成一種感覺。

對比度：門檻比「深淺感覺」可靠

網頁無障礙指南 WCAG 用相對亮度算前景與背景的對比比值。常用門檻（WCAG 2.x 對比相關成功準則）是：

  • AA、一般文字：至少 4.5:1
  • AA、大文字：至少 3:1（大文字通常指約 18pt 或 14pt 粗體這一級，實際以規範定義為準）
  • AAA、一般文字：至少 7:1

台灣政府與大型網站常把 AA 當最低溝通標準。按鈕上的字、表單標籤、錯誤訊息，都比裝飾色塊更需要過關。品牌主色很好看，不代表白字疊上去一定夠。淺灰字放淺底、黃字放白底，是最常見的「設計稿好看、上線讀不到」。

對比比值由相對亮度算出，公式是較亮一方加 0.05 之後，除以較暗一方加 0.05。人眼對中間灰與高飽和色的主觀感受，和這個比值不一定同向，所以不要用「我覺得夠黑」代替檢測。

實務上最容易對不齊的幾件事

  • 格式混用：Figma 複製 HEX、工程師貼成少了 # 的字串，或 Excel 把 #FF0000 當公式。
  • 全形與空白：從投影片複製到程式，中間夾了全形數字或不可見空白。
  • 只對主色、不對文字色：主色過了品牌規範，按鈕字卻用半透明白。
  • 把圖片壓縮後的色當成色票：JPEG 有損壓縮會讓色塊漂移，對品牌色應以向量或色碼為準，而不是截圖取色。
  • QR 或條碼當裝飾色：對比不夠會掃不到；那是可讀性問題，不是「看起來很潮」。

需要互轉或看對比時，用選色工具改一個數、其餘格式跟著變，比手算十六進位不容易漏位。工具不會告訴你這顆色在印刷油墨上會不會偏，也不會代替你決定品牌調性；它只負責讓 HEX、RGB、HSL 與對比值講同一句話。

和「顏色怎麼混出來」如何分工

  • 混色文：光的加法、顏料的減法、為什麼螢幕三原色和水彩課不一樣。
  • 本文：假設你已經要在電腦裡指定一顆色，處理色碼格式、互轉與文字能不能被讀到。

兩者一起看，比較不會「會講光學，卻仍然貼錯色碼」。

結語

把顏色溝通固定成「先鎖定一顆 RGB 或 HEX，再決定要用 HSL 去調深淺，最後用對比比值檢查文字」，通常比在三種格式之間口頭形容「再藍一點」可靠。色碼對齊之後，品牌與無障礙才有共同語言；其餘美學選擇仍然是設計判斷，不是轉換公式能代替的。