Thanks to visit codestin.com
Credit goes to developer.mozilla.org

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<hue>

Der <hue> CSS Datentyp repräsentiert den Farbtonwinkel einer Farbe. Er wird in den Farb-Funktionen verwendet, die einen Farbton als Einzelwert akzeptieren, insbesondere in den funktionalen Notationen hsl(), hwb(), lch() und oklch().

Syntax

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

Werte

<angle>

Ein Winkel, ausgedrückt in Grad, Graden, Radianten oder Umdrehungen, mit deg, grad, rad oder turn entsprechend.

<number>

Eine reelle Zahl, die die Grad des Farbtonwinkels darstellt.

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

Beschreibung

Ein sRGB-Farbrad

Das obige Farbrad zeigt 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 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 in den Farbräumen sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()) auf:

60° 120° 180° 240° 300°
sRGB
CIELAB
Oklab

Interpolation von <hue>-Werten

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

Formale Syntax

<hue> = 
<number> |
<angle>

Beispiele

Ändern des Farbtons einer Farbe mit einem Schieberegler

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

HTML

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

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

JavaScript

js
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 an Rottöne 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

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

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

Ergebnis

Spezifikationen

Specification
CSS Color Module Level 4
# typedef-hue

Browser-Kompatibilität

css.types.color.hsl

css.types.color.hwb

css.types.color.lch

css.types.color.oklch

Siehe auch