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 in degs, rads, grads, or turns 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> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

Specifications

Specification
CSS Color Module Level 4 (CSS Color 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()`	No	No	No	No	No	15	No	No	No	No	15	No

The hwb() value has yet to be implemented in any browser. Mozilla bug: 1352755

© 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()