HEX、RGB、HSL：了解網頁色碼
你正在編輯一個網站，在 CSS 中看到 #FF5733。或者你在和一位設計師合作，他傳給你 rgb(255, 87, 51)。又或者設計工具將色彩顯示為 hsl(11, 100%, 60%)。這些都描述的是同一種顏色——一種鮮豔的橙紅色——但使用三種不同的格式。
如果你曾對網頁色碼感到困惑，本指南將在五分鐘內為你解惑。
數位色彩的運作原理
你螢幕上的每種顏色都是通過混合三種基礎光色來創建的：紅色、綠色和藍色。這就是 RGB 色彩模型。通過將每個通道的強度從零（關閉）調整到最大值（全亮度），你可以創建標準顯示器能夠顯示的約 1670 萬種顏色中的任何一種。
- 紅色 255、綠色 0、藍色 0 = 純紅色
- 紅色 0、綠色 255、藍色 0 = 純綠色
- 紅色 0、綠色 0、藍色 255 = 純藍色
- 紅色 255、綠色 255、藍色 255 = 白色（所有通道全開）
- 紅色 0、綠色 0、藍色 0 = 黑色（所有通道關閉）
- 紅色 255、綠色 255、藍色 0 = 黃色（紅色 + 綠色）
網頁上使用的每種色彩格式都只是表達這些通道值的不同方式。
你知道嗎？ 1670 萬種顏色的數字來自每個通道的 256 個等級（0-255）乘以三個通道：256 × 256 × 256 = 16,777,216 種可能的顏色。
HEX 色彩
外觀
#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF
運作原理
HEX 色碼是以井號（#）為前綴的六個字元字串。六個字元分成三對，每對以十六進位（16 進位）表示一個色彩通道：
| 字元對 | 通道 | 範圍 |
|---|---|---|
| 前兩個字元 | 紅色 | 00 至 FF |
| 中間兩個字元 | 綠色 | 00 至 FF |
| 最後兩個字元 | 藍色 | 00 至 FF |
十六進位使用數字 0-9 和字母 A-F，其中 A=10、B=11、C=12、D=13、E=14、F=15。因此，十六進位的 FF 等於十進位的 255（15 × 16 + 15 = 255）。
分解 #FF5733：
- FF = 紅色為 255（最大值）
- 57 = 綠色為 87
- 33 = 藍色為 51
這產生一種鮮豔的橙紅色。
縮寫
當每對有兩個相同的字元時，你可以使用三字元縮寫：
#FF0000可以寫成#F00#3366FF可以寫成#36F#000000可以寫成#000
提示 HEX 碼是網頁開發中使用最廣泛的格式。如果你只學一種格式，就學這個。
RGB 色彩
外觀
rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)
運作原理
RGB 表示法直接以十進位數字（0 至 255）陳述紅色、綠色和藍色通道值。它是最直觀的格式，因為數字直接對應每個光通道的強度。
rgb(255, 87, 51) 表示：
- 紅色： 255（最大值）
- 綠色： 87（約三分之一）
- 藍色： 51（約五分之一）
RGBA：添加透明度
RGBA 添加了第四個值用於不透明度（alpha），範圍從 0（完全透明）到 1（完全不透明）：
rgba(255, 87, 51, 0.5) /* 50% 透明 */
rgba(0, 0, 0, 0.8) /* 80% 不透明的黑色 */
這對於疊加層、陰影以及任何需要顯示後面內容的設計元素很有用。
HSL 色彩
外觀
hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)
運作原理
HSL 代表色相（Hue）、飽和度（Saturation）、亮度（Lightness）。HSL 不是用紅/綠/藍通道混合的方式思考，而是以人類自然描述顏色的方式來描述顏色。
色相是顏色本身，以色輪上的度數（0-360）表示：
- 0° / 360° = 紅色
- 60° = 黃色
- 120° = 綠色
- 180° = 青色
- 240° = 藍色
- 300° = 洋紅色
飽和度是顏色的鮮豔程度，從 0%（灰色）到 100%（完全飽和）。
亮度是顏色的明暗程度，從 0%（黑色）到 100%（白色）。50% 是「正常」亮度。
hsl(11, 100%, 60%) 表示：
- 色相： 11°（略帶橙紅色）
- 飽和度： 100%（完全鮮豔）
- 亮度： 60%（比正常稍亮）
你知道嗎？ HSL 被認為是最適合設計師的色彩格式，因為它對應我們自然描述顏色的方式。「讓它更亮一點」意味著增加 L 值。「讓它不那麼鮮豔」意味著降低 S 值。「向藍色方向移動」意味著更改 H 值。使用 HEX 或 RGB，這些調整需要同時更改多個值。
HSLA：添加透明度
與 RGBA 一樣，HSLA 添加了 alpha 通道：
hsla(11, 100%, 60%, 0.5) /* 50% 透明 */
何時使用哪種格式
| 格式 | 最適合 | 優勢 |
|---|---|---|
| HEX | CSS 樣式表、設計規格 | 簡潔，廣為人知 |
| RGB | 程式化色彩操作 | 直觀的通道值 |
| HSL | 設計工作、建立配色方案 | 符合人類色彩感知 |
用於網頁開發
HEX 是事實上的標準。大多數 CSS 使用 HEX 碼撰寫，因為它們簡潔，每個開發者都認識。
用於設計系統
HSL 非常適合建立一致的色彩調色盤。要建立品牌色彩的較亮和較暗變體，你只需調整亮度值：
- 主色：
hsl(210, 80%, 50%) - 淺色變體：
hsl(210, 80%, 70%) - 深色變體：
hsl(210, 80%, 30%)
色相和飽和度保持不變，確保變體是相同「顏色」的不同亮度。
用於透明度
當你需要疊加層、陰影或玻璃效果的半透明顏色時，使用 RGBA 或 HSLA。
在格式之間轉換
你會經常需要在格式之間轉換。設計師傳送 HSL 值，但你的程式碼庫使用 HEX。品牌指南指定 RGB，但你需要 HSL 來建立變體。
數學計算很直觀，但手動計算很繁瑣。轉換工具能即時處理。
提示 在 HEX、RGB、HSL 等格式之間轉換：如何轉換色碼。輸入任何格式的顏色，即時獲得所有其他格式。
開始使用色彩：
所有工具均免費，直接在你的瀏覽器中運作。