三种写法描述的是同一件事
- HEX（
#6366F1）：紧凑、易复制，CSS 里最常见； - RGB（
rgb(99, 102, 241)）：每个通道 0–255，便于程序计算与插值； - HSL（
hsl(239, 84%, 67%)）：色相 / 饱和度 / 亮度，贴近人的直觉，调色时最好用。
几个常用色对照
| 颜色 | HEX | RGB | HSL |
|---|---|---|---|
| 红 | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| 中灰 | #808080 | 128, 128, 128 | 0, 0%, 50% |
| 品牌蓝 | #6366F1 | 99, 102, 241 | 239, 84%, 67% |
| 深色背景 | #0F172A | 15, 23, 42 | 222, 47%, 11% |
为什么必须关注对比度
WCAG 对可读性的最低要求：正文文本对比度 ≥ 4.5:1，18pt 以上大字或加粗标题 ≥ 3:1，图标与边框这类非文本元素 ≥ 3:1。浅灰字配白底看起来很“高级”，但对比度常常不足 3:1，在户外或老年用户眼里几乎看不清。
实操建议
- 用 HSL 做色阶：固定 H 与 S，只调 L（如 95% / 85% / 70% / 50%），就能得到一套从浅到深协调的色；
- 深色模式单独选色：直接把浅色主题反转会过曝或发灰，应分别挑背景和前景；
- 交互态也要达标：按钮悬停、禁用态、输入框边框同样影响可读性；
- 别只靠眼睛判断：用对比度检查工具算一遍，成本极低。
几个常被问到的问题
为什么 #FFF 能简写？只有三个通道的两位十六进制都相同时才能缩成三位（#FFFFFF → #FFF），#F0F0F0 就不行。8 位 HEX 是什么？后两位是 alpha 透明度，如 #6366F180 约 50% 不透明。L 的单位是百分比吗？是，别写成 0–255，这是常见错误。
无障碍别忽略
红绿是最常见的混淆对，错误 / 成功状态别只靠颜色区分，同时加图标或文字。键盘用户靠焦点轮廓定位，用 outline: none 取消后必须给等价的可见替代，焦点态也要满足 3:1 对比度。把界面转成灰度看一眼，是最省事的自检。