<hue>

Ein <hue> kann entweder ein <angle> oder eine <number> sein.

<angle>

Ein Winkel, ausgedrückt in Grad, Gon, Radiant oder Umdrehungen unter Verwendung von deg, grad, rad oder turn.

<number>

Eine reelle Zahl, die die Grad des Farbtonwinkels darstellt.

Da ein <angle> periodisch ist, wird <hue> im Bereich [0deg, 360deg) normalisiert. Es wird implizit so umwickelt, dass 480deg dasselbe wie 120deg ist, -120deg dasselbe wie 240deg, -1turn dasselbe wie 1turn und so weiter.

Das obige Farbrad zeigt Farbtöne bei allen Winkeln im sRGB-Farbraum. Besonders Rot ist bei 0deg, Gelb bei 60deg, Limonengrün bei 120deg, Cyan bei 180deg, Blau bei 240deg und Magenta bei 300deg.

Die Winkel, die bestimmten Farbtönen entsprechen, variieren je nach Farbraum. Zum Beispiel hat der Farbtonwinkel von sRGB-Grün im sRGB-Farbraum 120deg, im CIELAB-Farbraum jedoch 134.39deg.

Die folgende Tabelle listet typische Farben bei verschiedenen Winkeln in den Farbräumen sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()) auf:

<hue>-Werte werden als <angle>-Werte interpoliert, und der Standardinterpolationsalgorithmus ist shorter. In einigen farbbezogenen CSS-Funktionen kann dies durch die <hue-interpolation-method>-Komponente überschrieben werden.

<hue> = 
  <number>  |
  <angle>   

Das folgende Beispiel zeigt die Auswirkung des Änderns des hue-Wertes der hsl()-Funktionsnotation auf eine Farbe.

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

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

Ergebnis

Das folgende Beispiel zeigt eine ähnliche rote Farbe in verschiedenen Farbräumen. Die Werte in den Funktionen lch() und oklch() sind zur besseren Lesbarkeit gerundet.

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

Ergebnis

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