透過 MCP 連接 →

輸入計算

輸入 3 位數或 6 位數的 Hex 色碼,開頭的 # 可加可不加。

數學公式

廣告

結果

RGB 色彩
rgb(52, 152, 219)
from #3498DB
紅 (R) 52
綠 (G) 152
藍 (B) 219
標準化 Hex 色碼 #3498DB
CSS rgb(52, 152, 219)

什麼是 Hex 轉 RGB 轉換器?

Hex 色碼是一組六位數的十六進位色彩表示法,寫成 #RRGGBB 的格式。其中每兩位數字代表一個加法混色通道:紅(Red)、綠(Green)、藍(Blue)。這個轉換器會讀取你輸入的 Hex 色碼,並回傳對應的 RGB 三組數值,每個通道都是 0 到 255 之間的整數。RGB 正是 CSS、設計軟體與多數螢幕底層所採用的格式,因此在兩者之間轉換,是網頁工程師與設計師每天都會碰到的工作。

使用方法

在輸入框中鍵入 Hex 色碼即可——有沒有開頭的 # 都可以。無論是完整的六位數寫法(#3498DB),或是三位數的縮寫(#39C,會自動展開為 #3399CC),都能正確辨識。工具會自動清除多餘字元、把色碼標準化,並即時顯示紅、綠、藍三色數值,同時附上即時色塊預覽與可直接複製貼上的 CSS 語法。

換算公式說明

十六進位(Hexadecimal)是以 16 為基底,使用數字 0–9 與字母 A–F(其中 A=10 … F=15)。每兩個字元為一組,換算規則為 數值 = 第一位數字 × 16 + 第二位數字。因此 FF = 15 × 16 + 15 = 255,也就是最大值;而 00 = 0,則是最小值。這三組數對會各自獨立解碼成 R、G、B 三個數值。

$$(R,\,G,\,B) = \bigl(\,\text{hex}_{[1,2]},\ \text{hex}_{[3,4]},\ \text{hex}_{[5,6]}\,\bigr)_{16}$$

$$\text{where}\quad \left\{ \begin{aligned} R &= \left(\text{Hex Code}\ \text{digits 1-2}\right)_{16} \\ G &= \left(\text{Hex Code}\ \text{digits 3-4}\right)_{16} \\ B &= \left(\text{Hex Code}\ \text{digits 5-6}\right)_{16} \end{aligned} \right.$$

圖示將六位十六進位代碼拆分為三組兩位數,分別對應到紅、綠、藍值
一個十六進位代碼拆分為三對,每對轉換為 0-255 的通道值。

實際範例

#3498DB 為例。紅色那組是 34 = \(3 \times 16 + 4 = 52\)(52)。綠色那組是 98 = \(9 \times 16 + 8 = 152\)(152)。藍色那組是 DB = \(13 \times 16 + 11 = 219\)(219)。換算結果為 rgb(52, 152, 219)——一款相當受歡迎的扁平化設計藍。

單個十六進位顏色樣本,其轉換後的紅、綠、藍通道分解以三條彩色條顯示
實例:一個十六進位代碼以色塊形式顯示,旁邊是其 R、G、B 通道。

常見問題

支援像 #FFF 這樣的縮寫色碼嗎?支援。三位數的色碼會把每個位數各自重複一次來展開,所以 #FFF 會變成 #FFFFFF = rgb(255, 255, 255)。

那透明度(Alpha)通道呢?本工具處理的是三通道的 RGB 色彩。若輸入帶有 Alpha 的 8 位數 Hex 色碼,會只取前六位數來進行色彩換算。

要怎麼從 RGB 反推回 Hex?把每個通道的數值各自格式化成兩位數的十六進位數,再接在 # 後面串接起來即可。例如 52、152、219 → 34、98、DB → #3498DB

最後更新: