颜色转换

HEX / RGB / HSL / HSV 互转、色阶与 WCAG 对比度

颜色输入

取色器

示例文字 · #3b82f6

色阶（100–900）

100

200

300

400

500

600

700

800

900

各格式表示

HEX: #3b82f6
HEX8（含透明度）: #3b82f6ff（不透明）
RGB: 59, 130, 246
CSS rgb(): rgb(59, 130, 246)
CSS hsl(): hsl(217.2, 91.2%, 59.8%)
HSL: 217.2°, 91.2%, 59.8%
HSV: hsv(217.2, 76%, 96.5%)
亮度（相对）: 123.3

配色方案

互补色 #f6af3b

#3bdff6

#3bb1f6

#3b82f6

#3b53f6

#523bf6

WCAG 对比度检查

正文 AA ≥ 4.5:1，AAA ≥ 7:1

3.68:1

文字颜色

背景颜色

正文示例：这段文字是否符合对比度要求？大号文字示例

正文 AA (4.5:1)

正文 AAA (7:1)

大字 AA (3:1)

大字 AAA (4.5:1)

HEX#3b82f6

RGB59, 130, 246

色相217°H

饱和度91%S

亮度60%L

对比度3.68:1不满足正文 AA

关于颜色转换

在 CSS 里写 hsl() 更好调明暗，在设计稿里拿到的是 HEX，而后端接口可能返回 rgb()——同一个颜色在不同地方有不同的写法。本工具接受 HEX（#rgb / #rrggbb / #rrggbbaa）、rgb()、rgba()、hsl()、hsla() 等写法，实时换算出全部格式并提供一键复制。

除了格式转换，还会基于当前颜色生成 100–900 的色阶（向白与向黑插值，可直接用作 Tailwind 风格的色板）、互补色与类比 / 三角 / 四角和谐配色。对比度面板按 WCAG 2.1 计算前景色与背景色的对比度，并判断是否满足 AA（4.5:1）与 AAA（7:1）标准，帮你快速确认文字是否可读。

常见问题

WCAG 的 AA 和 AAA 是什么意思？

这是无障碍标准里对文字与背景对比度的要求：AA 要求正文至少 4.5:1、大号文字（18.66px 粗体或 24px 以上）至少 3:1；AAA 更严格，正文要求 7:1、大号文字 4.5:1。对比度范围是 1:1（完全相同）到 21:1（纯黑与纯白）。

HSL 和 HSV 有什么区别？

两者都用色相 H 与饱和度 S，区别在第三个分量：HSL 的 L 是亮度，100% 一定是白色；HSV 的 V 是明度，100% 表示该色相最鲜艳的状态。设计工具（如 Photoshop 的取色器）多用 HSV，CSS 用 HSL。

HEX 的 8 位写法是什么？

8 位 HEX 是在 6 位颜色后追加两位透明度（alpha），例如 #ff000080 表示红色、透明度约 50%（0x80 / 255 ≈ 0.502）。本工具支持解析并显示对应的 rgba() 写法。