CSS HWB Colors

CSS HWB Colors

CSS HWB colors describe a color using hue, whiteness, and blackness, with an optional alpha value for transparency.

HWB stands for Hue, Whiteness, and Blackness. It provides an intuitive way to adjust a color by starting with a hue and then mixing in different amounts of white and black.

HWB Syntax

An HWB color is written with the hwb() color function. The three components represent hue, whiteness, and blackness.

color: hwb(200 0% 20%);

Hue identifies the base color, while whiteness and blackness specify how much white and black are mixed with that hue.

Hue

Hue selects the base color using the same circular hue scale used by HSL. A full rotation contains 360 degrees.

color: hwb(0 0% 0%);     /* Red */
color: hwb(120 0% 0%);   /* Green */
color: hwb(240 0% 0%);   /* Blue */

Red begins at approximately 0deg, green at 120deg, and blue at 240deg. A hue of 360deg returns to the same position as 0deg.

Whiteness

Whiteness controls how much white is mixed into the selected hue. Increasing the percentage makes the color appear lighter and less saturated.

color: hwb(200 0% 0%);
color: hwb(200 25% 0%);
color: hwb(200 50% 0%);

A whiteness value of 0% adds no white, while increasing the value mixes progressively more white into the color.

Blackness

Blackness controls how much black is mixed into the selected hue. Increasing the percentage makes the color progressively darker.

color: hwb(200 0% 0%);
color: hwb(200 0% 25%);
color: hwb(200 0% 50%);

A blackness value of 0% adds no black, while increasing the value mixes progressively more black into the color.

Whiteness & Blackness

Whiteness and blackness can be adjusted together to create lighter, darker, and more muted versions of the selected hue.

color: hwb(200 10% 10%);
color: hwb(200 20% 20%);
color: hwb(200 30% 30%);

If the combined whiteness and blackness values exceed 100%, the browser normalizes the two values so their proportions are preserved and their combined amount equals 100%. At that point, the hue no longer affects the resulting color.

HWB Alpha Transparency

An optional alpha value can be added after a slash to control the transparency of an HWB color.

background-color: hwb(200 0% 20% / 0.5);

An alpha value of 1 is fully opaque, while 0 is fully transparent. Values between them create partial transparency.

background-color: hwb(200 0% 20% / 1);
background-color: hwb(200 0% 20% / 0.75);
background-color: hwb(200 0% 20% / 0.5);
background-color: hwb(200 0% 20% / 0);

Alpha can also be written as a percentage, with 100% representing fully opaque and 0% representing fully transparent.

HWB Example

Use the Hue, Whiteness, and Blackness sliders to create a color, then adjust Alpha to change its transparency. The current HWB color value updates as the sliders move.

<style>
.color-example {
  background-color: hwb(200 0% 20% / 0.8);
  color: white;
}
</style>

<div class="color-example">HWB Color</div>

Hue changes the base color, whiteness mixes white into the color, blackness mixes black into it, and alpha controls the transparency of the resulting color.