HWB
表示“Hue, Whiteness, Blackness”。
HWB 是一种颜色模型,使用三组属性来定义颜色。它允许平面设计师和网页设计师通过指定色轮上的一个点来创建颜色,然后按不同的量添加白色或黑色,以调整颜色的亮度和饱和度。与 HSB 和 HSL 模型一样,与修改单独的 RGB 值相比,它提供了一种更直观的颜色调整方式。
HWB 模型使用三个属性来定义每种颜色:
- 色相表示基色在色轮上的角度位置,使用 0° 到 359° 之间的数字表示。纯红色位于色轮顶部的 0° 处,之后依次是 60° 处的黄色、绿色、青色、蓝色和品红色,最后回到红色。
- 白度表示从色轮中取出的纯色相中混入了多少白色,取值范围为 0% 到 100%。白度为 0% 时会得到完全饱和的颜色,而白度为 100% 时会完全去除颜色的饱和度,结果呈白色。
- 黑度表示纯色相中混入了多少黑色,同样以百分比表示。与白度一样,黑度为 0% 时显示完全饱和的颜色,而黑度为 100% 时显示黑色。
混合三个 HWB 属性的方式很像把颜料混合在一起。首先从色轮上的任意位置选择一种纯基色,然后混入白色或黑色来调整其亮度。同时加入白色和黑色会降低颜色的饱和度,使其更接近灰色。如果白色和黑色的总量超过 100%,这些值会被标准化为总和 100%,并使用相同的白色与黑色比例生成一种灰色。例如,白度和黑度值分别为 50%、75% 和 100% 的 HWB 颜色,都会产生相同的灰色。
网页设计师可以在 CSS 中使用 HWB 指定颜色。他们只需简单调整 HWB 数值,就可以更改基色,或使其网站上的颜色变亮、变暗或降低饱和度。例如,如果网页设计师使用 CSS 代码 hwb(180, 25%, 0%) 开始设置一种颜色,就可以增大 W 属性使其变亮,减小 W 使其变暗,或增大 B 属性来降低其饱和度。HWB 于 2014 年首次作为一种颜色方法加入 CSS 规范,但大多数主要网页浏览器直到 2022 年才完全支持它。
NOTE: 使用 HWB 表示的颜色范围与 RGB 相同,只是使用了不同的属性。数字图像仍然包含使用 RGB 值保存的颜色信息,并且可以通过软件轻松将颜色值转换为 RGB或(十六进制)。
测试你的知识