<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
oderturn
. <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
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:
0° | 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
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
<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
#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
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
<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);
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Color Module Level 4 # typedef-hue |
Browser-Kompatibilität
css.types.color.hsl
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.