CSS hwb() Function
Example
div {
background: hwb(240 0% 0%);
}Meaning
The hwb() css function notation expresses a given color according to its hue, whiteness, and blackness.
An optional alpha component represents the color's transparency.
The HWB color model is similar to HSL color model,
As with HSL, HWB can be more intuitive to use than RGB.
A hue is specified in the same way, followed by the amount of whiteness and blackness, respectively, in percentage values.
Note: The HWB function does not use commas to separate its values as with previous color functions.
Note: There is no separate hwba() function as there is with HSL and RGB, the alpha value is an optional parameter, if it is not specified an alpha value of 1 (or 100%) is used. To specify this value a forward slash (/) must follow the blackness value before the alpha value is specified.
Version: CSS3
Standard Syntax
hwb(hue whiteness blackness [/ alpha])Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Function Arguments
The following table describes the arguments of this function.
| Argument | Description |
|---|---|
| H (hue) | It is an angle of the color circle given in degs, rads, grads, or turns in the CSS Color specification.
0(or 360) is red, 120 is green and 240 is blue. |
| W (whiteness) | Specifies the amount of white to mix in, as a percentage from 0% (no whiteness) to 100% (full whiteness). |
| B (blackness) | Specifies the amount of black to mix in, also from 0% (no blackness) to 100% (full blackness). |
| A (alpha) | Optional. Specifies a number between 0 and 1, or a percentage, where the number 1 corresponds to 100% (full opacity). |