使用 hwb() 函数可以直观地添加黑白度，它允许开发者直接指定色相、白量（white）和黑量（black），无需像 hsl 那样通过调整亮度来间接控制明暗。具体做法是在定义颜色时，将 hwb(hue, white%, black%) 中的后两个参数设为非零值，例如 hwb(0deg, 50%, 20%) 会生成一种带有明显白色和黑色混合的红色，从而让非设计师也能通过直觉理解颜色的深浅变化。
hwb() 与 hsl() 在控制明暗时的区别是什么
hwb() 的核心优势在于它将“加白”和“加黑”作为独立参数，而 hsl() 仅通过 lightness 一个维度控制明暗。在 hsl() 中，增加亮度会使颜色变浅，但无法直接指定“加入多少白色”；而在 hwb() 中，white% 直接决定颜色的苍白程度，black% 直接决定颜色的深沉程度。这种模型更贴近人类对颜料混合或光线叠加的直觉认知，即通过添加白色来提亮，通过添加黑色来压暗。
/* 基础红色 */
.red-hsl { color: hsl(0, 100%, 50%); }
.red-hwb { color: hwb(0 0% 0%); }
/* 加白：hsl 需提高 lightness，hwb 直接设 white% */
.light-red-hsl { color: hsl(0, 100%, 75%); }
.light-red-hwb { color: hwb(0 50% 0%); }
/* 加黑：hsl 需降低 lightness，hwb 直接设 black% */
.dark-red-hsl { color: hsl(0, 100%, 25%); }
.dark-red-hwb { color: hwb(0 0% 50%); }
上述代码展示了同一色相下，通过不同模型实现相同视觉效果的过程。在 hwb() 中，white% 和 black% 的值可以直接相加，若总和超过 100%，则颜色会被归一化为纯灰色或饱和色，具体行为取决于浏览器实现，但通常遵循 W3C 规范进行插值计算。
当 hwb() 的白量和黑量之和超过 100% 时会发生什么
当 hwb() 的 white% 和 black% 之和超过 100% 时，颜色不会崩溃，而是会根据规范进行归一化处理。具体来说，浏览器会将白量和黑量按比例缩放，使其总和等于 100%，同时保持色相不变。如果白量和黑量都设为 50% 以上，颜色会逐渐趋向于中性灰，因为过多的黑白混合会抵消色相的影响。这种机制确保了颜色始终处于可预测的状态，避免了无效输入导致的渲染错误。
/* 白+黑 > 100% 的情况 */
.overload-hwb { color: hwb(0 60% 60%); }
/* 实际效果接近 hwb(0 50% 50%)，即中性灰 */
.normalized-hwb { color: hwb(0 50% 50%); }
在实际开发中，建议避免设置超过 100% 的总和，以确保颜色符合预期。若需要创建灰色，直接使用 hwb(hue, 50%, 50%) 即可，无需依赖归一化行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
