颜色转换器
HEX/RGB/HSL/CMYK 四格式同屏互转，往返校验。
颜色
HEX
#3b82f6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)CMYK
cmyk(76%, 47%, 0%, 4%)往返校验：HSL→RGB #3c83f6 · CMYK→RGB #3b82f5（±2 量化误差内即一致）
使用说明
这个工具解决什么问题
设计给的是 HEX,代码里要 RGB,调色想用 HSL,印刷要 CMYK——同一个颜色,四种写法处处需要。心算换算容易错,搜一次换算一次太碎。这个工具把四种格式同屏排开:输入任意一种,其余三种即时更新,谁先谁后无所谓,顺手取色也支持。
核心能力
四格式同屏:HEX、RGB、HSL、CMYK 同时显示,改一处全部联动。即时互转:无需按钮,输入即算,多格式粘贴自动识别。取色器:屏幕或页面取色,直接进入换算流程。误差口径明确:往返量化误差 ±2 以内属正常,规则写在明处。
使用建议
写 CSS 时把设计稿的 HEX 转成所需的任意格式;调色方案先用 HSL 调好感觉,再取 HEX 定稿;交给印刷的物料,以 CMYK 参考值与印刷厂校样为准。
换算纯浏览器本地运行,不上传服务器,断网可用;颜色无明显倾向时 CMYK 换算偏差会偏大,属各色彩模型固有差异,以设计规范为准。
常见问题
为什么 RGB 转 HEX 再转回来,数值会差一两个?
各格式取值范围不同,换算涉及取整,一次往返可能有正负 2 的量化误差,这是精度口径,不是 bug。设计规范里的颜色值以你最终锁定的格式为准,别在不同格式间反复横跳。
HSL 和 RGB 有什么区别,什么时候用?
RGB 描述「多少红绿蓝」,适合机器与代码;HSL 描述「色相、饱和度、明度」,适合人调色——想变亮就加亮度,想换色系就转色相,比在 RGB 里凑数字直观得多。
CMYK 是打印色吗,屏幕上准吗?
CMYK 是印刷四原色模型。本工具给的是理论换算值,实际印刷受纸张、油墨、设备影响,与屏幕观感必然有差;交印前请以印刷厂的专业校色为准,这里的值作参考。