颜色转换与对比度检查

浏览器中的颜色模型

CSS 允许用多种形式表达同一种颜色。HEX（#3b82f6）最短也最常用 —— 三或六位十六进制数字直接对应 sRGB 色彩空间的红、绿、蓝通道。RGB 形式（rgb(59 130 246)）功能等价但更便于程序化处理。HSL（hsl(217 91% 60%)）是把颜色重新参数化为色相、饱和度、亮度的圆柱坐标，调亮调暗时更符合直觉。

本工具会解析任意上述记号，统一归一化为 RGB，然后同时输出三种形式。还会按照 WCAG 2.1 计算所选颜色对纯白与纯黑底的对比度，并提示是否达到正文 AA（4.5:1）或 AAA（7:1）。把右侧色块作为快速肉眼校验，再把数值粘进样式表里。

使用场景

• 选定品牌色后即时检查它做正文是否对比度达标。
• 把设计稿里的 HEX 值翻成你更习惯调的 HSL。
• 上线新组件前做无障碍合规检查。
• 从截图中取色后转出 CSS 变量。
• 通过调亮 / 调暗一档，快速生成同色族的浅 / 深变体。

最佳实践

• 正文按 WCAG 2.1 AA 至少做到 4.5:1 对比度，大字号至少 3:1。
• 需要程序化调亮调暗时优先 HSL —— 只动 L 通道。
• 保持同色族（hover / active / disabled）色相不变，只调亮度。
• 尽量避免纯黑（#000）配纯白 —— 略偏灰的底色更护眼。

常见问题