<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
.
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 thedeg
,grad
,rad
, orturn
, 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
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.
HTML
<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>
CSS
#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 the lch()
and oklch()
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);
}
Result
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.
HTML
<div id="shorter"></div>
<div id="longer"></div>
CSS
/* 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%)
);
}
Result
Specifications
Specification |
---|
CSS Color Module Level 4 # typedef-hue |
Browser compatibility
BCD tables only load in the browser