hwb()

The hwb() functional notation expresses an sRGB color according to its hue, whiteness, and blackness. An optional alpha component represents the color's transparency.

Syntax

css

hwb(194 0% 0%) /* #00c3ff */
hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */

Values

Functional notation: hwb(H W B[ / A])

H

A <number>, an <angle>, or the keyword none, which represents the hue angle. More details on this type can be found on the <hue> reference.

W, B

Each as a <percentage> or the keyword none, which represent whiteness and blackness, respectively. They specify the amount of white and black to mix in, from 0% (no whiteness or blackness) to 100% (full whiteness or blackness).

If W + B = 100%, it defines some shade of gray. If W + B > 100%, W and B are effectively normalized as W / (W + B) and B / (W + B), respectively.

A Optional

An <alpha-value> or the keyword none, where the number 1 corresponds to 100% (full opacity).

Note: This functional notation serializes to sRGB values, and the values of the red, green, blue components may be rounded in serialization.

Note: See Missing color components for the effect of none.

Formal syntax

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<alpha-value> = 
  <number>      |
  <percentage>

Specifications

Specification
CSS Color Module Level 4 # the-hwb-notation

Browser compatibility

BCD tables only load in the browser