颜色转换与对比度

在 HEX、RGB、HSL 和 HSV 之间转换颜色，并根据 WCAG 标准检查文字和背景的对比度。

文件与内容均在您的浏览器中处理，不会上传至我们的服务器。

工具说明

输入 HEX、RGB、HSL 或 HSV 色值，即可查看其他格式的对应结果。还可以选择文字颜色和背景颜色，检查对比度是否符合 WCAG AA 或 AAA 对普通文字和大号文字的要求。

功能

在 HEX、RGB、HSL 和 HSV 之间转换
即时预览颜色
计算 WCAG 对比度
显示 AA 和 AAA 检查结果
一键复制色值

使用方式

输入颜色: 键入 #hex、rgb()、hsl() 或使用选色器。
查看转换: 复制 CSS 或设计令牌需要的格式。
检查对比: 设置文字与背景色验证可读性。

示例

检查品牌配色是否符合 WCAG AA
将 Figma 中的 HEX 色值转换为 CSS 变量使用的 hsl() 格式
检查深色模式中的文字颜色
记录设计系统中的颜色层级

限制

对比度预览对透明度的支持有限
取色准确度依屏幕校正
输入的色彩值会直接在您的浏览器中处理，不会发送至服务器。

常见问题

WCAG AA 对比度标准？: 一般文字需 4.5:1；大字（18pt+ 或 14pt 粗体）需 3:1。
HSL 与 HSV 差异？: HSL 的 lightness 与 HSV 的 value 不同；两者皆显示以对应各工具惯例。
透明度会影响对比度吗？: 半透明文字在复杂背景上需手动合成；平面色票假设不透明色。