The<hue>CSSdata type represents the hue angle of a color.It is used in the color functions that accept hue expressed as a single value, specificallyhsl(),hwb(),lch(), andoklch() functional notations.

Syntax

A<hue> can be either an<angle> or a<number>.

Values

<angle>

An angle expressed in degrees, gradians, radians, or turns using thedeg,grad,rad, orturn, respectively.

<number>

A real number, representing degrees of the hue angle.

As an<angle> is periodic,<hue> is normalized to the range[0deg, 360deg). It implicitly wraps around such that480deg is the same as120deg,-120deg is the same as240deg,-1turn is the same as1turn, and so on.

Description

The color wheel above shows hues at all angles in thesRGBcolor space. In particular,red is at0deg,yellow is at60deg,lime is at120deg,cyan is at180deg,blue is at240deg, andmagenta is at300deg.

The angles corresponding to particular hues differ depending on the color space. For example, the hue angle of sRGB green is120deg in the sRGB color space, but134.39deg in the CIELAB color space.

The following table lists typical colors at various angles in the sRGB (used byhsl() andhwb()), CIELAB (used bylch()), and Oklab (used byoklch()) color spaces:

Interpolation of<hue> values

<hue> values are interpolated as<angle> values, and the default interpolation algorithm isshorter. In some color-related CSS functions, this can be overridden by the<hue-interpolation-method> component.

Formal syntax

<hue> =
<number>|
<angle>

Examples

Changing the hue of a color using a slider

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

HTML

<input type="range" min="0" max="360" value="0" /><p>Hue: <span>0deg</span></p><div></div>

CSS

div {  width: 100px;  height: 100px;  margin: 10px;  border: 1px solid black;}p {  font-family: sans-serif;}span {  font-family: monospace;  background: rgb(0 0 0 / 10%);  padding: 3px;}#hue-slider {  width: 90%;}

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

JavaScript

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`;});

Result

Approximating red hues in different color spaces

The following example shows a similar red color in different color spaces.The values in thelch() andoklch() functions are rounded for readability.

HTML

<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>

CSS

[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);}

div {  font-family: monospace;  width: 100px;  height: 100px;  margin: 10px;  border: 1px solid black;  display: inline-block;}

Result

Specifications

Browser compatibility

css.types.color.hsl

css.types.color.hwb

css.types.color.lch

css.types.color.oklch

See also

• <color>
• <hue-interpolation-method>