纯色指不含灰度、不掺白不掺黑的正统颜色，在HSL中定义为饱和度100%且亮度50%，如hsl(0,100%,50%)为正红；仅当saturation和lightness同时满足该值才为CSS纯色。
什么是纯色，HSL里怎么定义它
纯色在视觉上指不含灰度、不掺白不掺黑的“正统”颜色，比如标准红、蓝、绿。在 HSL 模型中，它对应的是 saturation: 100% 且 lightness: 50% 的值——饱和度拉满才能排除灰色成分，亮度居中才能避开变浅（发白）或变暗（发黑）。
hsl(0, 100%, 50%) 是正红，hsl(120, 100%, 50%) 是正绿，hsl(240, 100%, 50%) 是正蓝。只要固定后两个参数，只调 hue（0–360），就能扫出全部纯色。
HSL纯色写法常见错误
直接套用设计工具导出的 HSL 值容易翻车，因为很多取色器默认输出的是“感知均匀”或带 alpha 的变体，并非严格纯色：
- 设计软件（如 Figma）吸出来的
hsl(198, 87%, 62%)看似蓝，但saturation和lightness偏离了 100%/50%，实际是带灰的“雾霾蓝” - 写成
hsl(200, 100%, 60%)：亮度 >50% → 发亮、偏青白，不再是纯色 - 写成
hsl(200, 90%, 50%)：饱和度
关键判断：只有同时满足 saturation: 100% 和 lightness: 50%，才叫 CSS 意义下的纯色。
立即学习“前端免费学习笔记（深入）”；
如何用 CSS 变量动态生成纯色集
适合需要多色主题、按钮状态色、图表配色等场景，避免硬编码一堆 hsl()：
- 定义基础色相变量：
--hue-primary: 210; - 所有衍生纯色统一用：
hsl(var(--hue-primary), 100%, 50%) - 切换主题时只需改
--hue-primary，整套纯色自动更新
button {
background: hsl(var(--hue-primary), 100%, 50%);
}
button:hover {
background: hsl(calc(var(--hue-primary) + 30), 100%, 50%);
}注意：calc() 在 hsl() 内部支持良好（Chrome 84+、Firefox 87+、Safari 15.4+），但旧 Safari 对 hsl(calc()) 解析不稳定，生产环境建议预计算或加降级。
纯色在真实 UI 中的使用边界
纯色冲击力强，但直接大面积铺陈易造成视觉疲劳或可访问性问题：
- 文本用纯色（如
hsl(0, 100%, 50%)红）配白底，对比度高达 12:1，但对红绿色盲用户几乎不可读 - 纯色按钮在深色模式下若未重置
lightness，会变成极亮斑点（hsl(120, 100%, 50%)在黑底上刺眼） - 部分 OLED 屏幕长时间显示高饱和纯色区域可能引发烧屏，尤其红色（
hsl(0, 100%, 50%)）
真正需要“纯”的地方其实很窄：图标填充、小面积强调色、色卡展示页。多数交互组件该用略降饱和或微调亮度的变体，而不是死守 100%/50%。
