#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 / 边框 / 背景等状态色。点击任意一格即可切换为当前颜色。