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

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，先列出四種格式，再逐組換算。

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

三位數與四位數的 HEX 縮寫

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

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

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

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

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

.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 色碼

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

• 第一位數字最大的，就是主導的光。#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。

這對文字很重要。白底上的 #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 複製，而不是從螢幕截圖取色。

常見問題