CSS Data Type - <hue>

The CSS data type <hue> is used to describe the hue angle of a color. The color functions that accept hue as a single value, uses this data type. Some of these functions are: hsl(), hwb(), lch(), and oklch().

The different colors are red at 0deg, yellow at 60deg, lime at 120deg, cyan at 180deg, blue at 240deg and magenta at 300deg

Possible values

The data type <hue> can have one of the values:

  • <angle>: Specifies an angle value expressed in deg, grad, rad or turn respectively.

  • <number>: Specifies a number, representing degrees of the hue angle.

Since an <angle> is periodic, the value of <hue> gets normalized to the range [0deg, 360deg], such that, 480deg is same as 120deg, -120deg is same as 240deg, -1turn is same as 1turn, and so on.

Syntax

<hue> = <angle> | <number>

Note: Based on the color space, the angles correspond to a particular hue. For instance, the hue angle of sRGB green is 120deg in the sRGB color space, but in CIELAB color space it is 134.39deg.

CSS <hue> - Hues in different color spaces

The following example demonstrates the use of <hue> data type in different color spaces:

<html>
<head>
<style>  
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      padding: 5px;
      display: inline-block;
   }
   .hsl {
      background-color:hsl(50 100% 50%);
   }
   .hwb {
      background-color: hwb(50 0% 0%);
   }
   .oklch {
      background-color: oklch(0.9 0.2 3);
   }
   .lch {
      background-color: lch(80 150 20);
   }
</style>
</head>
<body>
   <div class="hsl">hsl</div>
   <div class="hwb">hwb</div>
   <div class="oklch">oklch</div>
   <div class="lch">lch</div>
</body>
</html>

CSS <hue> - Changing Hue Of A Color

The following example demonstrates the use of <hue> data type where hue of a color is changing with varying degrees:

<html>
<head>
<style>  
   div {
      width: 80px;
      height: 80px;
      border: 2px solid black;
      padding: 5px;
      display: inline-block;
   }
   .hsl-0 {
      background-color:hsl(0 100% 50%);
   }
   .hsl-30 {
      background-color:hsl(30 100% 50%);
   }
   .hsl-60 {
      background-color:hsl(60 100% 50%);
   }
   .hsl-90 {
      background-color:hsl(90 100% 50%);
   }
   .hsl-180 {
      background-color:hsl(180 100% 50%);
   }
   .hsl-200 {
      background-color:hsl(200 100% 50%);
   }
   .hsl-270 {
      background-color:hsl(270 100% 50%);
   }
   .hsl-360 {
      background-color:hsl(360 100% 50%);
   }
</style>
</head>
<body>
   <div class="hsl-0">hsl-0deg</div>
   <div class="hsl-30">hsl-30deg</div>
   <div class="hsl-60">hsl-60deg</div>
   <div class="hsl-90">hsl-90deg</div>
   <div class="hsl-180">hsl-180deg</div>
   <div class="hsl-200">hsl-200deg</div>
   <div class="hsl-270">hsl-270deg</div>
   <div class="hsl-360">hsl-360deg</div>
</body>
</html>
Advertisements