CSS 十六進位代碼只是三個或四個兩位數的十六進位數字，開頭加上井字號，用來編碼 sRGB 色彩的紅、綠、藍以及可選的 Alpha 通道。您所見過的每個數值 — #FFF、#000000、#FF573380 — 都只是一段精確數值配方 的簡寫：紅色多少 (0–255)、綠色多少 (0–255)、藍色多少 (0–255)，以及（選用）色彩應有多不透明 (0–1)。作為初學者，您不需要記住這些數學計算；您只需要認出四種合法格式 (#RGB、#RGBA、#RRGGBB、#RRGGBBAA)，並學會讀懂另一端輸出的結果。HEX 轉 RGB 轉換器 可一次處理全部四種格式：貼上數值，即可取得展開後的小寫十六進位代碼、各通道位元組、一段 CSS rgb() 或 rgba() 字串，以及即時預覽。一切都在當前的瀏覽器中執行，因此您的色彩資料絕不會離開這個頁面。以下是一份對初學者友善的逐步說明，介紹這四種格式的意義、轉換實際如何運作，以及如何避免最常見的初次犯錯。

hex to rgb for beginners
初學者入門：十六進位轉 RGB 友善逐步指南

CSS 十六進位代碼實際代表的意義

十六進位是 16 進位，意思是每個「數字」可以是 0–9 或 A–F，其中 A 為 10、B 為 11，依此類推到 F，也就是 15。CSS 使用這種表示法，是因為每個色彩通道剛好都容納在一個位元組 (0–255) 裡，而一個位元組正好是兩個十六進位數字。因此與其寫 rgb(255, 87, 51)，您可以改寫為 #FF5733，讓瀏覽器代替您完成位元組的計算。

W3C CSS 色彩規範 明確規定了四種合法的十六進位格式，全部都以井字號開頭：

  • #RGB — 三位數，無 Alpha
  • #RGBA — 四位數，含 Alpha
  • #RRGGBB — 六位數，無 Alpha
  • #RRGGBBAA — 八位數，含 Alpha

大寫與小寫的意義相同 (#FF5733 與 #ff5733 完全相同)，而解析器對格式非常嚴格。根據 MDN 的 hex-color 參考文件，只要出現 0–9 與 A–F 以外的字元、漏掉井字號、井字號重複、內含空白字元，或長度錯誤，都會產生無效的 CSS 代碼，而不是「自動猜測」的色彩。

簡寫 vs. 完整格式：四種合法樣式

初學者常會好奇為什麼同一種色彩可以寫成 #FFF 和 #FFFFFF。答案是重複：簡寫形式中，每個數字都會重複以形成完整的六位或八位數值。這種簡寫純粹只是美觀上的便利；底層的色彩其實完全相同。

輸入 位數 是否含 Alpha？ 展開後的形式
#FFF 3 否 #FFFFFF
#0F08 4 是 #00FF0088
#FF5733 6 否 #FF5733
#FF573380 8 是 #FF573380

展開後的形式才是瀏覽器實際在內部儲存的格式，也就是 HEX 轉 RGB 轉換器作為「標準化」結果所顯示的格式。請注意，三位數與六位數的格式並未指定 Alpha，因此在預覽時會被視為完全不透明。四位數與八位數的格式則將透明度置於字串的尾端，排在藍色之後 — 這是個小但重要的細節，我們稍後會再次提及。

在瀏覽器中執行轉換

開啟 HEX 轉 RGB 轉換器，您會看到一個輸入欄位和一個輸出面板。沒有任何資料會被上傳，結果會在您輸入合法數值後立即更新。

  1. 將以 # 開頭、三位、四位、六位或八位數形式的 CSS 十六進位色彩貼到轉換器欄位中。數值前後的空白會自動去除，但數值內部的空白則不允許。
  2. 讀取標準化後的十六進位數值，它永遠會是完整展開後的小寫形式。當您想把同一個色彩原封不動地放回 CSS 時，請複製這段結果。
  3. 讀取 CSS rgb() 或 rgba() 字串。對不透明色彩，您會得到 rgb()；一旦出現 Alpha 位元組，輸出就會切換為 rgba()，且透明度會格式化為最多三位小數。
  4. 留意個別通道位元組（紅、綠、藍，以及存在時的 Alpha），以介於 0 至 255 的整數顯示。這些就是您要貼到 canvas API 呼叫、設計代碼或測試 fixture 中的數值。
  5. 看一眼即時預覽色塊，確認解析結果符合您的預期。對於半透明色彩，Alpha 位元組會被精確保留，因此可以無損還原原始色彩。

如果輸入為空或無效，先前的轉換結果會被清除，並顯示明確的錯誤訊息 — 絕不會把舊的成功結果附加到新的數值上。若想要一份逐步搭配螢幕截圖範例的完整瀏覽器操作說明，瀏覽器實作逐步指南 以更豐富的脈絡呈現了相同的流程。

解讀輸出：通道位元組、Alpha 與 CSS rgb()

一旦轉換器解析完您的輸入，您會看到四段資訊，各自回答不同的問題。標準化 HEX 是要複製回 CSS 的正式小寫字串。通道位元組則是多數程式碼所預期的整數值 — 例如像 ctx.fillStyle = 'rgb(17,34,51)' 這樣的 canvas 呼叫，或一個 Python tuple (17, 34, 51)。CSS rgb()/rgba() 字串可以直接放進樣式表，而百分比或小數形式的 Alpha 則是同一個位元組的可讀版本。

#123 的逐步範例：

  1. 偵測到三位數，因此每位都重複：#123 → #112233。
  2. 紅色位元組 = 0x11 = 17。綠色位元組 = 0x22 = 34。藍色位元組 = 0x33 = 51。
  3. 由於沒有 Alpha 位元組，因此預覽時的不透明度視為完全不透明 (1.0)。
  4. CSS 輸出：rgb(17, 34, 51)；展開後的十六進位：#112233。

對於 Alpha，會將位元組除以 255 來得到介於 0 至 1 的不透明度。端點 0x00 會剛好等於 0，而 0xFF 會剛好等於 1。介於中間的值，例如 0x80 (位元組 128)，會以大約 0.502 的不透明度顯示 — 三位小數，並去除尾端多餘的零。精確的 0–255 位元組仍會與四捨五入後的小數並列顯示，因此您隨時都能取回原始的精確度。

常見的初學者錯誤與嚴格解析如何幫助您

新手在把十六進位轉成 RGB 時，有三個錯誤會反覆出現。第一個是忘了開頭的井字號。CSS 十六進位標記法要求必須有井字號，轉換器會直接拒絕缺少井字號的輸入，而不會悄悄幫您補上。這樣的拒絕機制能保護您，避免您在一個預期使用 rgb() 的系統中誤貼了六位數值，結果得到一個您從未要求的隱藏預設色彩。

第二個錯誤是在八位數值中顛倒 Alpha 的位置。CSS 將 Alpha 放在 #RRGGBBAA 的最後，但某些非 CSS 的色彩慣例會把不透明度放在最前面，成為 #AARRGGBB。轉換器絕不會根據視覺結果去重新排列輸入，因此如果您貼上 #80FF5733 卻期待「50% 透明度的橘色」，您會得到 Alpha 為 0x33、可見通道為 0x80、0xFF、0x57 的色彩 — 也就是淡黃綠色，而非半透明橘色。在假設數值意義之前，務必確認來源使用的是 CSS 的 Alpha 在後的順序。

第三個錯誤是當色彩需要精確往返還原時，卻信任了四捨五入後的小數 Alpha。0.502 這類小數易於閱讀，但同一個位元組若以 #FF573380 儲存，則每次都能重現完全相同的像素。只要透明度很重要且目標是完全一致的還原，請保留標準化的八位數 HEX。顯示上的四捨五入絕不會改變原始的標準化數值，因此您可以放心地把八位數字串視為最權威的來源。

何時該使用 rgb()、rgba() 或標準化 HEX

請依色彩接下來的用途來選擇格式。CSS 樣式表、內嵌 style 屬性以及大多數設計工具都直接接受 rgb() 和 rgba()，因此對日常的樣式設定而言，轉換後的 CSS 字串是最方便的選擇。如果您要把數值餵給 JavaScript、canvas 操作、伺服器端影像函式庫，或單元測試，那麼您真正需要的是整數通道位元組 — 請把這些直接貼到您的程式碼中，而不是去解析 CSS 字串。

當您需要往返還原半透明色彩、把數值交給同事，或存入設計代碼檔案時，請保留標準化的小寫 HEX。標準化格式會逐位元組精確保留所有資訊，包括 Alpha，因此沒有任何隱藏的四捨五入。對於不透明色彩，兩種格式皆可；差別只在透明度出現時才有意義。如果您想在學習過程中快速瀏覽常見的品牌與 UI 數值，常見十六進位代碼參考 將熟悉的色彩與其通道位元組並列，方便快速對照。