顏色轉換器

五種色彩空間對比

• HEX:最常用於 CSS 和設計稿,以 #RRGGBB 表達 24 位顏色。
• RGB:三原色疊加,螢幕顯示的基礎模型,便於程式化計算。
• HSL:色相(Hue)、飽和度(Saturation)、亮度(Lightness),便於調整明暗與飽和。
• HSV:色相 + 飽和度 + 明度(Value),Photoshop 拾色器預設模型。
• CMYK:青、品、黃、黑四色減法混合,印刷輸出參考。

典型轉換場景

1. UI 設計交付前端:HEX -> RGB / HSL,便於 Tailwind、CSS 變數。
2. 品牌色定義:HSL 便於生成同色相不同亮度的完整色階。
3. 廣告物料印刷:螢幕設計的 RGB 顏色需要轉 CMYK,並與打樣對色。
4. 搭配調色:HSL 中調整色相 ±30 / ±120 / ±180 度即可得到鄰近、三分、互補色。

數字設計小貼士

• 主色的亮度控制在 45%~55%,更容易衍生 100~900 全色階。
• 對比色文本請符合 WCAG 4.5:1 對比度要求,可使用色階工具反覆除錯。
• HEX 6 位不足以表達廣色域,若面向 P3 / Rec2020 裝置,考慮使用 CSS Color 4 的 color(display-p3 ...) 語法。
• 印刷前請在專業軟體中使用 CMYK 色板重新校對,本工具的 CMYK 轉換為 sRGB 數學模型,與實際印刷仍有色差。

關於本工具

蜜蜂工具箱顏色轉換器完全在瀏覽器中執行,支援從取色器、HEX、RGB、HSL、HSV 任意輸入,並同步生成 10 級色階與四種配色關係。資料不上傳,離線也可用。