以 #RGB、#RGBA、#RRGGBB 或 #RRGGBBAA 表示的 CSS 十六進位色彩,會直接轉換成整數的紅、綠、藍,以及選用的 alpha 通道位元組,範圍從 0 到 255,其中每兩個十六進位數字會以 16 進位讀取,而 alpha 位元組在八位數形式的尾端。HEX 轉 RGB 轉換器遵循 CSS Color Module Level 4 的十六進位標記法:開頭的井字號是必要的,只有 0–9 與 A–F 的字元是有效的,值內部的空白會被拒絕。轉換器會將簡寫透過複製每個半位元組來展開、將每對解析為 16 進位的整數位元組、格式化為可讀的 rgb() 或 rgba() 字串,並使用產生的 CSS 色彩呈現即時預覽。一切都在當前分頁中執行,從樣式表、設計 token 或單元測試貼上的色彩會全程留在裝置上。
CSS 十六進位標記法的樣貌
十六進位色彩標記法是一種簡潔的 sRGB 色彩表示方式。每個可接受的形式都以井字號開頭,後面的數字以固定順序描述通道:紅色優先、綠色次之、藍色第三,而在含有 alpha 時,alpha 排在最後。W3C CSS 色彩規範定義了正好四種有效長度,轉換器同樣接受這四種。
| 形式 | 長度 | 透明度 | 範例 |
|---|---|---|---|
| #RGB | 3 位數 | 無(視為不透明) | #2A7 |
| #RGBA | 4 位數 | 有 | #2A7F |
| #RRGGBB | 6 位數 | 無(視為不透明) | #2A7FFF |
| #RRGGBBAA | 8 位數 | 有 | #2A7FFFCC |
大寫與小寫字母意義相同,因此 #ff8800 與 #FF8800 會產生相同的輸出。轉換器會修剪值周圍的一般空白,但會拒絕值內部的空白、雙井字號、缺少井字號,以及十六進位字元集之外的字元。這種嚴格的邊界會將格式錯誤的 token 轉為明顯的錯誤,而不是悄悄猜測的顏色。
將十六進位轉換為 RGB 色彩
- 將以 # 開頭的三、四、六或八位數 CSS 十六進位色彩,貼上到轉換器的輸入欄位。
- 讀取標準化的十六進位值、CSS rgb() 或 rgba() 字串,以及個別的通道位元組(紅、綠、藍,以及在有時的 alpha)。
- 檢查即時預覽色塊,以確認通道順序與整體色相;對於半透明色彩,當需要精確的往返保真度時,請保留 alpha 位元組與標準化的八位數 HEX。
- 複製適合目標位置的格式:樣式表使用 CSS 字串,API 或 canvas 呼叫使用整數通道位元組,而需要共用精確 token 時則使用標準化的 HEX。
轉換會在你輸入或貼上時立即進行,無效的輸入會以明確的錯誤取代先前的結果,因此絕不會將過時的成功轉換顯示為新值的一部分。
解讀輸出:標準化 HEX、CSS 字串與通道位元組
一次成功的轉換會同時呈現四項有用的資訊。標準化十六進位是 CSS 規範視為標準的小寫六位數或八位數形式,因此 #ABC 會變成 #aabbcc。CSS 字串為 rgb(R, G, B) 或 rgba(R, G, B, A),可直接貼入樣式表。個別通道位元組是 API、canvas 操作、影像編輯器或設計 token 可能需要的三個整數值。即時預覽則是通道順序正確、色相符合預期的視覺確認。
示範範例:輸入 #123 為三位數簡寫形式。每個半位元組會重複,因此 #123 展開為 #112233。以 16 進位讀取各對可得紅色位元組 0x11 = 17、綠色位元組 0x22 = 34、藍色位元組 0x33 = 51。因此 CSS 輸出為 rgb(17, 34, 51)。同樣的規則也適用於 alpha:#0f08 展開為 #00ff0088,其中紅色為 0、綠色為 255、藍色為 0、alpha 位元組為 136。端點很容易記住:位元組 00 即為 0,而位元組 FF 即為 255。
Alpha 在八位數十六進位色彩中的位置
在 CSS 中,八位數十六進位色彩將 alpha 置於結尾,而非開頭。#RRGGBBAA 依序讀取為紅、綠、藍,然後才是 alpha。某些非 CSS 的色彩慣例會將不透明度置於開頭,寫成 #AARRGGBB,這在從使用不同慣例的工具複製 token 時,是常見的混淆來源。轉換器絕不會根據輸入的視覺結果重新排序,因此貼上的 #AARRGGBB 值不會被悄悄重新解讀為 #RRGGBBAA。若透明度屬於來源色彩的一部分,在假設最後一個位元組為不透明度之前,請先確認來源使用的是 CSS 的 alpha 在後慣例。
顯示的 alpha 會為了可讀性而四捨五入,但精確的位元組與標準化的八位數 HEX 仍會並列顯示。位元組與所顯示不透明度之間的關係遵循固定的除法:alpha 位元組會除以 255,以取得介於 0 與 1 之間的不透明度值。
| Alpha 位元組(十六進位) | Alpha 位元組(十進位) | 顯示的不透明度 |
|---|---|---|
| 00 | 0 | 0 |
| 80 | 128 | ≈ 0.502 |
| FF | 255 | 1 |
對於非端點的 alpha 值,可讀的 CSS 字串最多使用三位小數,並移除尾端的零,而精確的 0–255 位元組與標準化的 HEX 仍可取得。此顯示的四捨五入並不會改變原始標準化的八位數值,只會改變人讀的形式。當十進位的 alpha 無法精確表示時,保留標準化的 HEX 可保留四捨五入後小數會失去的精度。
轉換器會攔截的驗證錯誤
由於轉換器嚴格依照 CSS 十六進位標記法進行解析,其他工具可能容許的若干輸入會被標記為無效。缺少開頭 # 的會被拒絕,即使剩餘字元看似有效的十六進位字串亦然。諸如 ##FF0000 的雙井字號會被拒絕。諸如 #FF 00 00 的內嵌空白會被拒絕,不過完整值周圍的空白會被修剪。長度錯誤的字串——兩位、五位或七位——會被拒絕。0–9 與 A–F 之外的字元,包括 Unicode 的相似字元或雜散的標點,皆會被拒絕。其結果是,無效的 CSS token 會以錯誤呈現,而不是產生與作者意圖不符的猜測色彩。
轉換器亦謹守其範圍。它不會解析具名色彩(例如 rebeccapurple),不接受 hsl()、lab()、lch()、color()、系統色彩、CSS 變數、漸層或逗號分隔的調色盤。它不會在色彩空間之間轉換、不會量測對比、不會挑選無障礙前景色、不會從影像中取樣像素,也不會宣稱兩個色彩看起來相同。
讓通道值發揮作用
目標位置決定要複製哪一種輸出。對於樣式表,請將 rgb() 或 rgba() 字串直接貼入 CSS 屬性。對於 canvas 操作或預期接受整數的 JavaScript API,請複製通道位元組。對於設計 token 或共用參考資料,請複製標準化的六位數或八位數 HEX。若目標在於與另一色彩的對比,可使用獨立的色彩對比檢查器來評估 WCAG 比率。若需要印刷製程的估計值,RGB 轉 CMYK 轉換器會給出近似的 CMYK 百分比;印刷生產仍需仰賴受管理的色彩描述檔與打樣流程。
一個可靠的工作流程是:複製包含井字號的完整 CSS token,確認所需的位數皆已存在,並將顯示的通道值與將會使用它們的系統進行比對。當透明度至關重要時,請確認來源使用的是 CSS 的 alpha 在後慣例。在共用精確的半透明色彩時,請保留標準化的八位數 HEX,因為四捨五入的小數 alpha 可能會損失對像素層級保真度有影響的一點精度。
十六進位的 CSS 色彩代表 sRGB 通道值;它們不是 Pantone、CMYK、印刷油墨配方或實體量測值。在瀏覽器中呈現的預覽是通道順序與色相的有用健全性檢查,但螢幕、瀏覽器設定檔、顯示亮度、環境光,以及寬色域的工作流程,都可能讓同一個數值的 sRGB 色彩看起來不同。請將數字視為契約,將預覽視為快速的視覺確認,而不是校正過的參考依據。
若想進一步了解,請參閱跳過 Photoshop:在瀏覽器中將 RGB 轉換為 CMYK。
若想進一步了解,請參閱HEX 轉 RGB 轉換器:解析任何 CSS 十六進位標記法。
<