颜色格式转换工具使用说明
做网页、写 CSS、调设计稿的时候，颜色代码的格式换算是高频操作。设计软件给的是 HEX，CSS 里可能想用 HSL 方便调明暗，印刷对接要 CMYK，前端框架的变量又习惯用 RGB。手动换算既慢又容易错，这个工具把所有常见格式放在同一页，改一个其余全跟着变。
五种格式分别是什么
- HEX（十六进制）：网页和设计软件里最通用的写法，形如
#3b82f6。两个字符一组，依次代表红、绿、蓝，取值 00–ff。写 CSS 首选这个。 - RGB（红绿蓝）：把颜色拆成三个 0–255 的通道值，直观反映屏幕发光原理。CSS 里也支持
rgb(59, 130, 246)。 - HSL（色相/饱和度/亮度）：色相是色轮角度 0–360，饱和度是鲜艳程度 0–100%，亮度 0–100%。想「把这个蓝调暗一点但保持色相不变」，用 HSL 最方便，改亮度就行。
- HSV / HSB（色相/饱和度/明度）：和 HSL 思路相近但明度的定义不同。设计软件（Photoshop、Sketch）里的「HSB」就是这个。
- CMYK（青/品红/黄/黑）：印刷用的减色模式。屏幕发光的 RGB 无法打印，印刷厂要的是 CMYK。注意这里算出来的是公式换算值，实际印刷还依赖纸张和油墨，只能作为参考。
几个容易踩的坑
HSL 的亮度 50% 不等于「正常」。 很多人以为把亮度设成 50% 就是原色，其实 HSL 的 L=50% 只是这个色相下最鲜艳的位置。纯红 #ff0000 的 HSL 是 hsl(0, 100%, 50%)，而纯白是 hsl(0, 0%, 100%)。想生成同色系的深浅色阶，改 L 值最有效。
CMYK 转回 RGB 会有偏差。 CMYK 是四通道减色，RGB 是三通道加色，两者的色域范围不重合。纯青、纯品红这类 CMYK 颜色在屏幕上显示不出来，反之荧幕上的高饱和绿也印不出来。做设计稿时以屏幕稿为准，交给印厂前让印厂确认色差。
简写 HEX 有前提。 #fff 是 #ffffff 的简写，只有每两位相同才能简写。#3b82f6 就不能缩成三位。
别忽略透明度。 HEX 可以写成八位（如 #3b82f680），后两位是 alpha 通道；CSS 里对应 rgba(59,130,246,0.5)。本工具处理的是不含透明通道的六位 HEX，透明度需要你另外指定。
对比度为什么重要
WCAG（网页内容无障碍指南）对文字的对比度有明确要求：普通正文至少要达到 4.5:1，大号文字（18pt 以上或 14pt 加粗）至少要 3:1。对比度不足会让弱视用户、在强光下看手机的人读不清内容，也影响页面的无障碍评分和搜索表现。本工具会算出前景色与背景色的对比度并给出是否达标的判断。
常见问题
为什么 CMYK 的百分比加起来不是 100%？
CMYK 四通道在理论上加起来应该接近 100%（因为它是减色模式，四种油墨叠加吸收所有光得到黑色），但实际换算时经常出现总和大于或小于 100% 的情况。原因一是彩色油墨本身不纯，二是业内普遍会用 GCR/UCR（灰成分替换）等算法做黑版优化来省墨、提升印刷质量。本工具给出的是纯公式换算结果，不含这类工艺调整。
HSL 和 HSV 到底差在哪？
关键区别在「亮度」和「明度」的定义。HSL 的 L 从黑（0%）走到饱和色（50%）再走到白（100%）；HSV 的 V 从黑（0%）直接走到最鲜艳的颜色（100%），没有「再变白」那一段。所以同一个颜色在这两个模型里的数值会不一样，做设计时看清软件用的是哪个。Photoshop 拾色器里的 H、S、B 就是 HSV。
色阶是怎么生成的？
本工具按 HSL 模型把亮度从 95% 到 5% 均匀分成若干档，保持色相和饱和度不变，再换算回 HEX。这样生成的色阶是同一色系、明暗递进的，适合做按钮的 hover 态、卡片的层级背景、图表的渐变色。如果你的原色本身饱和度很低（接近灰），色阶变化会不明显。
对比度 21:1 是什么意思？
这是对比度的理论上限，出现在纯黑配纯白（#000000 配 #ffffff）的时候。计算方式是相对亮度的比值：（亮者 + 0.05）/（暗者 + 0.05）。比值越大对比越强。日常做网页，正文建议做到 7:1 以上，按钮上的文字至少 4.5:1。
#0000ff 和 #0000FF 有区别吗？
没有区别，HEX 颜色代码大小写不敏感。只是团队里通常约定统一小写，避免代码风格检查报错。