HEX 轉 RGB 編碼轉換器
將 CSS 十六進位顏色轉換為精確的紅、綠、藍以及可選透明度通道值。
隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。
使用方式
- 1.貼上一個以 # 開頭的 CSS 十六進位顏色,格式為三、四、六或八位數。
- 2.閱讀標準化十六進位值、CSS rgb 或 rgba 字串,以及各通道值。
- 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 會同時顯示。
- 轉換工具會上傳我的顏色資料嗎?
- 不會。解析、格式化、驗證與預覽渲染皆在當前瀏覽器中本機執行。
相關工具
- 將 RGB 轉為十六進位立即將 RGB 轉為 HEX,並反向轉為 RGB,搭配即時色彩預覽與 HSL,全部都在瀏覽器中完成。
- RGB 到 CMYK 轉換工具立即在瀏覽器中將 RGB 螢幕顏色轉換為 CMYK 印刷百分比(並反向轉換),簡單快速。
- 色彩對比檢查器即時檢查任意文字色彩與背景色彩組合是否符合 WCAG AA 與 AAA 對比規則。
- 色彩調色盤生成器選擇一個基底色彩,即可獲得相應的調色盤——補色、鄰近色、三色、以及其他搭配。
- CMYK 轉為 RGB預覽未校準的 CMYK 百分比,作為大約的螢幕 RGB 顏色與十六進位值。
- 色彩差異計算器比較兩種不透明的 HEX 色彩,並以基於標準的 CIEDE2000 值進行分析,檢視每一個 D50 CIELAB 坐標。
色彩工具 使用指南
查看全部- Hex to RGB Converter Alternative for Strict CSS Hex (英文原文)
- Hex to RGB for Accessibility Contrast: Pre-Check Workflow (英文原文)
- HEX to RGB Converter: Parse Any CSS Hex Notation (英文原文)
- How to Convert Hexadecimal to RGB Colors in Your Browser (英文原文)
- Convert Hexadecimal to RGB Channel Bytes and Alpha (英文原文)
- How to Convert Hex to RGBA and Get the CSS rgba() Output (英文原文)
- How to Convert Hex to RGB Manually With One Shortcut (英文原文)
- How to Convert Hex to RGB: A Practical Step-by-Step Guide (英文原文)
- Convert Hex Code to RGB in Illustrator in One Click (英文原文)
- Convert RGB to HEX Color Codes Instantly in Your Browser (英文原文)
- Color Palette Generator on Android: A Browser Guide (英文原文)
- Choosing the Right Approach to Mix Two HEX Colors (英文原文)
- Gradient Generator Explained: How the CSS Gets Built (英文原文)
- Color Contrast Checker Free, No Sign Up (英文原文)
- Web Safe Colors Explained: The 216-Cube Formula (英文原文)
- How to Choose the Right Approach to Generate an SVG Pattern (英文原文)
- How to Compare Approaches to Generate an SVG Blob (英文原文)
- Is an RGB to HSV Converter Safe to Use Online? (英文原文)
- RGB to HEX for Beginners: A Plain-English Walkthrough (英文原文)
- RGB to CMYK Chart: Common Colors and Conversion Guide (英文原文)