HWB color model

Color space model From Wikipedia, the free encyclopedia

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

Summarize
Perspective

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%.

More information , ...
HSV to HWB HWB to HSV RGB to HWB
Close

Swatches

Summarize
Perspective

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

More information BW, 000% ...
0° Reds
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
30° Red-Yellows (Oranges)
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
60° Yellows
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
90° Yellow-Greens (Chartreuse Greens)
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
120° Greens
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
150° Green-Cyans (Spring Greens)
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
180° Cyans
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
210° Cyan-Blues (Azures)
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
240° Blues
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
270° Blue-Magentas (Violets)
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
300° Magentas
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close
More information BW, 000% ...
330° Magenta-Reds (Roses)
B
W
0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Close

References

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.