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% |
Related Pages
CSS reference: CSS colors.
CSS reference: CSS hsl() function.