# HEX 色碼完整解說：#RRGGBB 是怎麼運作的

像 #1e90ff 這樣的 HEX 色碼由三組十六進位數字組成：分別代表紅、綠、藍光的強度，每組從 00（沒有）到 ff（全滿，255）。加上第四組就能設定不透明度：80 約等於 50%，ff 代表完全不透明。

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

## HEX 色碼怎麼運作

螢幕上的每個顏色都是用紅、綠、藍三種光混出來的。HEX 色碼在 # 符號後面，用兩個字元寫出每種光的強度：先紅、再綠、最後藍，這就是 #RRGGBB 的格式。

這些字元是十六進位，也就是用 16 個數字來計數：0 到 9，接著是 a（10）、b（11）、c（12）、d（13）、e（14）和 f（15）。一組兩位數涵蓋 256 個值，從 00（0）到 ff（255），剛好就是 rgb() 的範圍。

要把一組數字換算成一般的十進位數字，就把第一位乘以 16，再加上第二位。下面是 CSS 顏色 dodgerblue，也就是 #1e90ff，先列出四種格式，再逐組換算。

| 格式 | 值 |
| --- | --- |
| HEX | #1e90ff |
| RGB | rgb(30 144 255) |
| HSL | hsl(209.6 100% 55.88%) |
| OKLCH | oklch(65.201% 0.19012 253.205) |

| 數字組 | 通道 | 計算 | 數值 |
| --- | --- | --- | --- |
| 1e | 紅 | 1 × 16 + 14 | 30 |
| 90 | 綠 | 9 × 16 + 0 | 144 |
| ff | 藍 | 15 × 16 + 15 | 255 |

所以 #1e90ff 就是 rgb(30, 144, 255)：一點紅、相當多的綠、滿格的藍，加起來是明亮的天藍色。三組各 256 個值，總共能組合出 16,777,216 種顏色。

## 三位數與四位數的 HEX 縮寫

如果每組的兩位數字都相同，就可以每組只寫一次。#ffcc00 可以寫成 #fc0，瀏覽器會把每一位重複還原。#1e90ff 沒有縮寫，因為 1e 和 90 不是重複的數字組。

縮寫只能表示約 1,670 萬種顏色中的 4,096 種。四位數的版本用同樣方式加上不透明度，所以 #f008 等於 #ff000088。

| 縮寫 | 完整寫法 | 顏色 |
| --- | --- | --- |
| #fff | #ffffff | 白色 |
| #000 | #000000 | 黑色 |
| #f00 | #ff0000 | 紅色 |
| #fc0 | #ffcc00 | 暖黃色 |
| #abc | #aabbcc | 灰藍色 |
| #f008 | #ff000088 | 不透明度 53% 的紅色 |

## HEX 透明度：含 Alpha 的八位數 HEX

八位數的色碼多了第四組，代表 Alpha，也就是不透明度：#RRGGBBAA。00 是完全透明，ff 是完全不透明。目前所有主流瀏覽器的 CSS 都支援這種寫法，也支援四位數的 #RGBA 縮寫。

計算方式是把不透明度乘以 255，四捨五入成整數，再轉成十六進位。50% 得到 127.5，四捨五入為 128，寫成 80。下面是套用在 #1e90ff 上的完整對照表。

| 不透明度 | Alpha（0–255） | HEX 數字組 | 加上 Alpha 的 #1e90ff |
| --- | --- | --- | --- |
| 100% | 255 | ff | #1e90ffff |
| 95% | 242 | f2 | #1e90fff2 |
| 90% | 230 | e6 | #1e90ffe6 |
| 85% | 217 | d9 | #1e90ffd9 |
| 80% | 204 | cc | #1e90ffcc |
| 75% | 191 | bf | #1e90ffbf |
| 70% | 179 | b3 | #1e90ffb3 |
| 65% | 166 | a6 | #1e90ffa6 |
| 60% | 153 | 99 | #1e90ff99 |
| 55% | 140 | 8c | #1e90ff8c |
| 50% | 128 | 80 | #1e90ff80 |
| 45% | 115 | 73 | #1e90ff73 |
| 40% | 102 | 66 | #1e90ff66 |
| 35% | 89 | 59 | #1e90ff59 |
| 30% | 77 | 4d | #1e90ff4d |
| 25% | 64 | 40 | #1e90ff40 |
| 20% | 51 | 33 | #1e90ff33 |
| 15% | 38 | 26 | #1e90ff26 |
| 10% | 26 | 1a | #1e90ff1a |
| 5% | 13 | 0d | #1e90ff0d |
| 0% | 0 | 00 | #1e90ff00 |

```css
.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}
```

有兩個要注意的地方。第一，80 是 255 中的 128，也就是 50.2%，不是剛好 50%：HEX 的 Alpha 只有 256 階，所以大多數整數百分比都只是近似值。第二，Android 把 Alpha 放在最前面。在 Android 的顏色資源裡，#801e90ff 等同於 CSS 中的 #1e90ff80。

## 如何用眼睛讀懂 HEX 色碼

不必換算也能大致猜出顏色。只要看每組的第一位數字，因為幾乎所有資訊都在那裡。

| CSS 名稱 | HEX | RGB | 怎麼讀 |
| --- | --- | --- | --- |
| tomato | #ff6347 | 255, 99, 71 | 紅色全滿，綠和藍各有一些：偏暖的淺紅色 |
| gold | #ffd700 | 255, 215, 0 | 紅和綠高，沒有藍：黃色 |
| chocolate | #d2691e | 210, 105, 30 | 紅色領先，綠色一半，藍色很低：橘棕色 |
| darkturquoise | #00ced1 | 0, 206, 209 | 綠和藍高，沒有紅：青色 |
| dodgerblue | #1e90ff | 30, 144, 255 | 藍色領先，綠色居中：天藍色 |
| mediumorchid | #ba55d3 | 186, 85, 211 | 紅和藍高，綠色低：紫色 |
| teal | #008080 | 0, 128, 128 | 綠和藍各一半：深青色 |
| navy | #000080 | 0, 0, 128 | 只有藍，強度一半：深藍色 |
| slategray | #708090 | 112, 128, 144 | 三者接近，藍色稍高：藍灰色 |

- 第一位數字最大的，就是主導的光。#d2691e 的紅是 d、綠是 6、藍是 1，所以是橘棕色。
- 兩個通道都高時會混色：紅加綠是黃，綠加藍是青，紅加藍是洋紅或紫色。
- 三組數字相同就是灰色。#333333 是深灰，#999999 是淺灰。三組接近但不完全相同，例如 #708090，會得到偏灰、低調的顏色。
- 數字整體偏高是淺色，偏低是深色。三組都在 c0 以上時，顏色很淡；三組都在 30 以下時，顏色非常深。
- 同樣的數字，綠色看起來比藍色亮得多。#00ff00 的 OKLCH 亮度是 0.866，#0000ff 只有 0.452。

## 為什麼 #808080 不是中間灰

#808080 在數字上剛好位於正中間：每個通道都是 255 中的 128。但它看起來並不在黑與白的正中間。它的 OKLCH 亮度是 0.600，看起來大約在往白色走 60% 的位置。

HEX 數值已經用 sRGB 曲線編碼過，這條曲線大致貼近人眼，但並不精確。#808080 發出的光約為白色的 21.6%，而感知模型認為視覺上的中點更暗：OKLCH 是 #636363，CIELAB 是 #777777。

| 灰色 | 說明 | OKLCH L | 白底對比 | 黑底對比 |
| --- | --- | --- | --- | --- |
| #808080 | 數值中點，128 | 0.600 | 3.95:1 | 5.32:1 |
| #777777 | CIELAB 中點，L* 50 | 0.569 | 4.48:1 | 4.69:1 |
| #767676 | 在白底達到 4.5:1 的最淺灰色 | 0.566 | 4.54:1 | 4.62:1 |
| #636363 | OKLCH 中點，L 0.5 | 0.500 | 6.01:1 | 3.50:1 |

這對文字很重要。白底上的 #808080 灰字對比只有 3.95:1，內文不符合 WCAG AA。#767676 是能通過 4.5:1 的最淺灰色，再淺一階的 #777777 就只有 4.48:1，已經不合格。

## 大寫還是小寫，要不要加 #

HEX 色碼不分大小寫。#1E90FF、#1e90ff 和 #1E90ff 在 CSS、SVG 和設計工具中都是同一個顏色。選定一種寫法並在各處統一，這樣搜尋程式碼時才能找到所有用到的地方。CSS 中最常見的是小寫。

# 符號是 CSS 語法的一部分，不屬於顏色本身。Figma 和許多設計工具顯示色碼時不加 #，程式語言則常寫成帶 0x 前綴的數字，例如 Flutter 的 Color(0xFF1E90FF)，開頭是 Alpha 數字組。

## 如何找出螢幕上顏色的 HEX 色碼

用滴管工具：它會讀取游標下方的顏色並顯示色碼。這些工具都免費，而且大多已經內建。

- Chrome 和 Edge：按 F12 開啟開發人員工具，在「樣式」面板點任一個顏色方塊，再用滴管圖示從頁面上取色。
- PickShade：首頁的取色器在 Chrome 和 Edge 中有滴管按鈕，可以從螢幕上任何地方取色。
- Windows：安裝 Microsoft PowerToys，按 Win + Shift + C 開啟色彩選擇器。
- macOS：從「應用程式」的「工具程式」開啟「數位測色計」。切換到 sRGB，再選擇「顯示方式」、「顯示數值」、「十六進位」。
- Figma、Photoshop 和大多數設計軟體：按 I 使用滴管。
- 照片或螢幕截圖：用圖片取色器開啟，點任一個像素即可。圖片會留在你的裝置上。

取到的數值可能和原始值差幾個單位，因為螢幕會套用色彩描述檔，圖片也經過壓縮。需要精確數值時，請從設計檔或 CSS 複製，而不是從螢幕截圖取色。

## 常見問題

### 什麼是 HEX 色碼？

HEX 色碼是像 #1e90ff 這樣的六位數代碼，用紅、綠、藍光的強度來描述顏色。每組十六進位數字從 00（0）到 ff（255），所以 #1e90ff 就是 rgb(30, 144, 255)。

### 怎麼替 HEX 色碼加上透明度？

在最後加上第四組數字：#RRGGBBAA。把不透明度乘以 255，四捨五入後轉成十六進位，所以 50% 是 80，25% 是 40，75% 是 bf。例如 #1e90ff80 就是不透明度約 50% 的 dodgerblue。

### 50% 不透明度的 HEX 是多少？

50% 不透明度在 HEX 中是 80，例如半透明的黑色寫成 #00000080。80 等於 255 中的 128，也就是 50.2%，因為 HEX 的 Alpha 只有 256 階，剛好 50% 落在 7f 和 80 之間。

### HEX 和 RGB 有什麼差別？

顏色本身沒有差別，只是寫法不同。HEX 用十六進位的數字組寫出紅、綠、藍的值，rgb() 則用 0 到 255 的十進位數字，所以 #ff6347 和 rgb(255, 99, 71) 是同一個番茄紅。

### HEX 色碼有分大小寫嗎？

沒有。#FF6347、#ff6347 和 #Ff6347 在 CSS、HTML、SVG 和設計工具中都是同一個顏色。大多數 CSS 專案用小寫，但只要保持一致，哪種寫法都可以。

### 中間灰的 HEX 色碼是多少？

#808080 是數值上的中點，但看起來比一半更亮，OKLCH 亮度為 0.600。看起來剛好介於黑白之間的灰色，落在 #636363（OKLCH L 0.5）到 #777777（CIELAB L* 50）之間。

## 工具

- [HEX 轉 RGB 轉換器](https://pickshade.com/zh-tw/convert/hex-to-rgb)
- [附滴管的取色器](https://pickshade.com/zh-tw)
- [從圖片取色](https://pickshade.com/zh-tw/image)
- [CSS 顏色名稱](https://pickshade.com/zh-tw/css-colors)

## 相關指南

- [顏色格式完整解說：HEX、RGB、HSL、OKLCH 等格式](https://pickshade.com/zh-tw/color-formats)
- [OKLCH 完整解說：終於和人眼感受一致的顏色格式](https://pickshade.com/zh-tw/oklch)
- [APCA 與 WCAG 2：該相信哪一種對比檢查](https://pickshade.com/zh-tw/apca-vs-wcag)