颜色工具

HEX / RGB / HSL / HSV 互转 · 调色板 · WCAG 对比度检查 · CSS 渐变生成

1. 颜色转换器

任意格式输入，其他自动同步

拾色器

2. 调色板

基于当前颜色生成，点击色块复制 HEX

#64ADF2

#648AF2

#6467F2

#8564F2

#A864F2

3. 对比度检查 (WCAG)

检测前景色与背景色的可读性等级

前景色 (文字)

背景色

大号文字 (24px)正文文字 (14px)。The quick brown fox jumps over the lazy dog. 0123456789

4.47

对比度比率

AA 正常文字≥ 4.5✗ 不通过

AA 大号文字≥ 3.0✓ 通过

AAA 正常文字≥ 7.0✗ 不通过

AAA 大号文字≥ 4.5✗ 不通过

4. CSS 渐变生成

可视化编辑颜色与角度，一键复制 CSS

类型

角度 90°

颜色 stops

100%

background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

工具介绍

四种颜色模型

HEX十六进制表示 (#RRGGBB),网页中最常用

RGB红 / 绿 / 蓝三原色 (0-255),显示器色彩

HSL色相 (0-360) / 饱和度 / 亮度,设计师友好

HSV色相 / 饱和度 / 明度,拾色器常见

调色板和谐类型

类比 (Analogous) — 相邻色 (色相差 ±15°/±30°),和谐统一
互补 (Complementary) — 色相差 180°,对比强烈,适合突出
分裂互补 (Split-Complementary) — 互补色相邻两侧,对比但更柔和
三元 (Triadic) — 三色等距 (色相差 120°),活泼平衡
四元 (Tetradic) — 四色两组互补,丰富多样
单色 (Monochromatic) — 同色不同亮度,简洁优雅

WCAG 对比度等级

WCAG (Web 内容无障碍指南) 规定文字与背景的对比度最小值,确保色弱 / 视力不佳的用户也能阅读:

AA正常文字 ≥ 4.5 · 大文字 (≥18pt) ≥ 3.0

AAA正常文字 ≥ 7.0 · 大文字 (≥18pt) ≥ 4.5

公式: (L1 + 0.05) / (L2 + 0.05),L 为相对亮度。比率范围 1:1 至 21:1。

CSS 渐变类型

linear-gradient — 沿直线方向过渡,可指定角度 (0°=从下到上)
radial-gradient — 从中心向外辐射,默认椭圆,可改为 circle
conic-gradient — 围绕中心点旋转扫描,适合饼图、色环

常见用途

UI 配色品牌设计无障碍检测设计稿标注渐变背景数据可视化

常见问题

Q:Hex 输入后没有实时更新?

HEX 必须以 # 开头且为 3 位或 6 位有效十六进制字符 (0-9 / A-F)。错误的字符会导致整行校验失败,此时其他格式会保持上一次有效值。

Q:为什么 HSL 和 HSV 不同?

HSL 用亮度 (Lightness),HSV 用明度 (Value/Brightness)。纯黑在 HSL 是 L=0%,在 HSV 是 V=0%;纯红在 HSL 是 L=50%,在 HSV 是 V=100%。两者饱和度计算相同,但中间过渡不同。

Q:WCAG "大号文字" 怎么定义?

WCAG 规定:普通正文 ≥ 18pt (≈ 24px) 或粗体 ≥ 14pt (≈ 18.66px) 视为大号文字。大号文字对比度要求更宽松。