HSL的L=100%必然为纯白，因其几何模型定义L轴两端为单点：L=100%是双六棱锥顶点，强制归一化所有通道至rgb(255,255,255)，不保留任何色相或饱和度信息。
hsl() 的 100% 亮度为什么总是纯白
hsl() 中 lightness: 100% 在所有合规浏览器中必然渲染为纯白（rgb(255, 255, 255)），这不是“有时”或“取决于设备”，而是由 HSL 模型定义强制决定的。它的几何本质是双圆锥体（或双六棱锥）的顶部顶点：无论 hue 是 0 还是 270，也无论 saturation 是 0% 还是 100%，只要 lightness 达到 100%，所有颜色通道就被归一化为最大值。
常见误解来自把 HSL 和 HSV/HSB 混淆——HSV 的 value: 100% 是“该色相最亮的版本”，可能带蓝调或黄调；而 HSL 的 lightness: 100% 是绝对无条件的白色，不保留任何色相信息。
哪些场景会让人误以为 “100% 不是纯白”
这种错觉通常不是渲染问题，而是观察条件干扰：
- 使用了
background-clip: border-box+ 半透明边框时，底层背景叠加导致视觉上“发灰”或“偏色”，实际边框像素仍是纯白 - 在深色模式下启用系统级色彩管理（如 macOS 的 Display P3 或 Windows HDR），CSS 颜色会被色彩空间转换，但转换目标仍是 D65 白点下的纯白，只是显示设备无法完全复现
- 开发者用肉眼对比屏幕不同区域（比如左侧是
hsl(0, 0%, 100%)，右侧是#ffffff），因 Gamma 补偿或子像素渲染差异产生主观偏差，但二者在 sRGB 下数值完全一致
hsl(0, 0%, 100%) 和 hsl(240, 100%, 100%) 渲染结果一样吗
一样，都是纯白。hsl(0, 0%, 100%)：色相无关、饱和度为 0 → 灰阶，亮度 100% → 白hsl(240, 100%, 100%)：高饱和蓝 + 最高亮度 → 模型强制坍缩为白（因为 L=100% 定义覆盖一切）
立即学习“前端免费学习笔记（深入）”；
这正是 HSL 几何模型的关键约束：L 轴是中心对称轴，两端（0% 和 100%）是单点，不携带色相或饱和度维度信息。它不像 RGB 那样允许“带色的亮色”，也不像 LCH 那样支持更广色域下的高亮保色。
真正要注意的边界情况
-
hsl(180, 100%, 99%)和hsl(180, 100%, 100%)视觉差异极大：前者是极浅青灰，后者是纯白。这个跃变发生在最后 1% 区间，容易被忽略 - 使用
color-mix(in srgb, ...)或lch()做高亮过渡时，hsl()的 L=100% 会成为硬截断点，无法平滑衔接 - 在 CSS 自定义属性中写
--bg: hsl(210, 20%, 100%)，后续用lighten()类函数处理时，部分预处理器（如 Sass）可能错误地尝试“再提亮”，结果无效且难调试
HSL 的亮度定义干净利落，但正因如此，它在 L=100% 处没有余量——那里不是“很亮”，而是“终点”。
