#2b6cb0
它如何工作
任何输入都会被归一化成 {r,g,b} 三个 0–255 的通道值，再从这一份中间表示生成其余格式，所以四种写法永远一致。HEX 支持 #abc 简写与 #aabbcc 全写；rgb() / hsl() 用正则解析，兼容逗号与空格分隔。
对比度按 WCAG 2.1 的相对亮度公式计算：先把 sRGB 通道做伽马还原（c/255 后大于 0.03928 时取 ((c+0.055)/1.055)^2.4），加权得到亮度 L = 0.2126R + 0.7152G + 0.0722B，再做 (L1+0.05)/(L2+0.05)。正文文字需达到 4.5:1（AA），大号文字需 3:1。
WCAG 达标门槛
| 用途 | AA（最低） | AAA（增强） |
|---|---|---|
| 正文文字（< 18.66px 或非粗体） | 4.5 : 1 | 7 : 1 |
| 大号文字（≥ 24px 或 ≥ 18.66px 粗体） | 3 : 1 | 4.5 : 1 |
| 图形与界面控件边界 | 3 : 1 | — |
常见问题
HSL 的 L 和 HSV 的 V 有什么区别？
HSL 里 L=50% 是纯色，最亮最暗都趋近白黑；HSV 里 V=100% 已经是最亮，饱和度和明度是独立的两根轴。设计取色时用 HSL 更直观，调色板算法里常用 HSV。
为什么两个颜色看起来差很多，对比度却不高？
相对亮度是按人眼敏感度加权的（绿色权重最高 0.7152，蓝色最低 0.0722）。所以深蓝与深红的观感差异不小，亮度却接近，对比度自然偏低。
色阶是干什么用的？
给出同一色相从浅到深的 9 档，方便补齐 hover / active / 边框 / 背景等状态色。点击任意一格即可切换为当前颜色。
怎么用
- 在取色区选一个颜色，或者直接把 HEX、RGB 数值贴进对应输入框。
- 其他格式会自动跟着变，点任意格式即可复制。
- 点生成色阶按钮，得到一组由浅到深的同色系颜色。
- 分别选好前景色和背景色，下方立刻显示对比度数值和是否达标。
适用场景
- 设计稿里只有 RGB 值，需要填进样式表的十六进制写法。
- 检查正文颜色和背景的对比度，确认弱光环境下也看得清。
- 为一个主色生成整套明暗色阶，用在按钮、悬停和禁用状态。
注意事项
- HEX 输入建议带井号开头，只写 6 位数字也能识别，3 位简写会自动展开，带透明度的 8 位写法只在部分格式间转换
- 对比度按 WCAG 2.1 计算，半透明颜色会先与白色底合成再取色，叠在图片上时实际观感可能不同
- 色阶默认生成 10 级，起止颜色差得太小会出现色带，差得太大中间几级会显得断层
- 所有换算都在浏览器本地完成，你输入的颜色值不会上传到服务器
- 这里算的是屏幕用的 RGB 色值，不能直接当印刷 CMYK 色号使用
- 取色器依赖浏览器支持，老旧浏览器里可能只能手动输入色值