设计工具

颜色与对比度工具

Convert HEX, RGB, and HSL colors, check WCAG contrast ratios, and generate accessible shade ramps locally.

Live preview

Readable interface text

This preview uses the selected foreground and background colors so you can judge legibility beyond the numeric ratio.

Primary actionSecondary label

Contrast

17.06:1
Normal text AA: Pass
Large text AA: Pass
Normal text AAA: Pass
#1a1a2e / rgb(26, 26, 46)
hsl(240 28% 14%)
#ffffff / hsl(0 0% 100%)

Foreground shade ramp

功能亮点

Color Conversion

Convert between HEX, RGB, and HSL values from one input.

WCAG Contrast

Check contrast ratio and AA/AAA pass states for text colors.

Shade Ramp

Generate lighter and darker variants for UI tokens and palettes.

Live Preview

Preview foreground/background combinations at common text sizes.

Copy Values

Copy color values and ramps for CSS variables or design docs.

Browser Local

All color math runs locally with no external service.

常见问题

The checker uses the WCAG relative luminance contrast formula.

Yes. Copy HEX, RGB, HSL, or shade ramp values into CSS custom properties.

No. It checks color contrast, which is one important part of accessible UI design.

持续增长的高效、隐私优先开发者工具集合。所有工具都在浏览器中运行,数据不会离开你的设备。

工具

JSON 解析器JSON Schema 校验器JSON 转换器JSON 转 TypeScriptOpenAPI 查看器代码格式化SQL 格式化cURL 转换器时间戳转换器Cron 解析器URL 编码器二维码工具IP 与 CIDR 计算器Gzip 与 Deflate 工具JWT 解码器JWT 验签与 JWK 工具哈希生成器密码与 TOTPBase64 编码器UUID 生成器图片元数据图片压缩Tiny 图片压缩器图片工具箱 Pro屏幕录制正则测试器文本 DiffMarkdown 与 Mermaid 预览颜色与对比度工具

法律

隐私政策服务条款

© 2026 ZPTools. 保留所有权利。