什么是颜色代码转换器？

颜色代码转换器把任意一种颜色值同时换算成 HEX、RGB、HSL、CMYK 和 HSV。直接输入色值、粘贴 rebeccapurple 这样的 CSS 颜色名,或者点击色块用拾色器吸取,其余格式都会实时更新,直接复制你样式表或印刷文件需要的那一种即可。

用任意格式输入或粘贴色值（#FF5733、rgb(255,87,51)、hsl(11,100%,60%)、cmyk(0%,66%,80%,0%)、hsv(11,80%,100%)),或填入 tomato、cornflowerblue 这类 CSS 颜色名。工具会识别格式并把其余四种自动填好。旁边的色块实时显示解析结果,方便核对;点击色块还能调出系统自带的拾色器,可视化地挑色。设计稿给的是一种格式,而样式表、设计软件或印刷需要另一种时,直接到这里换算。

使用方法

1. 第一步——输入任意支持格式的颜色值,或填入 tomato 这类 CSS 颜色名（例如 #FF5733、rgb(255,87,51)、hsl(11,100%,60%)）。
2. 第二步——工具自动识别输入格式，并实时转换为所有其他格式。
3. 第三步——点击任一转换结果即可复制,或点击颜色预览块调出可视化拾色器吸取新颜色。

何时使用

• 把品牌色的 HEX 转成 CMYK,准备送印前文件。
• 从截图里取到 RGB 值,再换成 HEX 写进 CSS。
• 核对设计师给的 HSL 色相,看是否跟规范里的 HEX 一致。

结果

一位前端开发者需要将设计稿中的品牌色 #2196F3 转为 CSS 动画用的 RGB 值——工具立即显示 rgb(33, 150, 243)，同时给出 HSL 和 CMYK 对应值。

常见问题

为什么 CMYK 值跟印刷软件里的略有差别?

屏幕用的是 RGB 加色,印刷用的是 CMYK 减色。这里采用通用换算公式,但实际印刷配置(如 Coated FOGRA39、GRACoL)会根据纸张和油墨调整几个百分点。这里的 CMYK 输出当作起点参考即可。

输入像 #ZZZ 这种无效值会怎样?

其它格式栏会保持空白,色块也不显示颜色。只有当输入与 HEX、RGB、HSL 或 CMYK 中的一种合法格式匹配时,工具才会刷新输出,避免给出误导性的半成品换算。

像 #F53 这样的三位 HEX 也能识别吗?

可以。三位 HEX 是六位的简写,#F53 等同于 #FF5533,两种写法都支持。输出统一为六位完整格式,粘贴到别处不会有歧义。

HSL 跟 HSV 有什么区别?

两者都从色相开始,但 HSL 表示从黑到白的明度,HSV(也叫 HSB)表示相对纯色的亮度。本转换器现在同时显示 HSL 和 HSV,因为 CSS 用 HSL、Photoshop 用 HSV,设计师常常需要在两者之间换算。

工具支持透明度或 alpha 通道吗?

这款转换器不支持。这里的 HEX、RGB、HSL、CMYK 都是不带透明度的值。要表示透明,得用 8 位 HEX(#RRGGBBAA)或 rgba(),不在本工具的四种格式范围内。

相关工具