顏色碼轉換
HEX、RGB、HSL 三向即時互換,附即時預覽
點左側取色器,或在下方任一格輸入
關於顏色碼轉換
顏色碼轉換是前端工程師、網頁設計師與 UI 設計人員每天都會用到的小工具。當你拿到一組 HEX 色碼,卻需要在 CSS 中改用 rgb 或 hsl 表示時,手動換算既費時又容易算錯。本工具讓你在 HEX、RGB、HSL 三種色彩格式之間即時互換,任一格輸入都會同步更新其餘兩格,並附上色塊預覽與系統取色器,讓你在比對配色時一眼確認結果是否正確。
所有換算都在你的瀏覽器本機以 JavaScript 完成,色碼不會上傳到任何伺服器,適合處理品牌色、設計稿配色等需要保密的內容。工具支援標準六位 HEX 與含括號的 rgb、hsl 寫法,輸入時自動容錯解析,色值超出範圍會即時提示。無論是調整網頁主色、製作色票,還是把設計稿的色彩規格轉成程式碼可用的格式,都能快速完成。
使用步驟
- 點選左上角的取色器,直接從色盤挑選你要的顏色,右側色塊會立即顯示預覽。
- 或在 HEX、RGB、HSL 任一欄位直接輸入色值,例如 #e6411d 或 rgb(230, 65, 29)。
- 輸入後其餘兩種格式會自動同步換算,複製需要的那一行即可貼到 CSS 或設計工具。
- 若色值超出有效範圍,下方會出現紅色提示,修正後即恢復正常換算。
常見問題
我輸入的顏色會被上傳或記錄嗎?
不會。所有色彩換算都在你的瀏覽器本機完成,色碼不會傳送到伺服器,也不會被保存,適合處理保密的品牌配色。
支援哪些色彩格式?
支援三種主流格式:HEX 十六進位色碼、RGB 紅綠藍三色值,以及 HSL 色相、飽和度、亮度。三者可任意方向即時互換。
這個工具要付費或安裝嗎?
完全免費且免安裝,只要用瀏覽器開啟頁面即可使用,沒有次數限制,也不需要註冊帳號。
HEX 一定要打井字號嗎?
不一定。輸入時可帶或不帶開頭的井字號,工具會自動容錯解析,只要是六位十六進位字元即可正確辨識。
HSL 換算後再轉回去數值會稍有不同嗎?
可能會。HSL 與 RGB 互換涉及四捨五入,極少數情況下來回轉換會差一個數值,屬於色彩空間取整的正常現象。
支援含透明度的 RGBA 或八位 HEX 嗎?
目前不支援透明度。工具聚焦於不透明色的 HEX、RGB、HSL 互換,若需要 alpha 通道請另外於 CSS 補上。