HEX 轉 RGB：十六進位顏色碼轉換為螢幕顯示數值
在網頁設計與數位繪圖中，顏色通常以兩種格式呈現：HEX（十六進位） 與 RGB（紅綠藍數值）。本頁面提供一個即時轉換工具：輸入像 #4f46e5 或 #abc 這樣的 HEX 色碼，立即得到對應的 RGB 三通道整數（0–255）。其核心價值在於，HEX 碼本質上只是 RGB 三個 8 位元通道的十六進位縮寫，而這個轉換過程是純數學的、可逆且無誤差的。
為什麼要特別做 HEX 轉 RGB？
HEX 碼在 CSS 中是常見的顏色表示法，使用六位數 #RRGGBB 或三位數簡寫 #RGB，每個通道以基數 16 的兩位數表示。然而，許多程式環境（如 JavaScript canvas API、某些設計軟體、色彩計算公式）需要的是 RGB 的十進位整數。這個頁面上，當你輸入 #4f46e5，紅、綠、藍通道分別以 16 進位讀取後轉為十進位：4f = 79，46 = 70，e5 = 229。因為轉換是線性且沒有四捨五入，結果完全可逆回原始 HEX 碼。
不同於一般顏色轉換器，這個頁面只處理六位或三位 HEX（不含 Alpha 通道）。如果你嘗試輸入八位數（例如 #4f46e580），工具會顯示錯誤訊息：「Enter a hex color like #4f46e5 or #abc.」因為該頁面專注於純 HEX 到 RGB 的轉換，不處理包含透明度的 RGBA。所有運算都在瀏覽器端進行，你的資料不會被上傳或儲存。
輸入格式與邊界情況
接受的格式
- 六位數：
#RRGGBB，例如#1E90FF、#ff6600。開頭的#是選用的，1E90FF也會被接受。 - 三位數簡寫：
#RGB，例如#abc。每個色碼會自動擴展為六位數：#aabbcc再進行轉換。 - 大小寫不拘：
#FF0000與#ff0000視為相同。
錯誤處理
若輸入無效（例如包含 G、H 等非十六進位字元，或位數不對），下方會即時顯示提示文字：「Enter a hex color like #4f46e5 or #abc.」所有顏色欄位（包括 RGB、HSL、HSV、CMYK、LAB）會恢復為預設或保持空白。
與其他格式的即時連動
除了顯示 RGB 三數值，頁面同時更新所有其他色彩空間的對應值。例如，輸入 #ff6600 會得到 RGB(255, 102, 0)，HSL 也會自動計算。編輯任何一個欄位（如直接調整 RGB 滑桿），HEX 欄位也會同步更新。這種雙向即時轉換讓設計工作流程更流暢。
HEX 與 RGB 的數學對應關係
要理解轉換，需先了解十六進位計數法。每個 HEX 碼由紅、綠、藍三組兩位數組成，每組的值範圍為 00 到 FF（十進位 0 到 255）。其計算方式為：
R = 第一位數 * 16 + 第二位數
G = 第三位數 * 16 + 第四位數
B = 第五位數 * 16 + 第六位數
例如 #4f46e5：
- 紅：
4×16 +f（即 15）= 64 + 15 = 79 - 綠：
4×16 +6= 64 + 6 = 70 - 藍：
e（14）×16 +5= 224 + 5 = 229
三位數簡寫 #abc 先擴展成 #aabbcc：
a（10）×16 +a（10）= 160 + 10 = 170- 同理 b、c 分別得到 187、204
這個轉換是完全可逆的：如果你有 RGB(79, 70, 229)，將每個數值轉為兩位十六進位（79 = 0x4F），再組合回來就是 #4f46e5。這種確定性確保你在開發中不會因為四捨五入而遺失色彩資訊。
誰需要這個工具？
- 前端開發者：將 CSS 中的 HEX 碼轉為 RGB 數組，用於 JavaScript 操作 DOM 顏色、Canvas 繪圖、或動態風格設定。例如
element.style.color = 'rgb(79, 70, 229)'比 HEX 字串更容易進行調整。 - 設計師拿到品牌色盤：品牌指南常以 HEX 提供（例如
#003366），但設計軟體（Figma、Sketch）或印刷前的 CMYK 轉換可能需要先知道 RGB 數值。 - 學生學習色彩模型：實際操作 HEX 到 RGB 的轉換，可以直觀理解「#FF0000 為什麼是紅色」，以及「為什麼 #808080 是中性灰」（R=G=B=128）。
- 遊戲與數位藝術創作者：需要精確控制每通道數值來混合顏色或調整色調，RGB 整數比 HEX 字串更適合數學運算。
常見的 HEX 顏色模式與其 RGB 對應
| 顏色名稱 | HEX 碼 | RGB 值 | 備註 |
|---|---|---|---|
| 純紅 | #FF0000 |
255, 0, 0 | 最高紅通道，無其他 |
| 純綠 | #00FF00 |
0, 255, 0 | 只亮綠通道 |
| 純藍 | #0000FF |
0, 0, 255 | 只亮藍通道 |
| 白色 | #FFFFFF |
255, 255, 255 | 所有通道最大值 |
| 黑色 | #000000 |
0, 0, 0 | 所有通道最小值 |
| 中灰 | #808080 |
128, 128, 128 | 三通道相等，位於中間 |
| 深藍 | #000080 |
0, 0, 128 | 半亮藍色 |
| 橘色 | #FFA500 |
255, 165, 0 | 紅綠混合偏紅 |
從表格可看出，所有灰色（灰階）的 RGB 三個值完全相同；而互補色對（如紅與青 #00FFFF）的 RGB 總和恰好是 255。
CSS 中何時使用 HEX，何時使用 RGB？
CSS 支援 color: #ff6600; 與 color: rgb(255, 102, 0);，瀏覽器渲染結果完全相同。以下是一些實際考量：
- HEX 較簡潔：適合手寫、無須運算的固定顏色，特別是十六進位模式容易記憶（如
#fff白色）。 - RGB 搭配透明度：若要使用 alpha 透明度，應採用
rgba()寫法（如rgba(255, 102, 0, 0.5)）。雖然 CSS 的color: rgb(255 102 0 / 0.5)也支援空格語法，但傳統 RGBA 更常見。 - 動態顏色：JavaScript 中經常以 RGB 數組為基礎進行運算（如增減亮度），此時將 HEX 轉為 RGB 是必要步驟。
- 可讀性：某些人覺得
rgb(255, 102, 0)比#ff6600更直觀知道「有多紅、多綠」。
常見問題（FAQ）
1. 為什麼輸入 #abc 會變成 #aabbcc，而不是 #a0b0c0？
因為三碼簡寫的設計目的是讓開發者以更短的方式指定顏色，但精度降低。每位重複兩次（而非補零），可獲得接近原始色調的顏色。例如 #abc 對應 #aabbcc，而不是 #a0b0c0（後者會偏暗）。這是 CSS 規格的標準行為（CSS Color Module Level 4）。
2. 我輸入 #GGG 為什麼出現錯誤？
因為 G 不是有效的十六進位數字。HEX 只接受 0-9 與 A-F（大小寫不拘）。#GGG 無法解析，工具會顯示提示訊息請你輸入正確格式。
3. 這個工具支援透明度的 RGBA 或 #RGBA 嗎？
不支援。本頁面僅處理六位或三位 HEX，對應 RGB 三通道。若要帶 Alpha 的值，請使用同網站的其他轉換器（如 HEX to RGBA）。如果輸入八位數（如 #ff000080），工具會視為無效格式。
4. 為什麼 RGB 輸出一定是整數，沒有小數？
因為每個顏色通道以 8 位元儲存（0-255），HEX 的兩位數正好對應這個範圍，轉換後必然是整數。不像 HSL 的飽和度或亮度可能以百分比出現，RGB 始終是整數。
5. 我可以複製 RGB 數值直接貼到 CSS 嗎？
可以。將頁面輸出的 79, 70, 229 放入 rgb(79, 70, 229) 即可。請注意 CSS 中要加上 rgb() 函式，並且使用逗號或空格分隔。
6. 為什麼相同色彩在不同的螢幕上看起來不同？
HEX 與 RGB 是裝置獨立的顏色定義；但螢幕的色域、亮度設定、校正狀態都會影響最終顏色。這是硬體限制，非轉換錯誤。若需要跨裝置一致，應使用 sRGB 或 ICC 色彩描述檔。