颜色工具

转换 · 预览 · 无障碍检查

在 HEX / RGB / HSL 任一框里输入, 另两个即时同步; 也可以直接拖动取色滑块。工具还会基于当前色相生成六档明暗色阶。

你会得到

• 三种写法同时显示 —— `#c2410c`、`rgb(194, 65, 12)`、`hsl(19, 88%, 40%)`
• 明暗色阶 —— 同色相同饱和度下的六个亮度档, 可直接用于 hover、描边、背景
• WCAG 对比度 —— 用真实公式(相对亮度 + 1.05 偏移)分别对白底与近黑底计算, 并给出评级:
• 4.5:1 —— 正文文字的 AA 标准
• 3:1 —— 大号文字(18.66px 粗体或 24px 常规)、描边与 UI 图标的 AA 标准
• 7:1 —— 正文文字的 AAA 标准

为什么要查对比度

对比度不足是网页最常见的无障碍缺陷, 也直接影响可读性与跳出率。上线前花几秒查一次品牌色, 代价极低。

说明

• HEX 支持 `#abc` 与 `#aabbcc`(`#` 可省略); RGB 支持 `r, g, b`; HSL 支持 `h, s%, l%`
• 色阶只改亮度、保留色相与饱和度, 所以仍是同一色系
• 全部在浏览器内计算: 不上传、不追踪

FAQ

需要达到多少对比度?

正文 4.5:1(AA)、大字与 UI 元素 3:1、AAA 正文 7:1。能更高就更高。

HSL 和 RGB 为什么感觉不同?

它们是同一颜色的不同坐标表示。HSL 对人更友好: 调一个数就能换色相或改明暗。

生成的色阶能直接用于设计吗?

可以。固定色相与饱和度、只改亮度, 是构建一致色阶的标准做法。