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

設計 · 本機工具

HEX 轉 RGBA

HEX to RGBA Converter

解析 #RGB、#RGBA、#RRGGBB、#RRGGBBAA 四種格式,精確換算 alpha 為小數,逐通道核對後複製 rgba() 結果。

任務路徑 / 從輸入到結果

輸入 HEX 顏色

本機執行 · 不做任何上傳

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

任務路徑 / 從輸入到結果

如何把 HEX 顏色轉換為 RGBA

  1. 01

    輸入 HEX 顏色

    在「HEX 顏色」輸入框中填寫顏色值,輸入框初始已填入 #6D5EF8CC。嚴格解析器接受 #RGB、#RGBA、#RRGGBB 和 #RRGGBBAA——輸入框下方的說明文字列出的正是這四種格式,輸入上限為九個字元。

  2. 02

    執行轉換

    點擊「轉換為 RGBA」。解析器會先驗證整個值再渲染,格式不合法的值會被拒絕,並提示四種可接受的格式。只要修改輸入框,之前的結果就會被清除,下方面板永遠不會顯示過期的顏色。

  3. 03

    讀取 RGBA 通道

    Alpha 按位元組除以 255 解碼,計算時不取整。RGBA 與通道顯示最多六位小數,全部 256 種 alpha 位元組均可透過匯出的 RGBA 往返轉換。

  4. 04

    查看色塊

    大尺寸的預覽色塊會直接渲染轉換後的顏色,半透明效果在頁面上立即可見。複製之前,用它確認 alpha 的觀感與設計意圖一致。

  5. 05

    需要時載入範例

    點擊「載入範例」會執行一個完整例子——#22C55E99 轉換為 rgba(34, 197, 94, 0.6)——展示從輸入到通道的完整流程。「重設」把輸入框恢復為 #6D5EF8CC 並清空結果。

  6. 06

    複製或下載結果

    點擊「複製輸出」把 rgba() 值複製到剪貼簿,或點擊「下載」儲存為 toolars-color-rgba.txt。兩個操作在轉換成功之前都保持停用,因此你絕不會複製到空結果。

工具速覽

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

你的輸入留在瀏覽器裡。

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

本機執行

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

無隱藏處理

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

無需帳戶

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

立即重設

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

HEX 轉 RGBA 究竟做什麼

設計交付稿把一個半透明的品牌色標為 #6D5EF8CC,而你正在編輯的樣式表需要 rgba():紅、綠、藍三個位元組還好算,但 CC 意味著 255 分之 204——約 0.8 的 alpha——心算很容易出錯。HEX 轉 RGBA 會精確解碼每一組數字、展開簡寫位,並在即時色塊旁逐通道展示供你核對。複製的字串可以直接放進邊框、陰影或漸層宣告。這個值不會離開分頁,因此轉換過程適合任何注重隱私的程式庫。

常見問題

接受哪些 HEX 格式?
嚴格限定四種:#RGB、#RGBA、#RRGGBB 和 #RRGGBBAA。其他任何形式——缺少 #、五位數字或顏色關鍵字——都會被拒絕,提示訊息會列出可接受的格式。
簡寫格式是如何展開的?
每個數字位會翻倍:#RGB 透過重複每個字元變成 #RRGGBB,因此 #6F8 解碼為紅 102、綠 255、藍 136。#RGBA 的第四位翻倍成 alpha 位元組,然後再套用通常的 0–255 到 0–1 映射。
alpha 位元組是怎麼換算的?
Alpha 按位元組除以 255 解碼,計算時不取整。RGBA 與通道顯示最多六位小數,全部 256 種 alpha 位元組均可透過匯出的 RGBA 往返轉換。
為什麼我的結果消失了?
修改輸入框會有意清除之前的結果,面板因此永遠不會顯示與當前輸入不再匹配的顏色。再點一次「轉換為 RGBA」,新結果會立即出現。
可以反向轉換嗎?
可以——使用 RGBA 轉 HEX,它接受 rgb() 和 rgba() 寫法並產出對應的十六進制值;顏色半透明時會包含 alpha 位元組。兩個工具共用同一套通道運算,往返轉換會回到最初的值。
顏色會被傳送到別處嗎?
不會。轉換完全在當前瀏覽器分頁內執行,輸入和結果不會離開此分頁,也無需註冊帳號。

繼續探索設計

相關任務,而非死胡同。

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

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。

建立