Hwb() - Function CSS

Syntax diagram of hwb().

On the diagram, the terms in bold are the predefined terms in CSS, the others are described below:

• color is a possible reference color, introduced by the keyword from. This color can be specified in one of the multiple syntaxes accepted by CSS (see Colors).
• angle est is a numerical value followed by one of CSS angle units. It corresponds to the hue.
• % are percentages representing the values of white and black.
• α is a number between 0 and 1 representing the opacity of the color. Introduced by the slash character.

Description of the hwb() function.

The function hwb() defines a color based on three parameters, which are the hue, the amount of white, and the amount of black.

Color wheel representing the hwb system.

The HWB system was developed to make it more intuitive to determine the parameters of a color or to adjust a color. The principle is to first choose a hue based on a color wheel like the one shown above (also called a chromatic circle), and then add more or less white and/or black to obtain the exact color sought.
This is expressed by three parameters, which are generally referred to as follows:

• h for hue.
• w for white.
• b for black.

The hwb system has the following characteristics:

• When w=100% and b=0%, the rendered color corresponds to white, regardless of the hue value.
• Conversely, when w=0% and b=100%, the color rendered corresponds to black, regardless of the hue value.
• If the two values w and b are set to 100%, the result is gray, regardless of the hue.

The hwb() value can be used with the following properties:

• accent-color : Defines the colour of active or checked items.
• background-color : Sets the background color.
• border-color : Sets the border color for all four sides of the element.
• caret-color : Chooses the color of the text marker (flashing cursor).
• color : Sets the foreground color and assigns a value to currentcolor.
• column-rule-color : Defines the color of the column-separating rules in the context of a multi-column layout, a grid container, or a flex container.
• lighting-color : Sets the color of the lighting in the context of an SVG filter.
• outline-color : Sets the color of the outline.
• scrollbar-color : Sets two colors that will be used for scrollbars.
• text-decoration-color : Defines the color of the decorative line (underlined, stripe...).
• text-emphasis-color : Sets the color of the emphasis characters.

Syntaxes of the hwb() function.

• <propriété>: hwb(45deg 10% 10%); h w b

  The function hwb() expects three required parameters:

  1. h: a positive or negative value with an angle unit (see CSS angle units). This parameter defines the hue: it is a value on the color circle (color wheel).
  2. w: a percentage from 0% to 100%. It indicates the percentage of white that makes up the color.
  3. b: A percentage from 0% to 100%. It indicates the percentage of black that makes up the color.

  Attention! For the values w and b, the percent symbol is mandatory, even if the value is 0.

• <propriété>: hwb(45deg 50% 50% / 50%); h w b α

  The function hwb() accepts an optional fourth parameter:

  1. α: a value between 0 and 1, or a percentage between 0% and 100%. It indicates the degree of opacity of the color: 0 being a completely transparent color, and 1 (or 100%) a completely opaque color.
• <propriété>: hwb(from green h w 50%); c h w b

  Definition of one color in relation to another color. The word from introduces the reference color. The other parameters can then be:

  • The letters h, w, b to keep the value of the reference color.
  • A numerical value or a percentage, to force this parameter to the indicated value.
  • A formula with the function calc() to adjust a parameter in relation to that of the reference color.

  Examples :
  hwb(from red h w b) Restore the reference color (all settings remain unchanged).
  hwb(from red h 90% b) Keep the shade of the reference color but lighten it significantly (white = 90%).
  hwb(from red calc(h + 180) w b) Find the complementary color of the reference color.

Simulator.

Browsers compatibility with hwb() function.

The function hwb() is now properly recognized by all browsers.

Notes:

(1) A calculation error on the values of channels w and b gives a number between 0 and 1 rather than between 0 and 100.

1

hwb()
function

2

Relative
colors

3

Values and
percentages

Estimated overall support.

95%

86%

86%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

1

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Historic of the hwb() function.

• CSS Color Module Level 4

  This level 4 of the specification finally introduces the concept of color spaces, with a number of predefined spaces.
  Introduction of the HWB (Hue, White, and Black) color system and the CIE (International Commission on Illumination) references Lab and LCH.
  Introduction of the color() function, which allows defining a color in a color space other than sRGB.

  Regarding hwb(). Introduction of the HWB system (Hue, White, Black) for color definition.
  

  July 05, 2016

  Working Draft.

  

  July 05, 2022

  Candidate Recommendation.

  

  

• CSS Color Module Level 5

  This level 5 of the specification introduces custom color spaces and relative colors.
  All functions that allow defining a color now accept the from clause to define a color relative to another. The @color-profile at-rule allows you to create your own colorimetric spaces.
  Added new functions such as color-mix(), device-cmyk(), light-dark(), or contrast-color().

  Regarding hwb(). Introduction of relative colors: colors defined in relation to another with the from clause.
  

  March 03, 2020

  Working Draft.

  

  

  

See also. Color management.

As with everything concerning colors, the function hwb() is described in the module CSS Color Module. The following definitions are also described in this specification:

Properties:

Functions:

color()

Defines a color in any color space (sRGB, sRGB-linear, profoto, etc).

color-mix()

Mix two colors in a given color space.

⚠

contrast-color()

Determine a foreground color based on the background color to maximize contrast.

⚠

device-cmyk()

Define a color based on a device, specifying cyan, magenta, yellow, and black values.

hsl()

Determines a color from the Hue, Saturation and Brightness settings, an alternative closer to our way of thinking.

hsla()

Determines a color and its transparency from the Hue, Saturation, Brightness and Alpha parameters.

Hwb()

Defines a color based on its hue and a dose of black and white.

lab()

Defines a color in the L*a*b* system.

lch()

Defines a color in the L*C*H* system.

oklab()

Defines a color in the L*a*b* system with a perceptual correction.

oklch()

Defines a color in the L*C*H* system with a perceptual correction

rgb()

Determines a color from the values ​​of Red, Green and Blue.

rgba()

Determines a color and its transparency from the values ​​of Red, Green, Blue and the Alpha value.

At-rules:

@color-profile

Specifies a color profile that can then be used by the color() function.

Descriptors :

⚠

components

Descriptor usable with the @color-profile at-rule.

⚠

rendering-intent

Descriptor usable with the @color-profile directive. Defines the method for converting from one color profile to another.