跳到主要內容
Toolars
探索
回報問題

設計 · 本機工具

RGBA 轉 HEX

RGBA to HEX Converter

把 rgb() 或 rgba() 轉為大寫十六進位,alpha 小於 1 時保留為兩位位元組,拒絕百分比通道,可複製或下載。

任務路徑 / 從輸入到結果

輸入通道值

本機執行 · 不做任何上傳

瞭解RGBA 轉 HEX的使用方法、隱私說明與相關工具

任務路徑 / 從輸入到結果

如何把 RGBA 顏色轉換為 HEX

  1. 01

    輸入通道值

    在「RGB 或 RGBA 顏色」輸入框中填寫 rgb() 或 rgba() 值——輸入框初始已填入 rgba(109, 94, 248, 0.8),最多接受 64 個字元。紅、綠、藍為 0 到 255 的整數,alpha 為 0 到 1 的數字;百分比和超出範圍的通道會被拒絕。

  2. 02

    執行轉換

    點擊「轉換為 HEX」。解析器會先驗證每個通道再轉換;只要你修改輸入框,之前的結果就會被清除,面板永遠不會顯示過期的值。

  3. 03

    讀取十六進位結果

    結果是大寫的十六進位值:完全不透明時為 #RRGGBB,alpha 小於 1 時為 #RRGGBBAA。alpha 位元組是 alpha 乘以 255 後四捨五入的結果,因此 0.8 變成 204,寫作 CC。

  4. 04

    核對單個通道

    結果通道與預覽顯示 alpha 量化為 8 位元組後的 HEX 輸出顏色。例如輸入 alpha 0.65 變為 166/255,顯示為 0.65098;這裡展示輸出效果,而非原樣複述輸入 alpha。

  5. 05

    載入範例轉換

    點擊「載入範例」可以觀看一次完整執行:rgba(14, 165, 233, 0.65) 會轉換為 #0EA5E9A6,因為 0.65 乘以 255 四捨五入為 166,即十六進位的 A6。「重設」恢復預設輸入 rgba(109, 94, 248, 0.8)。

  6. 06

    複製或下載結果

    點擊「複製輸出」複製十六進位值,或點擊「下載」儲存為 toolars-color-hex.txt。兩者在轉換成功之前都保持停用。

工具速覽

處理方式
在瀏覽器本機完成
輸入是否離開裝置
從不
資料保留
不儲存任何內容
價格
免費

你的輸入留在瀏覽器裡。

RGBA 轉 HEX 使用經過驗證的本機執行路徑,不會建立隱藏的輸入或輸出歷史記錄。

本機執行

在目前瀏覽器分頁內執行。

無隱藏處理

使用中的工具資料絕不會成為 Toolars 的文件記錄。

無需帳戶

無需建立帳戶即可使用核心工作流程。登入後收藏才會同步至你的帳戶。

立即重設

關閉分頁,目前的工作資料即刻消失。

RGBA 轉 HEX 究竟做什麼

設計符記、老式樣式表和很多 API 仍然要求十六進位顏色,而計算後的 CSS 和現代設計工具給你的卻是 rgba()。手工換算 rgba(14, 165, 233, 0.65) 意味著三次十進制轉十六進制,外加一個 alpha 位元組。RGBA 轉 HEX 會精確完成這些計算,把透明度保留為八位十六進位,並展示解析出的通道,方便你在複製前核對輸入。一切完全在你的裝置上執行,不向任何地方傳送內容,也無需註冊帳號。

常見問題

接受什麼輸入語法?
逗號分隔通道的 rgb(r, g, b) 或 rgba(r, g, b, a):紅、綠、藍必須是 0 到 255 的整數,alpha 是 0 到 1 的數字,比如 0.8 或 .65。寫法不區分大小寫,也容忍逗號周圍的空格;rgb(50%, 30%, 20%) 這樣的百分比通道會被有意拒絕。
什麼時候輸出會帶 alpha 位元組?
僅當 alpha 小於 1 時。rgba(109, 94, 248, 0.8) 會變成 #6D5EF8CC;同樣的顏色在完全不透明時是 #6D5EF8——十六進位寫法永遠不會帶多餘的 FF。
alpha 是如何變成最後一個位元組的?
alpha 乘以 255 並四捨五入到最近的整數,再寫成兩位大寫十六進位。於是 0.5 變成 128,顯示為 80;0.65 四捨五入為 166,顯示為 A6——與 CSS 處理八位十六進位顏色的映射完全一致。
為什麼我的輸入被拒絕了?
提示訊息會指出具體問題:通道超過 255、通道不是整數、alpha 超過 1,或格式不是 rgb()/rgba()。解析器刻意嚴格,是為了讓筆誤不會悄悄變成錯誤的顏色。修正取值後重新轉換即可——整個過程中沒有內容被傳送出去。
可以把十六進位轉回 rgba() 嗎?
可以——使用 HEX 轉 RGBA,它接受 #RGB、#RGBA、#RRGGBB 和 #RRGGBBAA,並把 rgba() 字串的每個通道拆開顯示,方便核對。
顏色會被上傳到別處嗎?
不會。轉換完全在當前瀏覽器分頁內執行,輸入和結果不會離開此分頁,也無需註冊帳號。

繼續探索設計

相關任務,而非死胡同。

無需返回完整索引,直接進入另一個專注的工作區。

CSS 載入動畫產生器

CSS Loader Generator

視覺化設計軌道圓環或三點載入動畫,調整尺寸、速度與配色,複製含 @keyframes 與減少動效媒體查詢的 CSS。

建立

CSS 核取方塊產生器

CSS Checkbox Generator

設計 18–64 px 自訂核取方塊並預覽勾選動畫,匯出保留原生 input、含 :focus-visible 與 :disabled 樣式的 CSS。

建立

CSS 開關產生器

CSS Switch Generator

調整軌道與滑鈕尺寸並為開關兩態配色,匯出純 CSS 切換開關;標記保留可聚焦的原生 input,無需 JavaScript。

建立

CSS clip-path 產生器

CSS Clip Path Generator

拖曳、使用鍵盤或輸入座標編輯多邊形。從四種預設開始,在本機複製 clip-path 宣告或完整 CSS。

建立