颜色转换 / 取色器

在线颜色转换与取色工具，支持 HEX、RGB、HSL、HSV 双向实时互转，附带 WCAG 对比度检测与深浅变体，纯浏览器本地计算。

本地计算 · 数据不上传

工具说明

把颜色在 HEX、RGB、HSL、HSV 四种表示之间互转。修改任意一个输入框，其余三种会即时同步更新；也可以直接用原生取色器挑选颜色。底部还提供 WCAG 相对亮度对比度检测，帮助你判断前景色与背景色是否易于阅读。

输入 #3366CC，可得到：

HEX:  #3366cc
RGB:  rgb(51, 102, 204)
HSL:  hsl(220, 60%, 50%)
HSV:  hsv(220, 75%, 80%)

在「对比度检测」里选前景色 #111827 与背景色 #ffffff，即可得到约 16.7:1 的对比度，同时通过 AA 与 AAA 标准。

WCAG 2.1 要求正文文本对比度至少 4.5:1（AA），大字号（≥18.66px 粗体或 ≥24px）至少 3:1；更高等级的 AAA 要求分别为 7:1 与 4.5:1。

Q1.为什么改一个框其他的也会变？

四种格式描述的是同一个颜色，工具以 RGB 为内部基准，任何一处修改都会重新计算其余三种，保证它们始终表示同一种颜色。

Q2.对比度 4.5:1 是什么含义？

这是 WCAG AA 级对正文文本的最低要求，表示前景与背景的相对亮度比值。比值越高越容易辨认，大字号的最低要求是 3:1。

Q3.数据会被上传吗？

不会。所有转换与对比度计算都在浏览器内完成，断网也能正常使用。

Q4.HSL 和 HSV 有什么区别？

两者都用色相、饱和度描述颜色，但 HSL 用亮度（Lightness）、HSV 用明度（Value）表示明暗，同一数值下呈现的颜色会有差异，按你的习惯选用即可。