取色器
HEX、RGB、HSL
以視覺化方式選擇任意色彩，在 HEX、RGB 和 HSL 格式之間轉換。即時複製值用於 CSS 和設計工具。
此轉換僅在您的瀏覽器中執行，不會上傳任何內容。
59
130
246
- HEX#3b82f6
- RGB59,130,246
- HSL217, 91%, 60%
僅不透明色彩（HEX / RGB / HSL），無 alpha。可貼上 #rgb 簡寫或完整 #rrggbb。
- HEX
- RGB
- HSL
這個工具是什麼？
將視覺化選取（或輸入的 HEX）轉為可用於 CSS 的 HEX、RGB、HSL。三種格式以不同座標描述同一不透明色彩。
HEX 適合作為 token；RGB 顯示 0–255 通道；HSL 便於微調相關 UI 狀態。接受 CSS #rgb 簡寫並展開為六位。
適合把單一色票寫入 CSS 或文件。若要從一種基色產生和諧色盤，請用調色盤產生器。
常見用途
- 將稿中的 HEX/RGB/HSL 複製到 CSS 或設計系統
- 把舊樣式裡的
#rgb展開為#rrggbb - 拖動 RGB 滑桿並同步查看 HEX、HSL
如何使用
- 使用原生取色或 RGB 滑桿；大色塊即時更新。
- 或輸入 HEX（
#39f/#3399ff）。無效或含透明度的 HEX 會報錯。 - Sample 載入
#39f→#3399ff。Clear 恢復預設藍色。 - 在工具列複製 HEX，或在各列複製 RGB/HSL。
範例
| 輸入 / 設定 | 輸出 | 說明 |
|---|---|---|
#3b82f6（預設） | rgb(59, 130, 246) · hsl(217, 91%, 60%) | 預設藍。 |
#39f（Sample） | #3399ff · rgb(51, 153, 255) | #rgb 簡寫展開。 |
#000 | #000000 · hsl(0, 0%, 0%) | 黑色。 |
#ffffff | rgb(255, 255, 255) · hsl(0, 0%, 100%) | 白色；HSL 飽和度為 0。 |
實務上常見陷阱
- 無透明度：
#rgba、#rrggbbaa、rgba()、hsla()不在範圍內——請在 CSS 中另外寫透明度。 - HEX 與 HSL 會為顯示取整；接近灰色（低飽和度）時 HSL 色相可能跳動。
- 不計算文字/背景 對比度（WCAG）——上線前請用設計或無障礙工具檢查。
參考資料
最後審閱: 2026-07-27
常見問題
- 支援
- 支援。#39f 會展開為
- 有透明度（alpha）嗎？
- 沒有。本工具僅處理不透明色彩。需要 rgba()/hsla() 或 8 位 HEX 時，請用設計工具或在 CSS 中自行寫 alpha。
- 可以分別複製 HEX、RGB、HSL 嗎？
- 可以。有分格式複製與頂部 Copy（HEX）。取色器與滑桿即時同步。
- 會上傳資料嗎？
- 不會。轉換僅在瀏覽器中進行。