HWB color model

HWB (Hue, Whiteness, Blackness) 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 was included in the CSS Level 4 Color Module in 2014.^[1]

Conversion

HWB is very closely related to HSV, and therefore the conversion formulas are fairly simple.^[2] Before conversion from HWB, if the sum of whiteness and blackness exceeds 100%, both components must be scaled back proportionally to make the sum 100%.

HSV to HWB	HWB to HSV	RGB to HWB
${\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}}$	${\begin{aligned}H&=\ldots \\W&=\min(R,G,B)\\B&=1-\max(R,G,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 (Chartreuse 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 (Spring Greens)
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 (Azures)
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 (Violets)
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 (Roses)
B W	000%	020%	040%	060%	080%	100%
000%
020%
040%
060%
080%
100%

References

^ ^a ^b ^c "§7 HWB Colors: hwb() function". CSS Color Module Level 4. W3C. 15 April 2014.
^ ^a ^b 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 color-related article is a stub. You can help Wikipedia by expanding it.

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

[Smith-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

[1]

[2]

[3]

v t e Color space
List of color spaces Color models
CAM	CIECAM02 iCAM CAM16 CIECAM16
CIE	XYZ (1931) RGB (1931) YUV (1960) UVW (1964) CIELAB (1976) CIELUV (1976) CIECAM02 CIECAM16
RGB	RGB color spaces sRGB rg chromaticity Adobe Wide-gamut ProPhoto scRGB DCI-P3 Rec. 601 SMPTE 240M/"C" Rec. 709 Rec. 2020 Rec. 2100
Y′UV	YUV PAL YDbDr SECAM YIQ NTSC YCbCr Rec. 601 Rec. 709 Rec. 2020 Rec. 2100 ICtCp Rec. 2100 YPbPr MAC xvYCC YCoCg
Other	CcMmYK CMYK ColorADD Coloroid LMS Hexachrome HSL, HSV HCL Imaginary color Oklab OSA-UCS PCCS RG RYB HWB YJK TSL
Color systems and standards	ACES ANPA Colour Index International CI list of dyes DIC Federal Standard 595 HKS ICC profile ISCC–NBS Munsell NCS Ostwald Pantone RAL list JIS Z8102 [ja]
For the vision capacities of organisms or machines, see Color vision.