每個前端開發者都在色彩格式間切換:設計稿給你 HEX、CSS 想用 HSL 微調、程式需要 RGB。它們描述的是同樣的顏色 —— 這篇說明各代表什麼、何時該用。
HEX
HEX 是熟悉的 #RRGGBB 網頁寫法,每兩位是紅/綠/藍的十六進位(00–FF)。#2563eb 最適合貼一個固定的品牌色。縮寫 #RGB(如 #f00)會把每個數字展開(#ff0000)。它精簡,但不直觀,難以手動調整。
RGB
RGB 用十進位 0–255 表示同樣的三個通道:rgb(37, 99, 235)。它直接對應螢幕發光的方式,在操作通道的程式裡很方便。但和 HEX 一樣,想把顏色「調亮一點」得改三個沒有明顯關係的數字。
HSL
HSL 用色相(Hue,0–360° 色環)、飽和度(Saturation,0–100%)、亮度(Lightness,0–100%)描述:hsl(217, 83%, 53%)。這是設計師最愛用來調整顏色的:
- 想更亮?提高 L。
- 想更淡雅?降低 S。
- 想要同系的鄰近色?移動 H。
這種直觀讓 HSL 非常適合建立色階,以及同一色相的明暗變化。用顏色轉換工具把任何顏色轉成 HSL 來實驗。
透明度:RGBA 與 HSLA
要加透明度,附上 alpha 通道(0–1):rgba(37, 99, 235, 0.5) 或 hsla(217, 83%, 53%, 0.5)。現代 CSS 也允許 HEX 帶 alpha(#2563eb80),以及空白分隔語法 rgb(37 99 235 / 50%)。
該用哪個?
- 固定品牌色、從設計稿複製貼上: HEX。
- 在程式中操作通道: RGB。
- 設計色階、微調亮度/飽和度、做主題: HSL。
三者可互換,挑對當下任務最方便的那個,需要別種再轉。
設計系統小技巧
用 HSL 定義你的調色盤,只改 L(有時加 S)來衍生各種深淺。你會比用試誤法微調 HEX 更容易得到和諧、可預期的明暗變化。
用免費的顏色轉換工具即時在 HEX、RGB、HSL 之間轉換(附即時預覽),全程在你的瀏覽器執行。