颜色转换器

蜜蜂工具箱免费在线颜色转换器,支持 HEX、RGB、HSL、HSV、CMYK 五种色彩空间实时互转,附带取色器、10 级亮度色阶、互补色/三分色/邻近色配色方案,设计师与前端开发必备。

HEX、RGB、HSL、HSV、CMYK 五种色彩空间实时互转,附色阶与配色。 蜜蜂工具箱颜色转换器基于自研 JavaScript 实现,粘贴任意一种格式即可同步查看其余四种,还提供 10 级亮度色阶与互补/三分/邻近配色方案,适用于 UI 设计、前端主题、印刷排版等场景。

亮度色阶
相关配色
互补色
三分色 1
三分色 2
邻近色

颜色空间与配色完全指南

五种色彩空间对比

  • 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 级色阶与四种配色关系。数据不上传,离线也可用。

开源许可声明:颜色转换逻辑基于本项目自研的原生 JavaScript 实现,遵循 MIT License,不依赖任何第三方库。

常见问题

支持哪些颜色格式?
支持 HEX(#RRGGBB / #RGB)、RGB、HSL、HSV、CMYK 五种最常用的色彩空间,并可实时同步预览。
结果的精度如何?
RGB 采用 0-255 整数,HSL/HSV 采用百分比,CMYK 采用 0-100 整数,四舍五入到最接近的整数,与主流设计软件一致。
颜色数据会上传吗?
不会。所有转换在浏览器本地完成,颜色值不会离开你的设备,不上传服务器。
为什么 HEX 转 CMYK 后再转回和原值不同?
RGB 与 CMYK 色域不同,存在无损转换范围之外的颜色。屏幕(RGB)色域比印刷(CMYK)更广,超出印刷色域的颜色转换后会做映射,是行业内正常现象。
什么是互补色、三分色、邻近色?
互补色是色相环上相对 180 度的颜色,对比强烈;三分色是相隔 120 度的三色配色,平衡稳重;邻近色是相隔 30 度左右的色相,视觉柔和。
生成的色阶如何使用?
亮度色阶将当前色相由 10% 到 100% 分成 10 级,可作为主色的深浅衍生色,适合前端 UI 主题令牌、Tailwind palette 生成。
支持带透明度的颜色吗?
当前版本聚焦不透明色彩空间。如需 RGBA / HSLA,可在 RGB / HSL 输出末尾自行追加 alpha 值。