hwb()
The hwb()
functional notation expresses a given color according to its hue, whitness, and blackness. An optional alpha component represents the color's transparency.
Syntax
hwb(194 0% 0%) /* #00c3ff */
hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
hwb(194, 0%, 0%, .5); /* with comma-separated values */
Values
- Functional notation:
hwb[a](H W B[/ A])
H
(hue) is an<angle>
of the color circle given indeg
s,rad
s,grad
s, orturn
s 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>
between0
and1
, or a<percentage>
, where the number1
corresponds to100%
(full opacity).
Specification | Status | Comment |
---|---|---|
CSS Color Module Level 4 | Working Draft | Initial definition |
Browser compatibility
No compatibility data found for css.types.color.hwb
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.
The hwb()
value has yet to be implemented in any browser. Mozilla bug: 1352755