這個工具支援所有CSS十六進位寫法:6位數#ff5733、3位數簡寫#f53,以及帶透明度通道的4位數和8位數形式,有沒有加#都可以。結果會顯示rgb()或rgba()字串、各通道的數值和逐位換算細節,還有一列反向的RGB轉HEX。所有運算都在瀏覽器本機完成,不用上傳、不用註冊,也沒有使用次數限制。
HEX轉RGB色碼轉換
全程在瀏覽器裡執行,免上傳、免註冊。
CSS
rgb(255, 87, 51)RGB數值
255, 87, 51換算方式
紅
FF255綠
5787藍
3351反過來?RGB轉HEX
#ff5733HEX色碼怎麼轉換成RGB?
十六進位色碼是三組兩位數,每一組對應一個顏色通道。把每組換算成0到255的十進位數字:以#ff5733為例,ff是紅色255、57是綠色87、33是藍色51,所以RGB值就是rgb(255, 87, 51)。這個工具會在你輸入的同時完成換算。
使用方式
- 1輸入十六進位色碼. 輸入或貼上色碼,例如#ff5733(或#f53),也可以用色票直接選。#號可加可不加。
- 2查看RGB結果. rgb()字串、0-255的數值和顏色預覽會隨輸入即時更新,並顯示每組十六進位數字是怎麼換算出來的。
- 3複製你需要的格式. 點擊rgb()字串或原始數值旁邊的複製按鈕。需要反過來轉換?在下方輸入紅、綠、藍數值即可取得對應的色碼。
適合誰用
- 前端工程師把設計規範裡的十六進位色碼轉成rgb(),方便用rgba()加上透明度。
- 設計師在只吃十六進位的工具(CSS、Figma)和只吃0-255數值的工具(部分印刷、影片軟體)之間搬運品牌色。
- 電子郵件與行銷團隊在只接受單一色彩格式的編輯器之間統一活動配色。
- 遊戲與App開發者把0-255通道數值餵給無法解析十六進位字串的引擎或SDK。
常見問題
這個HEX轉RGB工具免費嗎?
免費,不用註冊,也沒有使用次數限制,全部在瀏覽器裡運作。
我輸入的顏色會被上傳到哪裡嗎?
不會。換算只是裝置上執行的JavaScript,不會把任何資料傳到伺服器,頁面載入完成後離線也能繼續使用。
HEX轉RGB的換算公式是什麼?
把十六進位色碼拆成三組兩位數字,每組從16進位換算成10進位:第一位乘以16再加第二位(a=10……f=15)。以#ff5733為例,ff = 15×16+15 = 255,57 = 5×16+7 = 87,33 = 3×16+3 = 51。
支援#f53這種3位數簡寫嗎?
支援。CSS簡寫裡每一位都會重複一次,所以#f53會展開成#ff5533,換算結果是rgb(255, 85, 51)。4位數形式原理相同,最後一位是透明度。
怎麼換算成RGBA?
8位數十六進位色碼的最後一組就是透明度。這個0-255的位元組會除以255,換算成rgba()需要的0-1數值並四捨五入到小數點後三位,所以#ff573380會變成rgba(255, 87, 51, 0.502)。
可以反過來把RGB轉成HEX嗎?
可以。在結果下方的RGB轉HEX欄位輸入0到255之間的紅、綠、藍數值,就能立即取得對應的十六進位色碼,超出範圍的數值會被限制在0-255之間。
為什麼要用rgb()而不是十六進位?
主要是為了透明度和方便計算:rgba(255, 87, 51, 0.5)可以讓顏色變半透明,而且許多API、遊戲引擎和設計規範要的是分開的0-255通道數值,而不是十六進位字串。