W3cubDocs

/CSS

<hue>

The <hue> CSS data type represents a value that can be either a <number> or an <angle> specifying a hue angle (a cylindrical polar color) in degrees of a full circle. It is used in the color functions that accept hue expressed as a single value, specifically hsl(), hwb(), lch(), and oklch() functional notations.

Note: The angles corresponding to particular hues depend on the color space. For example, green in hsl() and hwb(), which use the sRGB color space, is at 120deg. In lch(), which uses the CIELAB color wheel, green is at 134.39deg.

A sRGB color wheel indicating the angle for the hue of the primary (red-green-blue) and secondary (yellow-cyan-magenta) colors

In the sRGB color space, for hsl() and hwb(), red is 0deg, yellow is 60deg, green is 120deg, cyan is 180deg, blue is 240deg, and magenta is 300deg.

Syntax

/* hsl(<hue> <saturation> <lightness>) */
hsl(270 100% 50%);
hsl(270deg 100% 50%);
hsl(300grad 100% 50%);
hsl(0.75turn 100% 50%);
hsl(4.71rad 100% 50%);

/* hwb(<hue> <whiteness> <blackness>) */
hwb(270 0% 0%);
/* lch(<hue> <chroma> <lightness>) */
lch(39.35 121.2% -51.94%);
/* … */

Values

<angle>: An <angle> values expressed in degrees, gradians, radians, or turns using the deg, grad, rad, or turn, respectively.
<number>: An integer or floating point number, representing degrees of the hue angle.

As an <angle> is periodic, normalized to the range of 0deg to 360deg. It implicitly wraps around such that 480deg is the same as 120deg, -120deg is the same as 240deg, -1turn is the same as 1turn, and so on.

Formal syntax

<hue> = 
  <number>  |
  <angle>

Examples

Changing the hue of a color using a slider

The following example shows the effect of changing the hue value of the hsl() functional notation on a color.

<input type="range" min="0" max="360" value="0" id="hue-slider" />
<p>Hue: <span id="hue-value">0deg</span></p>
<div id="box"></div>

#box {
  background-color: hsl(0 100% 50%);
}

const hue = document.querySelector("#hue-slider");
const box = document.querySelector("#box");
hue.addEventListener("input", () => {
  box.style.backgroundColor = `hsl(${hue.value} 100% 50%)`;
  document.querySelector("#hue-value").textContent = `${hue.value}deg`;
});

Approximating red hues in different color spaces

The following example shows a similar red color in different color spaces. The values in the lch() and oklch() functions are rounded for readability.

<div data-color="hsl-red">hsl()</div>
<div data-color="hwb-red">hwb()</div>
<div data-color="lch-red">lch()</div>
<div data-color="oklch-red">oklch()</div>

[data-color="hsl-red"] {
  /* hsl(<hue> <saturation> <lightness>) */
  background-color: hsl(0 100% 50%);
}
[data-color="hwb-red"] {
  /* hwb(<hue> <whiteness> <blackness>) */
  background-color: hwb(0 0% 0%);
}
[data-color="lch-red"] {
  /* lch(<lightness> <chroma> <hue>) */
  background-color: lch(50 150 40);
}
[data-color="oklch-red"] {
  /* oklch(<lightness> <chroma> <hue>) */
  background-color: oklch(0.6 0.4 20);
}

Interpolating hue values

The color-mix() functional notation can be used to interpolate the hue of two colors. Four methods are available for interpolating the hue value: shorter, longer, increasing, and decreasing. The shorter method is the default for interpolation and the result will be the shortest distance between the two angles in degrees. Conversely, longer uses the larger value between the two hue angles.

Note: For more information on using this functional notation, see the color-mix() reference.

<div id="shorter"></div>
<div id="longer"></div>

/* 20 degrees */
#shorter {
  background-color: color-mix(
    in hsl shorter hue,
    hsl(10 100% 50%),
    hsl(350 100% 50%)
  );
}

/* 340 degrees */
#longer {
  background-color: color-mix(
    in hsl longer hue,
    hsl(10 100% 50%),
    hsl(350 100% 50%)
  );
}

Specifications

Specification
CSS Color Module Level 4 # typedef-hue