颜色代码转换器

📖 颜色代码转换器使用说明

颜色代码转换器支持 HEX、sRGB、CMYK、HSL 四种常用颜色格式的相互转换，实时预览颜色效果，附带 HTML 标准 16 色和 CSS 扩展 29 色完整参考色值。

一、四种颜色格式说明

1.1 HEX（十六进制）

网页开发最常用的颜色表示法。格式为 #RRGGBB，每两位十六进制数分别表示红、绿、蓝通道（00-FF）。缩写形式 #RGB 等同于 #RRGGBB。

1.2 sRGB（红绿蓝）

标准 RGB 颜色空间。格式为 rgb(R, G, B)，R/G/B 各通道取值 0-255。CSS 中广泛使用，直观表示三原色混合比例。

1.3 CMYK（印刷四色）

印刷行业使用的减色模式。C(青)、M(品红)、Y(黄)、K(黑) 各取值 0-100%。用于印刷品设计，与屏幕显示的 RGB 存在色差。

1.4 HSL（色相饱和度亮度）

基于人眼感知的颜色模型。H(色相 0-360°)、S(饱和度 0-100%)、L(亮度 0-100%)。更直观地描述颜色属性，便于调色。

二、使用方法

2.1 格式转换

选择输入格式标签（HEX/sRGB/CMYK/HSL），填入颜色值，点击"转换"即可同时得到其他三种格式的结果。也可使用拾色器直接选取颜色。

2.2 色值参考

页面下方提供 HTML 标准 16 色和 CSS 扩展 29 色的完整列表，包含颜色名称、HEX 值和颜色预览。点击色块可直接加载该颜色进行转换。

2.3 一键复制

点击右侧任意格式的结果行，即可将对应的颜色代码复制到剪贴板。

三、使用场景

3.1 网页前端开发

设计稿标注的颜色需要转换为 CSS 可用的 HEX 或 RGB 格式。HSL 格式方便在代码中微调颜色的明暗。

3.2 印刷品设计

网页使用的 RGB 颜色需要转为 CMYK 供印刷。注意 RGB 到 CMYK 的转换存在色域差异，建议以 CMYK 模式校色。

3.3 品牌色管理

维护品牌视觉规范时，需要同时提供 HEX、RGB、CMYK、HSL 等多种格式的品牌色值。

3.4 SEO 和内容设计

优化网页按钮、CTA 区域的配色方案。HSL 模式下调整亮度和饱和度可快速生成同色系的配色。

3.5 邮件模板开发

部分邮件客户端只支持 HEX 颜色，需要将 RGB 或 HSL 转为 HEX 格式。

四、颜色格式对照

• HEX → RGB：将每两位十六进制转为十进制即可
• RGB → CMYK：先求 K=1-max(R,G,B)/255，再分别算 C/M/Y
• RGB → HSL：求最大最小 RGB 值，计算色相、饱和度和亮度
• CMYK → RGB：R=255×(1-C)×(1-K)，G 和 B 同理

五、使用教程：如何转换颜色格式

第1步：输入颜色值

输入HEX、RGB、HSL或使用取色器选择颜色。

第2步：查看所有格式

工具自动转换为HEX、RGB、HSL、RGBA、HSLA等多种格式。

第3步：复制需要的格式

点击对应格式的复制按钮，直接用于CSS或设计工具。

六、常见问题

5.1 为什么 CMYK 转 RGB 再转回 CMYK 值不同？

RGB 和 CMYK 的色域不完全重叠。某些 CMYK 颜色在 RGB 中无法精确表示，反之亦然。转换过程中会产生舍入误差。

5.2 HEX 支持缩写吗？

支持。#F0A 等同于 #FF00AA。输入 3 位或 6 位 HEX 值均可正确转换。

5.3 支持透明度（Alpha）吗？

当前版本支持标准的不透明颜色转换。RGBA 和 HSLA 的透明度转换请在 RGB/HSL 基础上手动添加 Alpha 通道。

5.4 印刷品应该用什么格式？

印刷品应使用 CMYK 格式。RGB 颜色转为 CMYK 后可能显得暗淡（尤其是鲜艳的蓝色和绿色），建议在 CMYK 模式下调色。

5.5 色值参考表的颜色准确吗？

HTML 标准 16 色和 CSS 扩展 29 色均使用 W3C 官方定义的精确色值，可放心用于网页开发。

5.6 拾色器选取的颜色准确吗？

拾色器使用浏览器原生 color input，返回的 HEX 值是精确的。但受显示器色彩校准影响，视觉上可能与目标颜色略有差异。

5.7 数据会上传吗？

不会。所有转换在浏览器端完成。