<hue>

Syntax

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

Werte

<angle>

Ein Winkel, ausgedrückt in Grad, Graden, Radianten oder Umdrehungen unter Verwendung von deg, grad, rad oder turn, jeweils.

<number>

Eine reelle Zahl, die die Gradzahl des Farbtonwinkels darstellt.

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

Beschreibung

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

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

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

Interpolation von <hue> Werten

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

Formale Syntax

<hue> = 
  <number>  |
  <angle>   

Beispiele

Ändern des Farbtons einer Farbe mit einem Schieberegler

Das folgende Beispiel zeigt den Effekt des Änderns des hue-Wertes der hsl() funktionalen Notation 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

Annäherung von Rottönen in verschiedenen Farbräumen

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

Spezifikationen

Browser-Kompatibilität

css.types.color.hsl

css.types.color.hwb

css.types.color.lch

css.types.color.oklch

Siehe auch

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