<hue>

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

<angle>

Ein Winkel, der in Grad, Gon, Radianten oder Umdrehungen ausgedrückt wird, wobei deg, grad, rad oder turn verwendet wird.

<number>

Eine reelle Zahl, die Grad des Farbtons anzeigt.

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

Das obige Farbrad zeigt die Farbtöne in allen Winkeln im sRGB Farbraum. Insbesondere Rot ist bei 0deg, Gelb bei 60deg, Lime bei 120deg, Cyan bei 180deg, Blau bei 240deg und Magenta bei 300deg.

Die Winkeln, die bestimmten Farbtönen entsprechen, unterscheiden sich je nach Farbraum. Zum Beispiel ist der Farbtonwinkel von sRGB-Grün 120deg im sRGB-Farbraum, aber 134.39deg im CIELAB-Farbraum.

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

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

<hue> = 
  <number>  |
  <angle>   

Das folgende Beispiel zeigt die Wirkung der Änderung des hue-Werts 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 lch() und oklch() Funktionen 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>