颜色转换与取色器
转换 HEX、RGB、HSL、HSV 与 CMYK 颜色格式，检查 WCAG 对比度并生成调色板。
取色器
颜色格式
输入 HEX 后可即时查看常用颜色表示。
- HEX
- RGB
rgb(255, 87, 51)- HSL
hsl(11, 100%, 60%)- HSV
hsv(11, 80%, 100%)- CMYK
cmyk(0%, 66%, 80%, 0%)- CSS
≈ tomato
对比度检查器（WCAG）
比较前景色与背景色，检查文字阅读对比度。
3.15:1× AA✓ AA 大号文字× AAA× AAA 大号文字
The quick brown fox jumps over the lazy dog0123456789 — 对比度预览文本
调色板
根据当前颜色生成可复制的搭配色。
格式转换示例
#FF5733rgb(255, 87, 51) · hsl(11, 100%, 60%)#FFFFFF / #FF57333.15:1，对应 WCAG AA 大号文字如何使用
- 在取色面板中拖动选择颜色，或直接输入 HEX 值。
- 从颜色格式列表复制所需的 RGB、HSL、HSV、CMYK 或 CSS 值。
- 输入前景色和背景色检查对比度，再选择调色板模式复制搭配色。
能力与限制
- 浏览器本地处理
- 所有颜色换算、对比度计算和调色板生成都在当前浏览器中完成，不会上传或保存颜色值。
- 取色器接受三位或六位 HEX；CSS 颜色名为有限颜色表中的近似结果，不是完整的浏览器命名色匹配。
- WCAG 结果适用于纯色文字与纯色背景；透明度、背景图片、字体大小和字重仍需要在实际界面中复核。
常见问题
- 为什么同一颜色在 CMYK 中看起来可能不同？
- RGB 面向发光屏幕，CMYK 面向印刷油墨。这里给出的是数学近似值，实际印刷还会受纸张、油墨和色彩配置文件影响。
- 对比度通过 AA 就能用于所有文字吗？
- 不能。普通正文通常需要至少 4.5:1；较大的文字可使用 3:1。AAA 的要求更严格，实际页面还需考虑字号和字体粗细。
相关指南
颜色格式与对比度：从 HEX 到可读的界面配色 ↗相关工具
更新于 2026-10-11 · 项目与反馈说明