一個十六進位轉 RGB 範例展示了 CSS 十六進位色彩與其紅、綠、藍及可選的 alpha 通道值之間的關係。例如，#FF5733 是一個鮮豔的橙色，會轉換為 rgb(255, 87, 51)，其中第一對 "FF" 等於紅色 255，第二對 "57" 等於綠色 87，第三對 "33" 等於藍色 51。每一對都是一個位元組，也就是一個範圍從 00 到 255 的兩位數 base-16 數字，直接對應到螢幕、canvas API 和 CSS 樣式表所使用的三個色彩通道之一。簡寫的規則也相同：#F00 是 #FF0000 的三位數形式，會轉換為 rgb(255, 0, 0)。當包含 alpha 時，像 #FF573380 這種八位數的十六進位會解碼為 rgba(255, 87, 51, 0.502)，因為結尾的 80 十六進位等於十進位的 128，而 128 除以 255 約等於 0.502 的不透明度。這些轉換是下方每個範例的基礎，所顯示的每個數字都可以透過一個HEX to RGB Converter來驗證，該轉換器可在瀏覽器中解析 CSS 十六進位標記法。
常見十六進位代碼及其 RGB 等效值
許多實用的十六進位轉 RGB 範例來自在網頁設計、設計權杖和品牌指南中反覆出現的一小組色彩。下表將熟悉的 CSS 權杖與轉換器所回傳的精確通道值配對在一起。數字以十進位位元組表示，因為這才是樣式表、影像編輯器和 canvas API 實際使用的格式。
| CSS 十六進位 | 紅 | 綠 | 藍 | rgb() 輸出 |
|---|---|---|---|---|
| #000000 | 0 | 0 | 0 | rgb(0, 0, 0) |
| #FFFFFF | 255 | 255 | 255 | rgb(255, 255, 255) |
| #FF0000 | 255 | 0 | 0 | rgb(255, 0, 0) |
| #00FF00 | 0 | 255 | 0 | rgb(0, 255, 0) |
| #0000FF | 0 | 0 | 255 | rgb(0, 0, 255) |
| #808080 | 128 | 128 | 128 | rgb(128, 128, 128) |
| #FF5733 | 255 | 87 | 51 | rgb(255, 87, 51) |
| #4A90E2 | 74 | 144 | 226 | rgb(74, 144, 226) |
其中兩列值得仔細查看。#808080 恰好位於黑色和白色的中間，因為每個通道位元組都等於 128，也就是 0 到 255 範圍的中點。#4A90E2 是典型的「連結藍」色調：較低的紅色、中等範圍的綠色，以及較高的藍色，產生許多 UI 套件重複使用的略帶冷色調的天空色。將每一對視為獨立的位元組是預測最終色票的最快方法。
簡寫範例：#RGB 與 #RGBA 形式
當每一對都是同一個 nibble 的兩倍時，CSS 允許你使用三位數來書寫十六進位色彩。規則很簡單：每個數字依序重複。這就是為什麼使用簡寫的十六進位轉 RGB 範例非常適合用來理解展開步驟。下方顯示三個不同的簡寫輸入及其展開形式。
- #F00 展開為 #FF0000，也就是 rgb(255, 0, 0)。
- #0F8 展開為 #00FF88，也就是 rgb(0, 255, 136)。
- #0F08 展開為 #00FF0088，也就是 rgba(0, 255, 0, 0.533)，因為 0x88 等於 136，而 136 除以 255 約等於 0.533。
相同的重複規則也適用於四位數十六進位中的 alpha nibble。轉換器對 #RGBA 的處理方式與 #RGB 完全相同：先展開每個數字，再解析產生的位元組。這意味著偏好簡潔權杖的設計師可以只輸入一次 #0F08，仍然能取得精確的 rgba() 字串。解析器回傳的展開小寫形式始終是六位或八位數，因此下游系統不需要處理兩種長度。
含 Alpha 通道值的八位數十六進位範例
半透明色彩使用八位數形式，將 alpha 位元組置於最末端。幾個含 alpha 的十六進位轉 RGB 範例值得記住，因為 alpha 位元組與顯示的十進位不透明度之間的關係並不總是顯而易見。下表使用相同的橙色 #FF5733，搭配四個不同的 alpha 位元組。
| CSS 十六進位 | Alpha 位元組 | 不透明度 | rgba() 輸出 |
|---|---|---|---|
| #FF5733FF | 255 | 1.000 | rgba(255, 87, 51, 1) |
| #FF573380 | 128 | 0.502 | rgba(255, 87, 51, 0.502) |
| #FF573340 | 64 | 0.251 | rgba(255, 87, 51, 0.251) |
| #FF573300 | 0 | 0.000 | rgba(255, 87, 51, 0) |
不透明度欄位是 alpha 位元組除以 255 的結果。位元組 80（即十進位的 128）可整除得 0.502，而位元組 40 則產生 0.251。端點位元組 00 與 FF 分別恰好顯示為 0 與 1，但其他任何位元組都會顯示到小數點後第三位，並移除尾隨的零。將標準化的八位數十六進位與四捨五入的十進位一併保留，讓你能夠在不損失精度的情況下分享半透明色彩，這在設計權杖必須往返於 CSS 而不產生漂移時非常重要。
如何將任何十六進位代碼轉換為 RGB 範例
手動演練十六進位轉 RGB 範例是學習其結構的好方法，但大多數設計工作會使用轉換器來驗證輸入並格式化輸出。以下步驟說明如何使用 HEX to RGB Converter 將任何有效的 CSS 十六進位權杖轉換為完整的通道值集合。
- 貼上以 # 開頭的三位、四位、六位或八位數 CSS 十六進位色彩。例如，輸入 #4A90E2 或其簡寫等效 #49E。
- 讀取輸入欄旁顯示的標準化十六進位值、CSS rgb() 或 rgba() 字串，以及個別通道值。#49E 的展開形式將是 #4499EE，紅色 68、綠色 153、藍色 238。
- 檢查即時預覽以確認色票符合你的預期。對於半透明色彩，若需要精確的往返精度，請保留 alpha 位元組，並複製標準化的八位數十六進位，而非四捨五入的 rgba() 字串。
如果轉換器回傳錯誤而非結果，最常見的原因包括缺少井字號、位數錯誤，或是非十六進位字元（例如空格或標點符號）。修正輸入並重新載入欄位通常能立即恢復範例輸出。
逐步讀取轉換器輸出
一個完整的十六進位轉 RGB 範例包含四項資訊，共同描述一種色彩。第一項是標準化的十六進位值，始終以六位或八位小寫數字書寫，以便下游解析器不需要處理簡寫形式。第二項是 CSS rgb() 或 rgba() 字串，可直接貼入樣式表。第三項是個別通道位元組，對於 canvas API、影像處理以及分別儲存通道的設計權杖很有用。第四項是 alpha，以小數不透明度與精確位元組並列顯示。
對於範例 #4A90E2，轉換器會顯示標準化十六進位 #4A90E2、CSS 字串 rgb(74, 144, 226)，以及通道分解紅色 74、綠色 144、藍色 226。預覽會在瀏覽器中使用產生的 CSS 色彩，這能抓取明顯的通道順序錯誤，例如不小心輸入 #E2904A 而調換了紅色和藍色位元組。這種視覺檢查很重要，因為解析器不會將 #AARRGGBB 視為 CSS 色彩，也不會根據外觀重新排列位元組。
十六進位轉 RGB 範例失效之處
十六進位轉 RGB 範例在四種有效的 CSS 長度下是可靠的，但轉換器並不會解析其他工具所接受的所有簡寫形式。它不會解讀命名色彩（如 rebeccapurple）、不接受 hsl()、lab()、lch() 或 color() 函式，也不會讀取 CSS 變數、漸層或以逗號分隔的調色盤。它也不會在色彩空間之間轉換、測量對比、選擇無障礙前景色、從影像中取樣像素，或聲稱兩種色彩看起來相同。十六進位 CSS 色彩代表 sRGB 通道值，因此它們並非 Pantone 色票、CMYK 配方或實體測量值。
若需要對比度，正確的後續工具是專門的Color Contrast Checker，它能針對所選的文字與背景組合評估 WCAG 規則。若需要粗略的印刷色估計，獨立的 RGB to CMYK 工具可以將通道轉換為印刷百分比，儘管任何正式輸出仍需要受管理的色彩描述檔與打樣工作流程。每項任務都有各自的工具，因為色彩工作經常在不同表示法之間切換，而每一步的乾淨轉換能讓管線的其餘部分保持誠實。
若要建立可靠的工作流程，請複製完整的 CSS 權杖（包括井字號），確認位數符合預期，並將顯示的通道值與將使用它們的系統進行比對。如果透明度很重要，請確認來源使用 CSS 的 alpha 在後順序，而非某些舊平台所使用的 AARRGGBB 順序。當四捨五入的小數 alpha 可能損失精度時，請保留標準化的八位數十六進位，因為上方每個經過驗證的範例都依賴解析器端到端保留的位元組級精度。
若你在權衡選項，RGB to CMYK CSS Code: Convert Screen Colors for Print對此有詳細介紹。
若你在權衡選項，RGB to HEX Free, No Sign Up: A Browser Workflow對此有詳細介紹。