跳至主要內容
Lizely

HEX 轉 RGB 編碼轉換器

將 CSS 十六進位顏色轉換為精確的紅、綠、藍以及可選透明度通道值。

隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。

使用方式

  1. 1.貼上一個以 # 開頭的 CSS 十六進位顏色,格式為三、四、六或八位數。
  2. 2.閱讀標準化十六進位值、CSS rgb 或 rgba 字串,以及各通道值。
  3. 3.檢查即時預覽,對於半透明顏色,若需要精確的往返精確度,請保留透明度位元組。

關於HEX 轉 RGB 編碼轉換器

Hex 轉 RGB 編碼轉換器將 CSS 十六進位顏色表示轉換為紅、綠、藍以及可選透明度值。請輸入一個以井號開頭,後接三、四、六或八位十六進位數字的顏色碼。結果會顯示擴充套件為小寫十六進位形式、每個通道的位元組值、CSS rgb() 或 rgba() 表示法,以及視覺顏色預覽。四位和八位輸入包含透明度資訊,而三位和六位輸入則不指定透明度,預覽時會被視為完全不透明。轉換過程立即執行,且完全在當前瀏覽器中進行。顏色字串不會上傳至 Lizely。

接受的語法遵循 CSS 六進位顏色表示法,而非設計應用程式可能容忍的任何縮寫形式。必須以 # 開頭。有效格式為 #RGB、#RGBA、#RRGGBB 與 #RRGGBBAA,使用數字 0 至 9 和字母 A 至 F,且值內不得有空格。大小寫字母視為相同。轉換器會移除完整值周圍的普通空白字元,但拒絕無 hash、長度錯誤、重複 hash、內含空白字元或非十六進位字母的輸入。這種嚴格的邊界確保錯誤的 CSS 令牌會清晰顯示,而非默默猜測作者本意。

短格式透過複製每個半字元來擴充套件。例如,#123 會擴充套件為 #112233,因此其聲道位元組為 17、34 與 51。同樣的規則也適用於 alpha:#0f08 會擴充套件為 #00ff0088。紅色在前、綠色次之、藍色第三,若存在 alpha 則最後為 alpha。這點很重要,因為部分八位元顏色表示法(非 CSS)會將不透明度置於最前,但 CSS 的 #RRGGBBAA 則將其置於末尾。本工具從不將 #AARRGGBB 解讀為 CSS 顏色,亦不會根據視覺結果重新排序輸入內容。

每個兩位數的組成部分都是 0 到 255 之間的整數位元組。端點 00 和 FF 會被轉換為 0 和 255。透明度位元組會被 255 除以獲得 0 到 1 之間的不透明度。為了讓 CSS 的輸出更易讀,非端點透明度值會顯示為三位小數,並移除末尾的零;精確的透明度位元組會與其一同顯示,百分比則顯示為兩位小數。因此,80 的十六進位數會被儲存為 128 位元組,並顯示為約 0.502 的不透明度,而 00 則正好是 0,FF 則正好是 1。這種顯示的四捨五入不會改變原始的八位數十六進位值。

當 API、畫布操作、圖片編輯器、測試模組或設計標籤需要獨立的整數輸入時,可使用各通道值。若風格接受 rgb() 或 rgba() 則使用 CSS 輸出。當需要精確的往返轉換,尤其是當透明度無法用小數精確表示時,請保留標準化 HEX 值。預覽在瀏覽器中使用產生的 CSS 顏色,有助於發現明顯的通道順序錯誤,但並非色彩管理參考。螢幕、瀏覽器設定、顯示亮度、環境光、廣色域工作流程可能導致相同數值的 sRGB 顏色看起來不同。

此轉換工具不解析如 rebeccapurple、hsl()、lab()、lch()、color()、系統顏色、CSS 變數、漸層或逗號分隔的色板等命名顏色。它也不會在不同色彩空間之間轉換、測量對比、選擇可讀前景、從圖片中取樣像素,或聲稱兩種顏色看起來相同。十六進位 CSS 顏色代表 sRGB 通道值;它們不是 Pantone、CMYK、印刷油墨配方或物理測量值。若需對比比,請使用 Color Contrast Checker;若需基本的印刷色估算,則可參考 RGB 至 CMYK,但請記住印刷生產需要受控的色彩配置檔與審證流程。

為確保穩定的工作流程,請複製完整的 CSS 令牌(含其雜湊值),確認預期數位數量正確,並將顯示的通道值與將會使用該值的系統進行對照。若透明度重要,請確認原始輸入使用 CSS 的透明度在後的順序。當需要精確的半透明顏色時,請保留標準化八位數 HEX 值,因為四捨五入的小數透明度可能損失少量精確度。錯誤或空值輸入會取代先前的轉換結果,因此不會出現過期的正確結果被誤認為當前值的結果。

方法與來源

解析器需要一個雜湊值以及精確的 3、4、6 或 8 共計 ASCII 個十六進位數字。三或四數位形式會重複每個半字元,然後紅、綠、藍與可選的最終透明度位元組以十六進位(base 16)解析。透明度等於其位元組除以 255;顯示文字最多顯示三位小數,同時保留精確位元組與標準化 HEX。

常見問題

接受哪些十六進位顏色格式?
轉換器接受 CSS #RGB、#RGBA、#RRGGBB 與 #RRGGBBAA 表示法。必須以 # 開頭。
三或四數位顏色如何擴充套件?
每個數字會被重複:#123 會變成 #112233,#0f08 會變成 #00ff0088。
八位數 CSS 六進位顏色中,透明度在哪裡?
透明度是 #RRGGBBAA 中的最後一位。轉換器不會將第一位視為透明度。
為何透明度以四捨五入的小數顯示?
CSS 透明度是位元組除以 255。可讀的 rgba 值最多顯示三位小數,而精確的 0-255 透明度位元組與標準化 HEX 會同時顯示。
轉換工具會上傳我的顏色資料嗎?
不會。解析、格式化、驗證與預覽渲染皆在當前瀏覽器中本機執行。

色彩工具 使用指南

查看全部