<hue>

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

Syntax

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

Werte

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

Beschreibung

Ein sRGB-Farbrad

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:

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

Den Farbton einer Farbe mit einem Slider ändern

Das folgende Beispiel zeigt die Auswirkung 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

Rote Farbtöne in verschiedenen Farbräumen annähern

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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hsl() (HSL color model)
Alpha parameter
Mix <percentage> and <number> in parameters
Relative HSL colors
Space-separated parameters

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

css.types.color.hwb

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hwb() (HWB color model)
Mix <percentage> and <number> in parameters
Relative HWB colors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

css.types.color.lch

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
lch() (LCH color model)
Mix <percentage> and <number> in parameters
Relative LCH colors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

css.types.color.oklch

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
oklch() (OKLCH color model)
Mix <percentage> and <number> in parameters
Relative Oklch colors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

Siehe auch