颜色转换

在 HEX、RGB 和 HSL 之间转换,并检查对比度。单向的 HEX 转 RGB 仍在 HEX 转 RGB

这一页做什么

同一种颜色可以写成 HEX、RGB 或 HSL。这一页让三种写法保持同步,并对照第二种 HEX 检查对比度。单向的 HEX 转 RGB 仍在 HEX 转 RGB。

怎么用

  1. 输入 HEX,或 R、G、B,或 H、S、L。其余字段和色块会随输入更新。没有转换按钮。
  2. 对比色是用来算对比度的第二种 HEX。
  3. 显示示例把对比色设为 #e8f0f6,HEX 设为 #112233。R 是 17,G 是 34,B 是 51。H 是 210,S 是 50,L 是 13。比值是 14.02:1。正文 AA、AAA 和大字 AA 都通过。
  4. 全部清除清空所有字段、色块和比值。

规则和边界

#RGB 会把每位数字重复一次,所以 #123 是 #112233。不是 3 位或 6 位十六进制会报错。H 是 0 到 360,S 和 L 是 0 到 100,R、G、B 是 0 到 255。对比度用 WCAG 相对亮度。正文 AA 是 4.5:1,AAA 是 7:1,大字 AA 是 3:1。对比色为空时不显示比值。

用在哪

  • 把一种深色 HEX 转成 HSL。
  • 看深蓝在浅底上的对比度。
  • 把同一种颜色读成 17、34、51。

常见问题

这一页转换 HSB、HWB 或 CMYK 吗?

不转换。它转换 HEX、RGB 和 HSL,并显示对比度。

为什么三项都通过?

14.02:1 高于 7,所以 #112233 放在 #e8f0f6 上时,正文 AA、AAA 和大字 AA 都通过。