Hubbry Logo
search button
Sign in
HWB color model
HWB color model
Comunity Hub
History
arrow-down
starMore
arrow-down
bob

Bob

Have a question related to this hub?

bob

Alice

Got something to say related to this hub?
Share it here.

#general is a chat channel to discuss anything related to the hub.
Hubbry Logo
search button
Sign in
HWB color model
Community hub for the Wikipedia article
logoWikipedian hub
Welcome to the community hub built on top of the HWB color model Wikipedia article. Here, you can discuss, collect, and organize anything related to HWB color model. The purpose of the hub is to connect p...
Add your contribution
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

[edit]

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

Swatches

[edit]

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

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


References

[edit]
  1. ^ a b c "§7 HWB Colors: hwb() function". CSS Color Module Level 4. W3C. 15 April 2014.
  2. ^ 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.
  3. ^ CSS Color Module Level 4