CSS 十六進制色碼與 CSS rgba() 值描述的是同一個 sRGB 色彩,同樣使用三個色通道加上一個可選的 alpha 位元組,只是以兩種不同的標記法撰寫——將 #RRGGBB 或 #RRGGBBAA 轉換為 rgba(R, G, B, A) 表示讀取 0–255 範圍內的三個色通道整數,以及 0 到 1 範圍內的一個 alpha 浮點數。十六進制形式將每個分量編碼為一對十六進制數字,#RRGGBBAA 中可選的尾端配對則在最末端存放 alpha;rgba() 函式則以十進位整數與分數形式的 alpha 列出相同的資料。這種轉換純粹是表示層面的:同一個色彩,不同的語法,沒有色域偏移,也沒有近似。將代碼送入 HEX to RGB Converter,即可取得正規化的小寫十六進制碼、各通道的整數位元組、可直接貼入樣式表的 CSS rgba() 字串,以及由瀏覽器以你樣式表實際會呈現的精確色彩所渲染的即時預覽。解析過程完全在本機瀏覽器中進行,因此色彩字串絕不會離開你的電腦。

how to convert hex to rgba
how to convert hex to rgba

CSS 十六進制標記法與 rgba() 函式

CSS 十六進制色彩記載於 W3C CSS Color Module Level 4 hex notation 章節,以及 MDN 的 hex-color 參考文件。它們將每個 sRGB 分量編碼為一個位元組:兩個十六進制數字,範圍從 00 到 ff(十進位 0 到 255)。若為不透明色彩,標記為六位數;若為半透明色彩,則為八位數,最後一對為 alpha。

CSS rgba() 函式以不同語法執行相同的工作。前三個參數是介於 0 與 255 之間的整數,代表紅、綠、藍;第四個參數則是介於 0(完全透明)與 1(完全不透明)之間的分數型 alpha。這兩種標記法承載完全相同的資訊——差別只在於你要把十六進制標記餵入樣式表變數,還是以 rgba() 程序性地描述該色彩。兩者之間的選擇,關乎可讀性、工具支援,以及你希望將 alpha 寫成乾淨的十進位數,還是十六進制配對。

三步驟將十六進制轉為 rgba()

  1. 將一個 CSS 十六進制色彩貼入轉換器的輸入欄。以井字號起頭,使用三、四、六或八個十六進制數字——例如 #0f08、#FF573380 或 #112233。井字號不可省略;大寫與小寫字母等效。
  2. 讀取結果面板。面板會顯示正規化的小寫十六進制碼、紅、綠、藍各通道的獨立位元組值(若有也包括 alpha),以及一個可直接貼入樣式表的 CSS rgb() 或 rgba() 字串。
  3. 將即時預覽與設計進行核對。對於半透明色彩,若需要精確的來回轉換保真度,請複製正規化的 #RRGGBBAA 十六進制碼,而不是四捨五入後的十進位 alpha——可讀的十進位數最多顯示到小數第三位,但原始位元組與十六進制碼會一併保留顯示。

接受的十六進制格式與其展開方式

CSS 十六進制色彩標記有四種形式,本轉換器全部接受。對於語法之外的輸入,它也會予以拒絕——缺少井字號、位數錯誤、井字號重複、內含空白字元,都會被標記出來,而不是默默猜測。簡寫形式透過複製每個四位元(nibble)來展開,因此每個輸入都會有完整撰寫的六位或八位等效形式,可供下游程式碼無需額外解析地直接讀取。

形式範例展開為Alpha
#RGB#123#112233完全不透明
#RGBA#0f08#00ff00880x88 = 136 / 255
#RRGGBB#FF5733#FF5733完全不透明
#RRGGBBAA#FF573380#FF5733800x80 = 128 / 255

若需反向操作——將整數通道位元組轉回十六進制標記——可參考同系列指南 Convert RGB Values to HEX Color Codes Instantly,其中以同一個色彩反向示範完整流程。

十六進制中的 Alpha 與 rgba() 中的 Alpha

將十六進制轉換為 rgba() 時,最常出錯的地方在於通道順序。CSS 將 alpha 放在最後,因此八位數標記的讀法為 #RRGGBBAA:依序為紅、綠、藍、alpha。某些非 CSS 的慣例——例如部分 Android Color 資源格式——則將相同資料儲存為 #AARRGGBB,把 alpha 位元組置於最前端。本轉換器不會重新排列輸入順序,也不會嘗試偵測你的來源所採用的慣例,因為這麼做會在無聲中改動一個本來屬於有效或無效 CSS 的標記。

當輸入包含 alpha 時,轉換器會將 alpha 位元組除以 255,以得到 rgba() 字串中顯示的十進位數。端點 00 與 ff 會分別剛好成為 0 與 1。非端點值,例如 80(十進位 128),則會以大約 0.502 的不透明度,以及精確到小數點後兩位的百分比形式顯示。三位小數的四捨五入只影響可讀的 rgba() 輸出;底層位元組與正規化的八位數十六進制碼保持完全精確,這正是為何當你日後透過建置流程或設計代碼檔案重新匯出該色彩時,複製正規化的十六進制碼可避免精度損失。

讀取通道位元組以供程式使用

轉換器將每個通道以整數而非十六進制配對形式列出,因為這通常是你的程式碼所需要的格式。canvas 的填色呼叫需要 ctx.fillStyle = "rgba(255, 87, 51, 0.502)";JSON 中的設計代碼需要 { r: 255, g: 87, b: 51, a: 0.502 };單元測試則需要三或四個可無需字串解析、直接進行精確比對的數字。整數表示法可直接對應到這些格式,無需再進行額外轉換。

當位元組級精度的來回轉換至關重要時——例如,介於從 Sass 變數產出的十六進制標記,與回傳相同 #RRGGBBAA 的 API 之間——請保留正規化的十六進制字串。可讀的十進位 alpha 雖然方便,但會造成精度損失:經過三位小數浮點數的來回轉換,在最末位小數上最壞可能產生約半個單位的誤差;在視覺回歸測試中逐像素比對標記,或將 CSS 快照與已知良好的檔案進行比對時,這樣的誤差已足以造成影響。

本轉換器略過的部分

本工具的嚴格限制正是其值得信賴的原因之一。它不會解析 CSS 命名色彩、hsl()、lab()、lch()、color()、系統色彩、CSS 自訂屬性、漸層或逗號分隔的色盤。它不會在色彩空間之間轉換、不會從影像中取樣像素、不會測量對比,也不會挑選可存取的前景色搭配。當輸入格式錯誤時,它也不會進行猜測——無效或空白的標記會以明確的錯誤訊息取代先前的結果,如此一來,過時的成功轉換結果絕不會被呈現為屬於新輸入的值。

在螢幕到印刷的工作流程中,相同的數字代表不同意義;在對比決策中,顯示的色彩只是其中一項輸入;在多通道設計系統中,你通常會希望 HSV 與 RGB 並存。使用 RGB to CMYK Converter 可獲得基本的印刷色預估值(請記住,準確的印刷生產需要受控的設定檔與打樣流程),而當你需要確認前景與背景配對確實符合 WCAG AA 或 AAA 門檻時,則應使用 Color Contrast Checker——僅憑一組印刷 rgba() 數值,本身並不保證文字的可讀性。

實例演練:#0f08

以 #0f08 為例。它是四位數的簡寫形式,因此每個四位元都會複製:0 → 00、f → ff、0 → 00、8 → 88。因此正規化後的十六進制碼為 #00ff0088。

每個兩位數分量即為一個位元組:

  • 紅:00 = 0 × 16 + 0 = 0
  • 綠:ff = 15 × 16 + 15 = 255
  • 藍:00 = 0
  • Alpha:88 = 8 × 16 + 8 = 136

作為 rgba() 的十進位 alpha 為 136 ÷ 255 = 0.53333…,顯示到小數第三位為 0.533,並移除尾端零。對應的 CSS 輸出為 rgba(0, 255, 0, 0.533),這是一個略高於半透明的可亮綠色標記。透過即時預覽,你可在該值送入樣式表或繪製呼叫之前,確認通道順序正確——綠色就是綠色,而不是紅色。

若你正在權衡各種選項,CSS Code to CMYK Chart: Map Every Named Color 對此有詳細說明。