HEX、RGB 色碼是什麼？看懂顏色代碼與互轉教學
設計、做網頁常看到 #FF5733 或 rgb(255,87,51) 卻搞不懂？這篇用白話講清楚 HEX、RGB、HSL 是什麼、怎麼看、差在哪，以及怎麼線上互轉，設計師和前端新手都看得懂。
本文部分連結為聯盟連結，透過連結購買不會增加你的費用。
做設計、寫網頁時，一定會碰到 #FF5733 或 rgb(255, 87, 51) 這種顏色代碼。它們看起來像亂碼，其實規則很單純，搞懂之後選色、調色、跨工具對色都會順很多。這篇用白話講清楚。
顏色代碼在做什麼？
螢幕上的每個顏色，都是用紅(R)、綠(G)、藍(B)三種光依不同強度混出來的。顏色代碼就是「記錄這三種光各多強」的方式，只是有不同的寫法。
HEX：網頁最常用的寫法
HEX 用十六進位表示，格式是 # 加 6 位數，每兩位代表 R、G、B，從 00（最弱）到 FF（最強）：
#FF5733
↑ ↑ ↑
FF 57 33
紅 綠 藍
→ 紅最強、中等綠、少量藍 = 橘紅色
#FFFFFF 是白色（三色全開）、#000000 是黑色（全關）。HEX 精簡好複製，CSS 最常用。
RGB：比較直覺的寫法
RGB 用十進位的三個數字（0～255）表示同一件事：
rgb(255, 87, 51) ← 跟 #FF5733 是同一個顏色
數字越大該色光越強。它比 HEX 直覺、好懂，要加透明度時可用 rgba(255, 87, 51, 0.5)（最後是 alpha 透明度）。
HSL：最貼近「直覺調色」
HSL 用**色相(H)、飽和度(S)、亮度(L)**描述顏色：
- 色相：是什麼顏色（紅、橙、黃…0～360 度）
- 飽和度：鮮豔還是灰
- 亮度：偏亮還是偏暗
它最貼近人調色的直覺——想讓顏色「更淡一點」「亮一點」「換個色系」，調 HSL 比調 RGB 容易得多。做同色系的深淺變化特別好用。
三者的關係
| 寫法 | 範例 | 特點 |
|---|---|---|
| HEX | #FF5733 |
精簡、CSS 常用 |
| RGB | rgb(255,87,51) |
直覺、可加透明度 |
| HSL | hsl(11,100%,60%) |
最好「直覺調色」 |
它們是同一個顏色的三種寫法，可以互相轉換。
怎麼互轉？
手動換算麻煩又易錯，最快是用 KitBao 的色碼轉換工具——用取色器或輸入任一種（HEX／RGB／HSL），立刻同時看到另外兩種值，附即時預覽、一鍵複製貼到 CSS 或設計軟體。
為什麼要懂這個？
- 跨工具對色：設計軟體選的色，要記下 HEX／RGB 才能精準搬到網頁、簡報，不會跑色。
- 品牌色一致：把品牌主色的色碼記下來，所有素材都用同一組，視覺才統一。
做設計、做品牌時，把色碼記清楚很重要——可搭配 Logo 製作工具、Canva 替代方案一起用。
講白了
顏色代碼就是「記錄紅綠藍三色強度」的不同寫法：HEX（#FF5733）精簡、CSS 常用；RGB 直覺、可加透明度；HSL 最適合直覺調色。 三者是同一顏色、可互轉。要換算時丟進色碼轉換工具一鍵搞定，跨工具對色、維持品牌色一致都靠它。
常見問題
HEX 色碼（像 #FF5733）是什麼意思？
HEX 是用十六進位表示顏色的代碼，格式是 # 加 6 位數，每兩位代表紅(R)、綠(G)、藍(B)的強度，從 00（最弱）到 FF（最強）。例如 #FF5733：FF=紅最強、57=中等綠、33=少量藍，混出來就是一個橘紅色。它和 RGB 其實是同一個顏色的兩種寫法，網頁 CSS 最常用 HEX。
HEX 和 RGB 有什麼不同？哪個比較好？
兩者表示的是同一個顏色，只是寫法不同。RGB 用十進位的三個數字（如 rgb(255,87,51)）較直覺、好懂；HEX 用十六進位（#FF5733）較精簡、好複製，網頁設計最常用。沒有誰比較好，看場合：要直覺調整用 RGB，要精簡貼進 CSS 用 HEX。需要透明度時 RGB 有 rgba() 可加 alpha。
HSL 又是什麼？
HSL 是另一種顏色表示法，用色相(Hue)、飽和度(Saturation)、亮度(Lightness)三個值描述顏色，比 RGB 更貼近人「直覺調色」的方式——想讓顏色更亮、更淡、換個色系時，調 HSL 比調 RGB 直覺得多。設計上做「同色系深淺變化」用 HSL 特別方便，它和 HEX、RGB 一樣可以互轉。
怎麼把 HEX 轉成 RGB（或反過來）？
可以手動換算（每兩位十六進位轉成十進位），但容易出錯也麻煩。最快是用線上色碼轉換工具，輸入任一種（HEX／RGB／HSL），立刻同時得到另外兩種值並附預覽，一鍵複製貼到 CSS 或設計軟體即可。