色碼轉換
HEX、RGB、HSL 互轉
顏色預覽
#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%)
HEX
RGB
HSL
關於此工具
CSS 裡你可能用 #3b82f6，設計師在 Figma 給的是 rgb(59, 130, 246)，要調深淺時用 HSL 最直覺。三種格式表達的是同一個顏色，互轉起來卻很煩。這裡修改任何一種格式，其他兩種立刻同步，還整合了原生顏色選取器，可以直接用眼睛挑色。
功能特色
- ✓三種格式即時同步 — 改 HEX 自動更新 RGB 和 HSL，改任何一個都行，不用手動換算。
- ✓直接用眼睛選色 — 點色塊開啟瀏覽器的原生顏色選取器，視覺選色後三種格式自動填入。
- ✓每個格式都能單獨複製 — HEX、RGB、HSL 各有獨立的複製按鈕，要哪個複製哪個，不用手動選取文字。
- ✓直接輸入數值 — 支援直接打 HEX 字串，或用數字欄位微調 RGB（0–255）和 HSL 值，精確控制。
- ✓即時大色塊預覽 — 頁面頂部的預覽色塊隨時反映當前顏色，確認深淺和飽和度一眼就清楚。
常見問題
- HEX、RGB、HSL 有什麼差別，用哪個比較好？
- 三個是同一顏色的不同寫法，可以自由轉換。HEX 最短，CSS 裡最常見。RGB 描述光的混合比例，用程式運算比較方便。HSL 最像人的直覺——要讓顏色深一點就把 L 調低，要更鮮豔就把 S 調高，做配色時特別好用。
- HSL 的 H 值為什麼是 0 到 360？
- H 代表色輪上的角度，0° 是紅，120° 是綠，240° 是藍，繞一圈回到 360°（紅）。這個設計讓你很直覺地操作顏色關係，比如加 180° 是互補色，加減 30° 是類比色。
- RGBA 和 HSLA 是什麼？
- 就是在 RGB 和 HSL 後面多加一個透明度（Alpha）通道，0 是完全透明，1 是完全不透明。這個工具處理不透明純色，如果需要半透明效果，在 CSS 裡手動加第四個參數就行，例如 rgba(59, 130, 246, 0.5)。
- #fff 和 #ffffff 一樣嗎？
- 一樣。CSS 允許三位 HEX 作為縮寫，每一位展開成兩位（f → ff），#fff 就是 #ffffff（白色），#000 就是 #000000（黑色）。這個工具統一輸出 6 位格式。