選擇顏色
格式
HEX
RGB
HSL
CMYK
色彩歷史
尚未選取任何顏色
#5E6AD2
色彩值
HEX
#5E6AD2
RGB
rgb(94, 106, 210)
HSL
hsl(234, 56%, 60%)
CMYK
cmyk(55%, 49%, 0%, 18%)
什麼是顏色選擇器？
以視覺方式挑選顏色，並在 HEX、RGB、HSL 與 CMYK 之間轉換。一鍵複製任何格式，並直接在瀏覽器中微調數值。
如何使用顏色選擇器
- 輸入 HEX 值，或使用視覺選擇器選擇顏色。
- 查看下方顯示的轉換後 RGB、HSL 與 CMYK 值。
- 微調輸入值，直到顏色符合你的設計或程式碼目標。
- 一鍵複製你需要的格式。
快速指南
色彩格式參考 比較 HEX、RGB、HSL 與 CMYK，讓你為 CSS、設計與印刷工作流程選擇正確格式。
了解顏色挑選 ▾
範例
輸入
#FF5733
輸出
RGB(255, 87, 51) · HSL(11°, 100%, 60%) · CMYK(0%, 66%, 80%, 0%)
常見使用情境
- 為 CSS 或設計 token 挑選精確的 UI 顏色
- 將 HEX、RGB 或 HSL 值複製到前端程式碼
- 在設計 QA 期間檢查並比較顏色
- 從單一選取色建立小型調色盤
常見問題
支援哪些顏色格式？
HEX、RGB、RGBA、HSL、HSLA 和 CMYK。點選任一格式欄位即可複製其值。
我可以使用滴管從螢幕挑選顏色嗎？
在支援 EyeDropper API 的瀏覽器（Chrome 95+）上可以。點選滴管圖示即可從螢幕任意位置挑色。
HSL 和 HSB/HSV 有什麼不同？
HSL（色相、飽和度、亮度）與 HSB/HSV（色相、飽和度、明度/值）都是圓柱形色彩模型，但第三軸的定義不同。在 HSL 中，50% 亮度是「純粹」的顏色。在 HSB 中，100% 明度代表最大亮度，更接近藝術家心中鮮豔的顏色。CSS 使用 HSL；Photoshop 和 Figma 使用 HSB。
我可以用這個檢查 WCAG 顏色對比嗎？
此工具顯示顏色值與轉換。若要針對背景色進行無障礙對比檢查（WCAG AA/AAA 比例），請使用專用的 Contrast Checker 工具。