色
在 HEX、RGB、HSL 格式之間轉換顏色。
色碼轉換器會解析你輸入的 hex 色碼、rgb() 或 hsl() 數值，同時顯示三種對等表示法與色塊預覽——只要設計工具或程式碼需要特定格式的顏色，就能立刻派上用場。
HEX: #ff6b4a
RGB: rgb(255, 107, 74)
HSL: hsl(11, 100%, 65%)
使用指引
- 輸入 hex 色碼（#ff6b4a）、rgb() 或 hsl() 數值。
- 三種格式會同步更新，顯示同一個顏色。
常見使用情境
- 把設計檔中的 hex 顏色轉成程式碼需要的 rgb() 或 hsl() 格式。
- 只看色碼就先確認顏色實際長什麼樣子。
- 在不同工具之間搬移顏色時做格式轉換。
- 用 HSL 微調顏色的明度或飽和度，再取得對應的 hex 值。
✓內容與驗證流程複查: 2026-08-27
色碼轉換器 的驗證方法與判讀界線
如何確認轉換後的數值代表完全相同的顏色。
三種
hex、RGB、HSL 只是同一個顏色的三種不同寫法——在它們之間轉換絕不會改變顏色本身，只是改變表達方式。
色
如果色塊看起來跟你預期的顏色不一樣，請檢查輸入是否打錯字——hex 色碼中一個數字打錯，顏色可能會差很多。
僅
此工具只處理完全不透明的 hex/rgb/hsl 數值，不會解析或保留透明度（alpha）通道（例如 rgba() 或帶透明度的 hex）。
使用結果前的檢查清單
- 色塊預覽在視覺上與你想轉換的顏色一致。
- 已複製你目標工具或程式碼實際需要的那個格式（hex、rgb 或 hsl）。
- 了解此工具不處理透明度／alpha 數值。
- 如果結果跟預期的顏色不一樣，已檢查輸入是否有打錯字。
適合誰使用
- 要在 hex、rgb、hsl 之間轉換顏色的設計師與開發者。
- 想確認色碼實際顏色的人。
- 在不同設計工具之間搬移顏色值的人。
- 想透過 HSL 調整顏色明度或飽和度的人。
實際案例
把
開發者從設計檔中取得 hex 顏色，轉換成 CSS-in-JS 程式碼需要的 rgb() 格式。
使用
有人貼上文件中的 hex 色碼，在正式採用前先預覽這個顏色實際長什麼樣子。
透過 HSL 調整明度
設計師把基礎色轉成 HSL，在腦中調整明度數值，再轉回去取得較亮或較暗版本的 hex 值。
使用限制
- 不支援 CSS 顏色名稱（例如「tomato」）或透明度——僅支援不透明的 hex/rgb/hsl 數值。
常見問題
hex
不會——對同一個顏色而言，三者完全等價。如果看起來有明顯差異，代表其中一個數值打錯或輸入有誤。
可以
無法直接支援——此工具只解析 hex、rgb()、hsl() 輸入，不支援具名的 CSS 顏色。
支援
不支援——僅處理不透明顏色，透明度／alpha 數值（例如 rgba() 中的透明度）不會被解析或保留。
為什麼
請檢查 hex 色碼是否剛好是 6 位十六進位數字，或 rgb()/hsl() 數值是否符合提示中顯示的逗號分隔格式。
🔒 在瀏覽器內處理，不會上傳。結果僅供參考，詳見 免責聲明。 最後更新: 2026-08-27
訂閱更新
新工具上線與實用技巧，第一時間寄到你的信箱。不塞廣告，隨時可退訂。