颜色格式转换与对比度检查

功能

• HEX、RGB、HSL、HSV 互转，五种写法同时显示，可逐个复制
• 支持 3 位、4 位、6 位、8 位十六进制写法与 rgba / hsla 透明度
• 取色器、文本框、色块预览三向实时联动，另有前景背景一键交换
• WCAG 对比度：给出精确比值，并列出 AA(4.5:1)、AAA(7:1)、大字号 AA(3:1)、大字号 AAA(4.5:1) 四项结论
• 提示这块底色上最清楚的字色及其对比度
• 前景色带透明度时，明确说明对比度是按不透明值算的

使用方法

1. 在输入框里填色值，或用取色器直接点一个颜色
2. 前景色与背景色分别设置，中间是实时预览
3. 下方读出色值与四档对比度结论
4. 点任意一行的「复制」单独取走该格式

常见问题

HSL 和 HSV 有什么区别？

两者都是「色相 + 两个分量」，区别在第二个分量：HSL 的 L 是亮度，L=100% 一定是白色；HSV 的 V 是明度，V=100% 是纯色。取色器面板通常用 HSV（因为选色更直观），CSS 里更常用 HSL。

对比度多少才算够？

WCAG 2 的 AA 级要求正文至少 4.5:1，大字号（约 24px 以上，或 18.66px 以上的粗体）至少 3:1；AAA 级分别是 7:1 与 4.5:1。比值由两个颜色的相对亮度算出，与文字大小、字体无关。

为什么这里算出来的和别的工具差一点？

主要是舍入方式不同：本工具按 WCAG 正文给出的公式计算，显示时保留两位小数。当比值恰好卡在 4.5 或 7 附近时，这一点差异可能改变「达标 / 不达标」的结论，此时建议以更保守的那个为准。

半透明颜色的对比度是怎么算的？

按不透明色值计算，并在界面上提示这一点。半透明颜色的实际观感取决于它叠在什么底色上，严格来说需要先与背景做合成再算对比度，这个结果只能作为参考。