0

编码结果

HWB 颜色

关于 HWB 颜色

HWB 颜色是使用色相、白色度和黑色度三个成分表示颜色的颜色模型。色相指定基础色味，白色度和黑色度指定混入多少白色和黑色，因此更容易直观地调整为更浅、更暗或更接近灰色的颜色。

成分含义示例值
H: 色相以角度表示色味。红色约为 0deg，绿色约为 120deg，蓝色约为 240deg。90deg
W: 白色度表示混入颜色中的白色量。值越大，颜色越偏白。20%
B: 黑色度表示混入颜色中的黑色量。值越大，颜色越偏黑。30%

例如，红色等主要颜色可以表示如下。

颜色HWB 表示RGB 表示
红色hwb(0deg 0% 0%)rgb(255 0 0)
绿色hwb(120deg 0% 49.8%)rgb(0 128 0)
亮绿色hwb(120deg 0% 0%)rgb(0 255 0)
蓝色hwb(240deg 0% 0%)rgb(0 0 255)
白色hwb(0deg 100% 0%)rgb(255 255 255)
黑色hwb(0deg 0% 100%)rgb(0 0 0)

要包含透明度，请添加 Alpha 值。例如，半透明红色可以表示为 hwb(0deg 0% 0% / 0.5)。

色相、白色度、黑色度的处理

色相按角度处理，超过 360deg 的值或负值会标准化到 0deg 到 360deg 的范围。例如，hwb(360deg 0% 0%) 会作为与 hwb(0deg 0% 0%) 相同的颜色处理，hwb(-120deg 0% 0%) 会作为与 hwb(240deg 0% 0%) 相同的颜色处理。

白色度和黑色度按 0% 到 100% 的范围处理。白色度越大，颜色越接近白色；黑色度越大，颜色越接近黑色。当白色度和黑色度的合计为 100% 以上时，无论色相如何，都会作为灰色系颜色处理。

HWB 和 HSL 的区别

HSL 使用饱和度和明度调整颜色，适合指定颜色的鲜艳程度和明亮程度。HWB 通过混入白色和黑色的量来调整颜色，因此更容易说明“保持相同色相并变白”或“加入黑色使其变暗”等操作。

不过，HWB 也不是在人类知觉上完全均匀的色彩空间。若要更容易处理视觉明亮度或色差，可以使用 Lab、LCH、Oklab、Oklch 等色彩空间。