HWB color model

HWB is a cylindrical-coordinate representation of points in an RGB color model, similar to HSL and HSV. It was developed by HSV’s creator Alvy Ray Smith in 1996 to address some of the issues with HSV. HWB was designed to be more intuitive for humans to use^[1] and slightly faster to compute. The first coordinate, H (Hue), is the same as the Hue coordinate in HSL and HSV. W and B stand for Whiteness and Blackness respectively and range from 0–100% (or 0–1). The mental model is that the user can pick a main hue and then “mix” it with white and/or black to produce the desired color.^[2]

HWB came to prominence in 2014 following its use in the CSS Level 4 Color Module.^[1]

Converting to and from HSV

HWB is very closely related to HSV, and therefore the conversion formulas are fairly simple. ^[2] Before conversion, if the sum of W and B is greater than 1, both W and B must be scaled back proportionally to make the sum 1.

HSV to HWB	HWB to HSV
${\begin{aligned}H&=H\\W&=(1-S)V\\B&=1-V\end{aligned}}$	${\begin{aligned}H&=H\\S&=1-{\frac {W}{1-B}}\\V&=1-B\end{aligned}}$

Swatches

The CSS Color Level 4 draft specification ^[1] includes a number of HWB example color swatches.^[3]

0° Reds
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

30° Red-Yellows (Oranges)
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

60° Yellows
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

90° Yellow-Greens
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

120° Greens
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

150° Green-Cyans
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

180° Cyans
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

210° Cyan-Blues
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

240° Blues
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

270° Blue-Magentas
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

300° Magentas
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

330° Magenta-Reds
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

References

1 2 3 "§7 HWB Colors: hwb() function". CSS Color Module Level 4. W3C. 15 April 2014.
1 2 Smith, Alvy Ray (1996). "HWB — A More Intuitive Hue-Based Color Model" (PDF). Journal of Graphics, GPU and Game tools. 1 (1): 3–17. This is the original paper describing the HWB color model.
↑ CSS Color Module Level 4

This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.

[W3C,_CSS_Color,_HWB-1] 1 2 3 "§7 HWB Colors: hwb() function". CSS Color Module Level 4. W3C. 15 April 2014.

[Smith-2] 1 2 Smith, Alvy Ray (1996). "HWB — A More Intuitive Hue-Based Color Model" (PDF). Journal of Graphics, GPU and Game tools. 1 (1): 3–17. This is the original paper describing the HWB color model.

[CSS_HWD_Examples-3] CSS Color Module Level 4