CSS Function - hwb()

The hwb() function in CSS is used to define a color using the red, green, and blue color channels, as per the hue, whiteness and blackness components of these color channels. It allows you to specify a color by specifying the intensity of each of these three primary colors.

To add the color transparency, an optional alpha component can be passed to the hwb() function.

Possible values

The functional notation for hwb() function is hwb(H W B[ / A]).

  • H: can contain either of the format(s), that represents the hue angle :

    • a <number>: any number between 0 and 255.

    • an <angle>: any value between 0deg and 360deg.

    • keyword none

  • W: can contain either of the format(s), that represents the whiteness:

    • a <percentage>: specifies the amount of white to mix in. Can have any value between 0% (no whiteness) and 100% (full whiteness).

    • keyword none

  • B: can contain either of the format(s), that represents the blackness:

    • a <percentage>: specifies the amount of black to mix in. Can have any value between 0% (no blackness) and 100% (full blackness).

    • keyword none

  • A: represents the transparency of the color. It is an optional value.

    • <alpha-value>: any number between 0 and 1, where 1 corresponds to full opacity and 0 corresponds to full transparency.

    • keyword none

The values of the red, green and blue components are rounded in serialization, as the functional notation serializes it as sRGB.

Syntax

hwb(154 25% 50%) | hwb(154deg, 25%, 50%) | hwb(154 25% 50% / 0.5)

CSS hwb() - Using conic-gradient()

Following is an example showing the usage of hwb() function in a conic-gradient() function:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .hwb-conic{
      background: conic-gradient(hwb(270 100% 50%),
         hwb(80 20% 20%),
         hwb(0 30% 10% / 0.7),
         hwb(194 0% 0%));
   }
   </style>
</head>
<body>
   <p>hwb() with conic-gradient()</p>
   <div class="hwb-conic"></div>
</body>
</html>

CSS hwb() - With or Without alpha value

Following is an example showing the usage of hwb() function where all the three values are passed with and without the alpha value (number values):

<html>
<head>
<style>
      div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .color-hwb-1{
      background-color: hwb(70deg 60% 80%);
   }
   .color-hwb-2{
      background-color: hwb(80 20% 20%);
   }
   .color-hwb-alpha-number{
      background-color: hwb(0 30% 10% / 0.7);
   }
   .color-hwb-alpha-percent{
      background-color: hwb(194 0% 0% / 100%);
   }
   </style>
</head>
<body>
   <div class="color-hwb-1">hwb(70deg 60% 80%)</div>
   <div class="color-hwb-2">hwb(80 ,20%, 20%)</div>
   <div class="color-hwb-alpha-number">hwb(0 30% 10% / 0.7)</div>
   <div class="color-hwb-alpha-percent">hwb(194 0% 0% / 100%)</div>
</body>
</html>
Advertisements