顏色格式完整解說：HEX、RGB、HSL、OKLCH 等格式
同一個顏色有十幾種寫法。這裡說明每種格式的意思、什麼時候該用，以及同一個顏色在各種格式下的樣子。
閱讀時間約 1 分鐘
一個顏色，所有格式
下面的數值描述的都是同一個顏色，而且是即時計算的。點進轉換器就能試試你自己的顏色。
| 格式 | 值 |
|---|---|
| HEX | |
| RGB | |
| HSL | |
| HWB | |
| Lab | |
| LCH | |
| OKLab | |
| OKLCH | |
| Display P3 | |
| CMYK |
HEX 與 RGB
HEX 把紅、綠、藍各寫成兩位十六進位數字，從 00 到 ff。三位數的 HEX 是縮寫，每一位會重複一次；八位數則多了透明度。rgb() 把同樣的通道寫成 0 到 255 的數字。兩者描述的都是 sRGB，是相容性最好、最保險的選擇。
HSL 與 HWB
HSL 描述色相、飽和度和亮度，HWB 描述色相、白度和黑度。它們很好讀懂，但亮度和人眼的感受不一致，所以相同的數字在不同色相下看起來可能差很多。
LAB、LCH、OKLAB 與 OKLCH
這些格式是依照人類視覺設計的。LAB 和 LCH 來自 CIELAB。OKLAB 和 OKLCH 是較新的改良版，色相更穩定，藍色尤其明顯。設計系統、色階，以及任何需要亮度一致的地方，都建議使用 OKLCH。
CMYK
CMYK 描述青、洋紅、黃、黑四種油墨。這裡顯示的換算是與裝置無關的簡單公式。實際印刷效果取決於紙張、油墨和印表機的色彩描述檔，所以只把它當作起點，並向印刷廠索取描述檔。
Swift、Flutter 與 Android
行動平台有自己的語法。SwiftUI 和 UIKit 用 0 到 1 的數字表示紅、綠、藍。Flutter 和 Android 則用 32 位元的 ARGB 數字，前兩位十六進位數字是 Alpha 通道。
| 格式 | 值 |
|---|---|
| SwiftUI | |
| UIKit | |
| Flutter / Compose | |
| Android XML |
常見問題
CSS 裡應該用哪種顏色格式？
需要最廣的相容性時用 HEX 或 rgb()；設計 token、色階和廣色域顏色則用 OKLCH。目前所有主流瀏覽器都支援 OKLCH。
HEX 和 RGB 有什麼差別？
意義上沒有差別。HEX 用十六進位寫每個通道，rgb() 用十進位。#ff5733 和 rgb(255 87 51) 是同一個顏色。
為什麼 Android 色碼的順序不一樣？
Android 和 Flutter 使用 ARGB，Alpha 放在最前面：0xFFFF5733 就是完全不透明的 #ff5733。CSS 的八位數 HEX 則把 Alpha 放在最後。