色彩格式詳解：HEX、RGB 和 HSL

在網頁上，同一種顏色可以有好幾種寫法 —— #3498db、rgb(52, 152, 219) 和 hsl(204, 70%, 53%) 都是完全相同的藍色。搞懂每種格式的含義（以及何時該用哪個），會讓選色、微調和匹配顏色輕鬆得多。本指南拆解 HEX、RGB 和 HSL，以及它們之間的關係。

一切從紅、綠、藍開始

螢幕透過混合三種色光來產生顏色：紅、綠、藍。你看到的每一種顏色都是這三個通道的某種組合，每個通道設定為 0（關）到 255（滿）的強度。純黑是 0, 0, 0；純白是 255, 255, 255。HEX 和 RGB 不過是對這同樣三個數字的兩種記法。

RGB

RGB 直接給出三個通道的值：

rgb(52, 152, 219)
     R    G    B

它是三者中最易讀的，因為這些數字直接對應「紅、綠、藍各有多少」。當你想就通道本身來推敲時很好用。

HEX

HEX 把同樣的 0–255 通道值用十六進位（base 16）編碼，形式為一個 # 後跟三對：

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

每一對從 00（0）到 ff（255）。HEX 緊湊，而且是大多數設計工具和 CSS 的預設，所以它是你最常複製貼上的格式。還有一種簡寫：#39f 透過把每一位翻倍展開為 #3399ff。

HSL

HSL 以人們直覺思考顏色的方式來描述它，用三個不同的軸：

• 色相（Hue）（0–360°）—— 色環上的顏色本身：0° 紅，120° 綠，240° 藍。
• 飽和度（Saturation）（0–100%）—— 有多鮮豔，從灰到純色。
• 明度（Lightness）（0–100%）—— 有多亮，從黑經過該顏色到白。

hsl(204, 70%, 53%)
    hue  sat  light

HSL 的超能力在於 調整 顏色。想要某顏色更暗的版本？降低明度，保持色相和飽和度不變。想要一套匹配的深淺色？固定色相，只改明度。用 HEX 或 RGB 那樣做意味著重新計算全部三個通道；用 HSL 只是一個數字。

Alpha：加入透明度

每種格式都有一個帶 alpha 通道的變體，用於不透明度，從 0（完全透明）到 1（完全不透明）：rgba(52, 152, 219, 0.5) 和 hsla(204, 70%, 53%, 0.5)。現代 CSS 還允許一個 8 位 HEX，最後一對是 alpha —— #3498db80 就是 50% 的同一種藍。

你該用哪個？

• HEX —— 複製一個固定的品牌色，或貼進設計工具。緊湊而通用。
• RGB / RGBA —— 當你要就原始通道推敲，或需要簡單的透明度時。
• HSL / HSLA —— 當你在 設計 時：建構調色盤、懸停/啟用深淺色，或憑感覺微調顏色。

好消息是你不必手工轉換。我們的 HEX↔RGB 轉換器 即時在格式間轉換，而 檢色器 讓你視覺化地選一個顏色，一次讀出它的 HEX、RGB 和 HSL 值 —— 還能做漸層和調色盤。要從圖片裡取一種顏色？圖片檢色器 正是幹這個的。