寫 CSS、做簡報或設計教材時，一定會遇到像 #2A62F0、rgb(42, 98, 240)、hsl(223, 87%, 55%) 這樣的色碼。它們看起來完全不同，其實是同一個藍色的三種寫法。這篇文章用可以自己動手驗算的例子，說明三種色碼怎麼讀、怎麼互相換算、透明度怎麼寫，以及選色時不能忽略的色彩對比。想直接得到答案的話，可以把色碼貼進色碼轉換器，三種格式會同時顯示。
RGB：紅、綠、藍各 0 到 255
螢幕上的每個像素都是由紅（Red）、綠（Green）、藍（Blue）三種光混合而成。RGB 色碼就是直接寫出三種光的強度，每一個都是 0 到 255 的整數，數字越大越亮：
rgb(255, 0, 0)是純紅rgb(0, 255, 0)是純綠rgb(255, 255, 255)三種光全開，是白色rgb(0, 0, 0)三種光全關，是黑色
為什麼是 0 到 255？因為每個顏色用 8 個位元儲存，2 的 8 次方剛好是 256 種變化。三個顏色各 256 種，總共可以表示 256×256×256＝16,777,216 種顏色。
HEX：同一組數字的十六進位寫法
HEX 色碼的格式是 #RRGGBB，井字號後面每兩位代表一個顏色，範圍是 00 到 FF。十六進位除了 0 到 9，還用 A 到 F 代表 10 到 15，所以兩位數的算法是「第一位×16＋第二位」。
以 #2A62F0 為例：
2A ＝ 2×16 ＋ 10 ＝ 42
62 ＝ 6×16 ＋ 2 ＝ 98
F0 ＝ 15×16 ＋ 0 ＝ 240所以 #2A62F0 就是 rgb(42, 98, 240)。反過來把十進位換成十六進位，就是除以 16 取商和餘數：240÷16＝15 餘 0，15 寫成 F，所以是 F0。
HEX 還有縮寫：當每一組的兩位數字都相同時，可以只寫 3 位。#0AF 等於 #00AAFF，也就是 rgb(0, 170, 255)。要注意縮寫是「每一位重複一次」，不是在後面補 0。大小寫則沒有差別，#2a62f0 和 #2A62F0 是同一個顏色。
HSL：用色相、飽和度、亮度描述顏色
RGB 和 HEX 對電腦很直接，對人卻不太直覺：看到 rgb(42, 98, 240) 很難一眼說出要怎麼讓它「再深一點」。HSL 改用三個比較接近人類感受的數值：
- H（Hue，色相）：0 到 360 度，像一個色環。0 是紅、60 是黃、120 是綠、180 是青、240 是藍、300 是洋紅，360 又回到紅。
- S（Saturation，飽和度）：0% 是完全沒有色彩的灰，100% 最鮮豔。
- L（Lightness，亮度）：0% 是黑，100% 是白，50% 是最純的顏色。
從 RGB 換算成 HSL 的步驟如下，仍然用 rgb(42, 98, 240) 當例子。先把三個數字除以 255，得到 R≈0.165、G≈0.384、B≈0.941，其中最大值是 0.941、最小值是 0.165，兩者相差 0.776。
L ＝ (最大 ＋ 最小) ÷ 2 ＝ (0.941 ＋ 0.165) ÷ 2 ≈ 0.553 → 55%
S ＝ 差 ÷ (1 － |2L － 1|) ＝ 0.776 ÷ (1 － 0.106) ≈ 0.868 → 87%
H ＝ 60 × ((R － G) ÷ 差 ＋ 4) ＝ 60 × ((42 － 98) ÷ 198 ＋ 4) ≈ 223°色相的公式依「哪一個顏色最大」而不同：紅色最大時用 60×((G－B)÷差)，綠色最大時用 60×((B－R)÷差＋2)，藍色最大時用 60×((R－G)÷差＋4)，算出負數就加 360。這個例子最大的是藍色，結果是 hsl(223, 87%, 55%)：色相落在藍色附近、相當鮮豔、比純色稍亮一點。
幾個可以拿來對答案的基準值：純紅 #FF0000 是 hsl(0, 100%, 50%)，純綠 #00FF00 是 hsl(120, 100%, 50%)，白色是 hsl(0, 0%, 100%)，黑色是 hsl(0, 0%, 0%)。黑、白、灰的飽和度都是 0，色相沒有意義，習慣上寫成 0。
還有一點要留意：HSL 通常四捨五入成整數，所以來回換算可能差一點點。#2A62F0 精確的 HSL 約是 223.03、86.84%、55.29%，四捨五入成 hsl(223, 87%, 55%) 之後再換回 RGB，會得到 rgb(40, 97, 240)，和原本的 rgb(42, 98, 240) 相差一兩個單位。肉眼看不出來，但需要完全一致的品牌色，請以 HEX 或 RGB 為準。
什麼時候用哪一種？
三種寫法在瀏覽器裡代表同一個顏色，差別在於哪一種比較方便：
| 寫法 | 適合的情境 |
|---|---|
| HEX | 設計稿、品牌色規範、複製貼上，最短也最常見 |
| RGB | 需要用程式計算顏色、和繪圖軟體或硬體對照數值 |
| HSL | 調整明暗與鮮豔度、製作同色系色票、做主題配色 |
HSL 最大的好處是容易「微調」。想讓按鈕在滑鼠移上去時深一點，只要把亮度從 55% 降到 45%：hsl(223, 87%, 45%)，換算後是 #0F47D7；想要淺一點就調到 65%，得到 #5884F3。色相和飽和度不變，看起來就是同一個藍色的深淺變化。配色也可以用色相來推：色相加 180 度是互補色，#2A62F0 的互補色是偏橘的黃色 #F0B82A；加減 30 度是相近的類比色，加減 120 度則是三等分配色。色碼轉換器的「相近色與配色」會直接列出這些顏色，點一下就能套用。
透明度的四種寫法
透明度（alpha）是 0 到 1 的數字，0 完全透明，1 完全不透明。以半透明的 #2A62F0 為例：
rgba(42, 98, 240, 0.5)
hsla(223, 87%, 55%, 0.5)
rgb(42 98 240 / 50%)
#2A62F080前兩種是傳統寫法，第三種是 CSS 新語法：數字之間用空白分隔，斜線後面放透明度，可以寫 0.5 或 50%。第四種是 8 位的 HEX，格式是 #RRGGBBAA，最後兩位就是透明度。換算方式是把透明度乘以 255 再轉成十六進位：0.5×255＝127.5，四捨五入成 128，128＝8×16＋0，所以是 80。
常用的對照可以背起來：25% 是 40、50% 是 80、75% 是 BF、100% 是 FF。HEX 也有含透明度的 4 位縮寫，#0AF8 等於 #00AAFF88，透明度是 136÷255≈0.53。
色彩對比與無障礙
顏色選得漂亮，還要看得清楚。淺灰字配白底在設計稿上很有質感，但視力較弱的人、長輩，或在戶外陽光下看手機的人可能完全讀不到。WCAG（網頁內容無障礙指引）用「對比值」來衡量文字和背景的差距，算法分兩步。
第一步是算出每個顏色的相對亮度。把 R、G、B 各除以 255 得到 c，若 c ≤ 0.04045 就取 c÷12.92，否則取 ((c＋0.055)÷1.055) 的 2.4 次方，再依人眼對三種顏色的敏感度加權：
相對亮度 L ＝ 0.2126×R ＋ 0.7152×G ＋ 0.0722×B綠色的權重最高，因為人眼對綠光最敏感。以 #2A62F0 來算，三個通道轉換後約是 0.0232、0.1221、0.8714：
L ＝ 0.2126×0.0232 ＋ 0.7152×0.1221 ＋ 0.0722×0.8714
≈ 0.0049 ＋ 0.0874 ＋ 0.0629 ≈ 0.1552第二步是把兩個顏色的亮度代入：
對比值 ＝ (較亮的 L ＋ 0.05) ÷ (較暗的 L ＋ 0.05)白色的相對亮度是 1、黑色是 0，所以黑配白是 (1＋0.05)÷(0＋0.05)＝21，這是對比值的上限。#2A62F0 配白底則是 1.05÷0.2052≈5.117，無條件捨去到小數 2 位是 5.11（捨去而不進位，才不會把差一點點的顏色誤判為合格）。
WCAG 2.x 的門檻如下：
| 等級 | 一般文字 | 大字（24px 以上，或 18.66px 以上的粗體） |
|---|---|---|
| AA | 至少 4.5:1 | 至少 3:1 |
| AAA | 至少 7:1 | 至少 4.5:1 |
4.5:1 是多數網站採用的基本標準，意思是文字和背景的亮度差距，足以讓視力約 0.5（20/40）的人也能閱讀。對照幾個例子：
#2A62F0配白底約 5.11:1：通過 AA，未達 AAA。#2A62F0配黑底約 4.10:1：一般文字不合格，只能用在大字。- 灰色
#767676配白底約 4.54:1：剛好通過 AA，是白底上合格的最淺灰色之一；再淺一階的#777777只有約 4.47:1，就不合格了。 - 純紅
#FF0000配白底約 3.99:1：看起來很醒目，但當一般文字其實不合格。 - 深灰
#595959配白底約 7.00:1：可以達到 AAA。
最後一個提醒：對比值只衡量亮度差，不保證色覺辨識有困難的人分得出兩種顏色。紅色與綠色即使對比合格，也不要只靠顏色傳達「錯誤」與「正確」，最好同時加上文字或圖示。
小結
- HEX 和 RGB 是同一組數字的兩種寫法：
#RRGGBB每兩位是 00 到 FF，換成十進位就是 0 到 255。 - HSL 用色相、飽和度、亮度描述顏色，適合調整深淺與製作配色。
- 透明度可以寫成 rgba()、hsla()、
rgb(r g b / a%)或 8 位 HEX。 - 一般文字與背景的對比至少要 4.5:1，才符合 WCAG AA。
下次拿到一個色碼不知道怎麼換，或是不確定字夠不夠清楚，打開色碼轉換器貼上色碼，就能同時看到三種格式、可複製的 CSS 寫法與對比檢查結果。