The hwb() functional notation expresses a given color according to its hue, whiteness, and blackness. An optional alpha component represents the color's transparency.
hwb()
Syntax
hwb(194 0% 0%) /* #00c3ff */ hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
Values
Note: The HWB function does not use commas to separate it's values as with previous color functions and the optional alpha value needs to be preceded with a forward slash (/) if specified.
-
Functional notation:
hwb(H W B[ / A]) -
H(hue) is an<angle>of the color circle given indegs,rads,grads, orturns in CSS Color Module Level 4. When written as a unitless<number>, it is interpreted as degrees, as specified in CSS Color Module Level 3. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an<angle>, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.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) can be a<number>between0and1, or a<percentage>, where the number1corresponds to100%(full opacity).
Specifications
| Specification |
|---|
| CSS Color Module Level 4 # the-hwb-notation |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
hwb |
101
|
101
|
96
|
No
|
No
|
15
|
101
|
101
|
96
|
No
|
15
|
No
|
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb
