# 顏色格式完整解說：HEX、RGB、HSL、OKLCH 等格式

同一個顏色有十幾種寫法。這裡說明每種格式的意思、什麼時候該用，以及同一個顏色在各種格式下的樣子。

來源: https://pickshade.com/zh-tw/color-formats
更新於: 2026-09-28

## 一個顏色，所有格式

下面的數值描述的都是同一個顏色，而且是即時計算的。點進轉換器就能試試你自己的顏色。

| 格式 | 值 |
| --- | --- |
| HEX | #ff5733 |
| RGB | rgb(255 87 51) |
| HSL | hsl(10.59 100% 60%) |
| HWB | hwb(10.59 20% 0%) |
| Lab | lab(61.03 63.55 55.96) |
| LCH | lch(61.03 84.67 41.37) |
| OKLab | oklab(68.036% 0.17474 0.1165) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| Display P3 | color(display-p3 0.92577 0.38907 0.25797) |
| CMYK | cmyk(0% 66% 80% 0%) |

## 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 | Color(red: 1, green: 0.341, blue: 0.2) |
| UIKit | UIColor(red: 1, green: 0.341, blue: 0.2, alpha: 1) |
| Flutter / Compose | Color(0xFFFF5733) |
| Android XML | #FF5733 |

## 常見問題

### 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 放在最後。

## 工具

- [全格式色彩轉換器](https://pickshade.com/zh-tw/convert)
- [取色器](https://pickshade.com/zh-tw)
- [依色系分類的顏色名稱](https://pickshade.com/zh-tw/colors)

## 相關指南

- [HEX 色碼完整解說：#RRGGBB 是怎麼運作的](https://pickshade.com/zh-tw/hex-color-codes)
- [OKLCH 完整解說：終於和人眼感受一致的顏色格式](https://pickshade.com/zh-tw/oklch)
- [CSS color-mix() 與相對色彩語法：淺色、hover 與透明度](https://pickshade.com/zh-tw/css-color-mix)