HEX、RGB、HSL:CSS 色彩格式實用指南

發佈於 2026年7月7日

每個前端開發者都在色彩格式間切換:設計稿給你 HEX、CSS 想用 HSL 微調、程式需要 RGB。它們描述的是同樣的顏色 —— 這篇說明各代表什麼、何時該用。

同一個顏色的三種寫法。 這個站上用的橘色是 #e76f51。把它丟進我們的色彩轉換器,RGB 得到 231, 111, 81,HSL 得到 12, 76%, 61%。把兩者並排讀,用途的差別就很明顯:RGB 告訴你每個原色要發多少光 —— 那是螢幕需要的,但對「這是什麼顏色」沒什麼幫助。HSL 講的是「色相 12 度(橘紅)、飽和度 76%、亮度 61%」,那才是你想要「同一個顏色但暗一點」時需要的資訊。改一個 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 來實驗。

前三列剛好解釋了 HSL 最容易讓人搞錯的那件事。白、黑、中灰回來的色相都是 0 —— 灰色是 0, 0%, 50% —— 但這個色相不是「紅」,而是沒有定義、只是被寫成零,因為飽和度是 0%。在灰色上拖色相滑桿完全沒有反應,而且只要飽和度還在零,再怎麼調色相都染不上顏色。對照純紅的 0, 100%, 50%:色相數字一樣,意義完全不同。

透明度: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 之間轉換(附即時預覽),全程在你的瀏覽器執行。

同一個顏色的三種寫法

把同一個顏色用三種格式寫出來,最容易看懂。下面全都是同一個藍:

格式	值	什麼時候用
HEX	`#2563eb`	從設計稿或品牌規範貼一個固定色
RGB	`rgb(37, 99, 235)`	在 JavaScript/canvas 讀寫各通道
HSL	`hsl(217, 83%, 53%)`	要調亮、調淡或衍生相配的色調

下面是同一組顏色通過我們自己的顏色轉換器的結果。前三列刻意選了無彩色,後三列是這個網站實際在用的配色。

HEX	RGB	HSL
`#ffffff`	`255, 255, 255`	`0, 0%, 100%`
`#000000`	`0, 0, 0`	`0, 0%, 0%`
`#808080`	`128, 128, 128`	`0, 0%, 50%`
`#ff0000`	`255, 0, 0`	`0, 100%, 50%`
`#00ff00`	`0, 255, 0`	`120, 100%, 50%`
`#0000ff`	`0, 0, 255`	`240, 100%, 50%`
`#e76f51`	`231, 111, 81`	`12, 76%, 61%`
`#2a9d8f`	`42, 157, 143`	`173, 58%, 39%`
`#e9c46a`	`233, 196, 106`	`43, 74%, 66%`

常見誤解

**「HEX 比 RGB 精確。」**並不會——兩者每個通道都是 8 位元,所以 #2563eb 和 rgb(37, 99, 235) 完全相等,HEX 只是十六進位而已。
**「HSL 的 L 相同就代表亮度相同。」**對眼睛來說不是。同樣亮度下,hsl(60, 100%, 50%)(黃)看起來遠比 hsl(240, 100%, 50%)(藍)亮。想要在視覺上均勻的色階,可以看看 OKLCH 這類較新的色彩空間。
**「#RGB 縮寫對任何顏色都能用。」**只有每個通道是「同一位數重複」時才行。#2563eb 沒有合法的三位寫法;#ff0000 才有(#f00)。

常見問題

alpha 寫 0.5 跟 50% 一樣嗎? 一樣。rgba(…, 0.5) 和新式的 rgb(37 99 235 / 50%) 都是同樣的半透明。

色彩格式會影響無障礙對比度嗎? 不會。對比度取決於實際的顏色,而非寫法——同一組顏色不管餵給檢查工具 HEX、RGB 還是 HSL,分數都一樣。

像 rebeccapurple 這種具名顏色呢? 拿來快速測試很方便,但總共只有約 148 個,一需要特定色調就得換回 HEX 或 HSL。

想把這些顏色做成漸層或陰影,可參考姊妹篇CSS 漸層、陰影與圓角;若要先從圖片吸出顏色,用圖片取色器。

#css#設計#色彩