颜色格式在线转换与对比度检查 (Color Converter)
输入任意一种格式(#hex、rgb()、hsl())即时得到三种格式实时互转结果与色彩预览,并自动计算该颜色对黑/白文本的 WCAG 对比度比值与 AA/AAA 达标状态。
常见颜色格式速查
| 格式 | 形式 | 示例 | 适用场景 |
|---|---|---|---|
| HEX | #RRGGBB 十六进制 | #16a34a | CSS / 设计软件默认,最短书写 |
| RGB | 红绿蓝各 0-255 | rgb(22, 163, 74) | 需要单独操纵通道(渐变、滤镜) |
| HSL | 色相 0-360 + 饱和度/亮度 % | hsl(142, 76%, 36%) | 调明暗/饱和最直观,主题色派生 |
常见问题解答 (FAQ)
Q: HSL 的 H、S、L 分别控制什么?
A: H(Hue 色相)是色环角度:0 红、120 绿、240 蓝;S(Saturation 饱和度)越高颜色越纯,0% 即灰色;L(Lightness 亮度)0% 是黑、100% 是白、50% 是纯色。想要"同一颜色的浅色版",只改 L 就行——这是它比 RGB 直观的原因。
Q: 正文文字的对比度要达到多少才合格?
A: WCAG 2.1 标准:正常字号正文至少 4.5:1(AA),大字号(≥18pt 或 14pt 粗体)至少 3:1,增强级 AAA 为 7:1。本工具自动计算你输入的颜色对白色与黑色文本的比值并标注达标状态。
Q: 为什么设计系统常用 HSL 派生色板?
A: 保持 H 与 S 不变、按档位递变 L,即可得到一组视觉上同族、明暗有序的色阶(如 50-950),这正是 Tailwind 等设计系统的调色板生成方式。用 RGB 手工派生很难保持这种规律感。