HWB

Stands for "Hue, Whiteness, Blackness."

HWB is a color model that defines colors using sets of three attributes. It allows graphic and web designers to create a color by specifying a point on the color wheel, and then adding white or black in varying amounts to adjust the color's brightness and saturation. Like the HSB and HSL models, it provides a more intuitive way to adjust colors than modifying individual RGB values.

The HWB model uses three attributes to define each color:

  • Hue represents the angular position of the base color on the color wheel, using a number between 0° and 359°. Pure red is at the top of the color wheel at 0°, followed by yellow at 60°, then green, cyan, blue, and magenta before it circles back to red.
  • Whiteness represents how much white is mixed into the pure hue from the color wheel, as a percentage from 0 to 100%. A whiteness of 0% results in a fully saturated color, while a whiteness of 100% fully desaturates the color and appears white.
  • Blackness represents how much black is mixed into the pure hue, also as a percentage. Like whiteness, a blackness of 0% shows a fully saturated color, while a blackness of 100% appears black.

Mixing the three HWB attributes works much like mixing paints together. You start with a pure base color from any point on the color wheel, then adjust its brightness by mixing in white or black. Adding both white and black together desaturates the color and brings it closer to grey. If the combined amount of white and black exceeds 100%, the values are normalized to add up to 100% and produce a shade of grey using the same ratio of white and black. For example, an HWB color with white and black values of 50%, 75%, and 100% all produce the same shade of grey.

Web designers can specify colors using HWB within CSS. They can make simple adjustments to HWB numbers to change the base color or brighten, darken, or desaturate colors on their websites. For example, if a web designer starts with a color using the CSS code hwb(180, 25%, 0%), they can make it lighter by increasing the W attribute, darken it by decreasing W, or desaturate it by increasing the B attribute. HWB was first added as a color method to the CSS specification in 2014, but most major web browsers did not fully support it until 2022.

NOTE: The possible range of colors using HWB is the same as with RGB, only with a different set of attributes. Digital images still include color information saved using RGB values, and a color value can be easily converted to RGB (or hexadecimal) through software.

Updated November 10, 2023 by Brian P.

quizTest Your Knowledge

What does the "4K" in 4K video refer to?

A
The video stream requires 4 Kbps of bandwidth.
0%
B
The color depth is at least 4 kilobits per pixel.
0%
C
The image is approximately 4,000 pixels wide.
0%
D
The image is approximately 4,000 pixels tall.
0%
Correct! Incorrect!     View the 4K definition.
More Quizzes →

The Tech Terms Computer Dictionary

The definition of HWB on this page is an original definition written by the TechTerms.com team. If you would like to reference this page or cite this definition, please use the green citation links above.

The goal of TechTerms.com is to explain computer terminology in a way that is easy to understand. We strive for simplicity and accuracy with every definition we publish. If you have feedback about this definition or would like to suggest a new technical term, please contact us.

Sign up for the free TechTerms Newsletter

How often would you like to receive an email?

You can unsubscribe or change your frequency setting at any time using the links available in each email.

Questions? Please contact us.