BEST SITE FOR WEB DEVELOPERS
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript HOW TO More 🔍 ◑ REFERENCES EXERCISES
HTML Colors. Lessons for beginners

Ua Es De Fr

Colors HWB

❮ Prev Next ❯

What are HWB colors?

The HWB color is a color model that describes a color using three values:

  • Hue: This is the angle on the color wheel that defines the primary color (e.g., red, green, blue). It is measured in degrees (0 to 360).
  • Whiteness: It is the percentage of white added to the main shade. It is measured as a percentage (from 0 to 100).
  • Blackness: It is the percentage of black added to the main shade. It is measured as a percentage (from 0 to 100).

It helps to accurately determine the color, given how much white or black color there is in it.

How does it work?

Imagine that you have a pure color (for example, red) and you want to make it lighter or darker. If you add more white, the color becomes lighter (less saturated). If you add more black, the color becomes darker (more saturated).

Where are HWB colors used?

The HWB color is used in various fields where it is necessary to accurately and intuitively describe colors:

  • Graphic Design: To create harmonious color palettes, choose colors for websites, logos, illustrations, and more.
  • Web Development: To specify the colors of web page elements using CSS.
  • Image Processing: To edit colors in photos, create color effects, and more.

The HWB model is an alternative to more popular color models such as RGB or HSL, because it is very easy to work with color saturation (if you want to make the color lighter or darker).

Advantages of HWB

  • Ease of use: HWB provides a convenient way to control colors without complicated mathematical calculations. HWB makes it easy to create different shades just by changing the values of Whiteness and Blackness.
  • Straightforward approach: Most people intuitively understand what it means to add white or black to the main color. HWB is straightforward and easy to use, especially for people who don't have in-depth knowledge of color theory.
  • Designer-friendly: HWB gives you more color control than some other models like RGB. If you want to make the color a little lighter or darker, it's very easy to do in HWB.

Disadvantages of HWB

  • Limitations: HWB does not cover all possible colors that exist in nature.
  • Not all apps support HWB: Some graphics apps may not support HWB.
  • Less popular: HWB is not as common as other color models such as RGB or HSL, so it can sometimes be harder to find support or resources to work with it.
  • Maybe inaccurate: Compared to other models, the HWB may not provide the same accuracy when reproducing colors.

Examples of using HWB colors

  • Creating a Color Palette for a Website: You can select a primary hue (Hue) and change the Whiteness and Blackness values to create different shades for buttons, backgrounds, text, and more.
  • Photo editing: You can use HWB to change the brightness and contrast of the image, make it warmer or cooler.
  • Logo Design: You can use HWB to create a unique logo color that will stand out from the rest.

Example

Using HWB colors when styling a web page:

body {
  background-color: hwb(240, 5%, 50%); /* Blue background */
  color: hwb(60 5% 0%); /* Yellow text */
}

HWB (Hue, Whiteness, Blackness) is a suggested standard for CSS4.

How do you get HWB color?

To get an HWB color, you can use the HWB calculator.

HWB Calculator


 
rgb(255, 0, 0)
#ff0000
hsl(0, 100%, 50%)

H:
0
W:
0
B:
0

HTML Support

HWB is not supported in HTML (yet), but it is suggested as a new standard in CSS4.

While waiting for CSS4, you can include W3Schools' Color library, and use HWB as an HTML attribute like this:

Example

<div data-w3-color="hwb(60, 50%, 0)">

<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>

</div>

<script src="/lib/w3color.js"></script>
Try It Yourself »

Conclusion. So, HWB is a convenient model for working with colors, especially if you need to quickly adjust the lightness or darkness of a color.

W3Schools Color Library

The JavaScript library used in the example above can be downloaded from

https://www.w3schools.com/lib/w3color.js

You can also use an alternative download from our website W3SchoolsEn. The Best at the link: https://w3schoolsua.github.io/lib/w3color.js

❮ Prev Next ❯