CSS hwb() Function

Example

Define different HWB(A) colors:

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p2 {background-color:hwb(120 40% 20%);}
#p3 {background-color:hwb(120 40% 20% / 20%);}
#p4 {background-color:hwb(240 40% 20%);}
#p5 {background-color:hwb(240 50% 10%);}
#p6 {background-color:hwb(240 40% 20% / 0.3);}
#p7 {background-color:hwb(300 40% 20% / 0.5);}
#p8 {background-color:hwb(360 40% 20%);}
#p9 {background-color:hwb(360 90% 0%);}

Try it Yourself »

Definition and Usage

The CSS hwb() function specifies a color using the Hue-Whiteness-Blackness model (HWB). An optional alpha component can also be added (represents the transparency of the color).

Version:	CSS Color Module Level 4

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Function
hwb()	101	101	96	15	87
Mix number and % in parameters	121	121	122	No	107

CSS Syntax

Absolute value syntax

hwb(hue whiteness blackness / A)

Value	Description
hue	Required. Defines a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. None can also be used (same as 0deg)
whiteness	Required. Defines the whiteness to mix in; 0% means no whiteness and 100% means full whiteness. None can also be used (same as 0%)
blackness	Required. Defines the blackness to mix in; 0% means no blackness and 100% means full blackness. None can also be used (same as 0%)
/ A	Optional. Represents the alpha channel value of the color (from 0% (or 0) - fully transparent to 100% (or 100) - fully opaque). None can also be used (indicates no alpha channel). The default value is 100%

Relative value syntax

hwb(from color whiteness blackness / A)

Value	Description
from color	Start with the keyword from, followed by a color value that represents the origin color. This is the original color that the relative color is based on
hue	Required. Defines a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. None can also be used (same as 0deg)
whiteness	Required. Defines the whiteness to mix in; 0% means no whiteness and 100% means full whiteness. None can also be used (same as 0%)
blackness	Required. Defines the blackness to mix in; 0% means no blackness and 100% means full blackness. None can also be used (same as 0%)
/ A	Optional. Represents the alpha channel value of the color (from 0% (or 0) - fully transparent to 100% (or 100) - fully opaque). None can also be used (indicates no alpha channel). The default value is 100%