Curriculum Schedule

CSS Reference Manual

CSS Attribute

Elective Courses

Course Recommendation:

CodeW3C.com Treasure Box

CSS hwb() Function

Previous Page CSS hue-rotate() function
Next Page CSS hypot() function
Go Up One Level CSS Function Reference Manual

Definition and Usage

CSS hwb() The function uses the hue-whiteness-blackness model (HWB) to specify colors. An optional opacity channel can also be added to represent the color's opacity.

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

CSS syntax

Absolute value syntax

hwb(hue whiteness blackness / A)

Value	Description
hue	Required. Defines the angle on the color wheel (0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. You can also use none (equivalent to 0deg).
whiteness	Required. Defines the whiteness of the mixture; 0% represents no whiteness, 100% represents complete whiteness. You can also use none (equivalent to 0%).
blackness	Required. Defines the blackness of the mixture; 0% represents no blackness, 100% represents complete blackness. You can also use none (equivalent to 0%).
/ A	Optional. Represents the opacity channel value of the color (0% or 0 represents completely transparent, 100% or 100 represents completely opaque). You can also use none (which represents no opacity channel). The default value is 100%.

Relative value syntax

hwb(from color whiteness blackness / A)

Value	Description
from color	Starts with the keyword from, followed by the color value representing the original color. This is the original color based on the relative color.
hue	Required. Defines the angle on the color wheel (0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. You can also use none (equivalent to 0deg).
whiteness	Required. Defines the whiteness of the mixture; 0% represents no whiteness, 100% represents complete whiteness. You can also use none (equivalent to 0%).
blackness	Required. Defines the blackness of the mixture; 0% represents no blackness, 100% represents complete blackness. You can also use none (equivalent to 0%).
/ A	Optional. Represents the opacity channel value of the color (0% or 0 represents completely transparent, 100% or 100 represents completely opaque). You can also use none (which represents no opacity channel). The default value is 100%.