颜色转换器
在 HEX、RGB、HSL、HSV 之间转换任意颜色。可用取色器或在任一字段中输入 — 其他字段实时更新。内含 WCAG 对比度检查，帮助挑选无障碍配色。
适用于跨设计系统迁移颜色、挑选无障碍前景/背景对，以及在不同工具间对齐颜色值。
WCAG 对比度检查器
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
Ratio: —
WCAG 阈值
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
对比度比按 WCAG 2.1 的相对亮度计算，使用线性化的 sRGB 通道和权重 0.2126·R + 0.7152·G + 0.0722·B。
格式说明
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
常见问题
为什么 HSL 与 HSV 与我的 Photoshop / Figma 值不完全一致?
四舍五入。色相 (hue)、饱和度 (saturation)、明度 (lightness) 都是连续值，各工具的舍入方式不同。hue 相差 1°、saturation 相差 1% 是正常且视觉上无差别的。
对比度检查器会考虑 alpha (透明度) 吗?
不会。WCAG 比率假设颜色完全不透明。如果你的前景是半透明，请先将其与背景混合，然后检查合成后的不透明色。
新的对比度算法 APCA 怎么样?
APCA 是 WCAG 3.0 (仍为草案) 中用以替代 WCAG 2.x 比率的候选方案。对于今天的线上工作，审计员和 Lighthouse 检查的仍是 WCAG 2.1 比率。
会向服务器发送任何东西吗?
不会。所有转换和对比度计算都在你的浏览器中运行。