hsl()

background: hsl(50 80% 40%);

background: hsl(150deg 30% 60%);

background: hsl(0.3turn 60% 45% / 0.7);

background: hsl(0 80% 50% / 25%);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

Komplementärfarben mit hsl() können definiert werden, indem 180 Grad zum Farbtonwert hinzugefügt oder von ihm abgezogen werden, da sie auf demselben Durchmesser des Farbkreises positioniert sind. Zum Beispiel, wenn der Farbtonwinkel einer Farbe 10deg beträgt, hat ihre Komplementärfarbe einen Farbtonwinkel von 190deg.

Nachfolgend sind die Beschreibungen der zulässigen Werte sowohl für absolute als auch für relative Farben aufgeführt.

Absolute Wertsyntax

hsl(H S L[ / A])

Die Parameter sind wie folgt:

H

Ein <number>, ein <angle>, oder das Schlüsselwort none (entspricht 0deg in diesem Fall) und repräsentiert den <hue> Winkel der Farbe.

Hinweis: Die Winkel, die bestimmten Farbtönen entsprechen, unterscheiden sich zwischen den sRGB-Farbräumen (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()). Siehe die <hue> Referenzseite für mehr Details und Beispiele.

S

Ein <percentage> oder das Schlüsselwort none (entspricht 0% in diesem Fall). Dieser Wert repräsentiert die Sättigung der Farbe, wobei 100% vollständig gesättigt und 0% vollständig entsättigt (grau) ist.

L

Ein <percentage> oder das Schlüsselwort none (entspricht 0% in diesem Fall). Dieser Wert repräsentiert die Helligkeit der Farbe, wobei 100% weiß, 0% schwarz und 50% "normal" ist.

A Optional

Ein <alpha-value> repräsentiert den Alpha-Kanalwert der Farbe, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig undurchsichtig) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um kein Alpha-Kanal explizit anzugeben. Wenn der A Kanalwert nicht explizit angegeben wird, ist der Standardwert 100%. Falls angegeben, ist der Wert durch einen Schrägstrich (/) vorangestellt.

Relative Wertsyntax

hsl(from <color> H S L[ / A])

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from wird immer verwendet, wenn eine relative Farbe definiert wird, gefolgt von einem <color>-Wert, der die Ursprungsfarbe darstellt. Dies ist die ursprüngliche Farbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kann jede gültige <color>-Syntax sein, einschließlich einer anderen relativen Farbe.

H

Ein <number>, ein <angle>, oder das Schlüsselwort none (entspricht 0deg in diesem Fall) und repräsentiert den <hue> Winkel der Ausgabefarbe.

S

Ein <percentage> oder das Schlüsselwort none (entspricht 0% in diesem Fall). Dies repräsentiert die Sättigung der Ausgabefarbe, wobei 100% vollständig gesättigt und 0% vollständig entsättigt (grau) ist.

L

Ein <percentage> oder das Schlüsselwort none (entspricht 0% in diesem Fall). Dies repräsentiert die Helligkeit der Ausgabefarbe, wobei 100% weiß, 0% schwarz und 50% "normal" ist.

A Optional

Ein <alpha-value> repräsentiert den Alpha-Kanalwert der Ausgabefarbe, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig undurchsichtig) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um kein Alpha-Kanal explizit anzugeben. Wenn der A Kanalwert nicht explizit angegeben wird, ist der Standardwert des Alpha-Kanalwerts der Ursprungsfarbe. Falls angegeben, ist der Wert durch einen Schrägstrich (/) vorangestellt.

Definition von Ausgabekanalkomponenten relativer Farben

Bei der Verwendung der relativen Farbsyntax innerhalb einer hsl()-Funktion wandelt der Browser die Ursprungsfarbe in eine gleichwertige HSL-Farbe um (falls sie nicht bereits als solche angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert — h (Farbton), s (Sättigung) und l (Helligkeit) — plus ein Alpha-Kanal-Wert (alpha). Diese Kanalwerte sind innerhalb der Funktion verfügbar, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

• Der h-Wert wird als <number> zwischen 0 und 360 aufgelöst, einschließlich, der den Farbton-Gradwert der Ursprungsfarbe darstellt.
• Die s- und l-Werte werden jeweils als <number> zwischen 0 und 100 aufgelöst, einschließlich, wobei 100 100% entspricht.
• Der alpha-Wert wird als <number> zwischen 0 und 1 aufgelöst, einschließlich.

Bei der Definition einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf mehrere Arten ausgedrückt werden. Im Folgenden werden einige Beispiele untersucht, um diese zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Das erste Beispiel gibt jedoch die gleiche Farbe wie die Ursprungsfarbe aus und das zweite Beispiel gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erstellen tatsächlich keine relativen Farben! Sie würden diese in einer echten Codebasis wahrscheinlich nie verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen über relative hsl()-Syntax aufgenommen.

Fangen wir mit einer Ursprungsfarbe von rgb(255 0 0) an (entsprechend hsl(0 100% 50%)). Die folgende Funktion gibt dieselbe Farbe wie die Ursprungsfarbe aus — sie verwendet die h-, s- und l-Kanalwerte der Ursprungsfarbe (0, 100% und 50%) als Ausgabekanalwerte:

hsl(from rgb(255 0 0) h s l)

Die Ausgabe dieser Funktion ist das sRGB color()-Äquivalent von hsl(0 100% 50%): color(srgb 1 0 0).

Die nächste Funktion verwendet absolute Werte für die Ausgabekanalwerte der Farbe und gibt eine völlig andere Farbe aus, die nicht auf der Ursprungsfarbe basiert:

hsl(from rgb(255 0 0) 240 60% 70%)

In diesem Fall ist die Ausgabefarbe das sRGB color()-Äquivalent von hsl(240 60% 70%): color(srgb 0.52 0.52 0.88).

Die folgende Funktion erstellt eine relative Farbe basierend auf der Ursprungsfarbe:

hsl(from rgb(255 0 0) h 30% 60%)

Dieses Beispiel:

• Wandelt die Ursprungsfarbe (rgb(255 0 0)) in ein hsl()-Äquivalent (hsl(0 100% 50%)) um.
• Setzt den H-Kanalwert der Ausgabefarbe auf den H-Kanalwert des hsl()-Äquivalents der Ursprungsfarbe — 0.
• Setzt die S- und L-Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungsfarbe basieren: 30% und 60% respektive.

Die endgültige Ausgabefarbe entspricht hsl(0 30% 60%) im sRGB Farbraum — color(srgb 0.72 0.48 0.48).

In den Beispielen, die wir bisher in diesem Abschnitt gesehen haben, wurden die Alpha-Kanäle weder für die Ursprungsfarben noch für die Ausgabefarben explizit angegeben. Wenn der Alpha-Kanal der Ausgabefarbe nicht spezifiziert wird, wird standardmäßig derselbe Wert wie der Alpha-Kanal der Ursprungsfarbe verwendet. Wenn der Alpha-Kanal der Ursprungsfarbe nicht spezifiziert wird (und es sich nicht um eine relative Farbe handelt), ist der Standardwert 1. Daher sind die Alpha-Kanalwerte der Ursprungs- und Ausgabefarbe in den obigen Beispielen 1.

Schauen wir uns einige Beispiele an, die die Alpha-Kanalwerte der Ursprungs- und Ausgabefarben spezifizieren. Das erste Beispiel spezifiziert den Alpha-Kanalwert der Ausgabe als mit dem Alpha-Kanalwert der Ursprungsfarbe identisch, während das zweite Beispiel einen anderen Alpha-Kanalwert der Ausgabe spezifiziert, der nicht mit dem Alpha-Kanalwert der Ursprung in Verbindung steht.

hsl(from rgb(255 0 0 / 0.8) h s l / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

hsl(from rgb(255 0 0 / 0.8) h s l / 0.5)
/* Computed output color: color(srgb 1 0 0 / 0.5) */

Im folgenden Beispiel wird die rgb() Ursprungsfarbe erneut in eine hsl() Darstellung umgewandelt — hsl(0 100% 50% / 0.8). calc() Berechnungen werden auf die H-, S-, L- und A-Werte angewendet, und die endgültige Ausgabefarbe ist das Äquivalent von hsl(60 80% 30% / 0.7) im sRGB Farbraum: color(srgb 0.72 0.72 0.08 / 0.7).

hsl(from rgb(255 0 0 / 0.8) calc(h + 60) calc(s - 20) calc(l - 10) / calc(alpha - 0.1))

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<alpha-value> = 
  <number>      |
  <percentage>  

Die hsl() Funktion arbeitet gut mit conic-gradient() zusammen, da beide mit Winkeln arbeiten.

<div></div>

CSS

div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360 100% 50%),
    hsl(315 100% 50%),
    hsl(270 100% 50%),
    hsl(225 100% 50%),
    hsl(180 100% 50%),
    hsl(135 100% 50%),
    hsl(90 100% 50%),
    hsl(45 100% 50%),
    hsl(0 100% 50%)
  );
  clip-path: circle(closest-side);
}

Ergebnis

Dieses Beispiel stylt drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color, während die linke und rechte je eine aufgehellte und abgedunkelte Variante dieser --base-color erhalten.

Diese Varianten werden unter Verwendung relativer Farben definiert — die benutzerdefinierte Eigenschaft custom property --base-color wird in eine hsl()-Funktion übergeben, und die Ausgabefarbe hat ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über eine calc()-Funktion zu erreichen, während Farbton und Sättigung unverändert bleiben. Die aufgehellte Farbe hat 20% zum Helligkeitskanal hinzugefügt, und die abgedunkelte Farbe hat 20% davon subtrahiert.

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
}

/* As per the spec, s and l values should resolve to a number between 0-100
   However, Chrome 121+ incorrectly resolves them to numbers between 0-1
   hence currently using calculations like l + 0.2 instead of l + 20 */

#one {
  background-color: hsl(from var(--base-color) h s calc(l + 0.2));
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: hsl(from var(--base-color) h s calc(l - 0.2));
}

/* Use @supports to add in support for old syntax that requires % units to
   be specified in lightness calculations. This is required for
   Safari 16.4+ */
@supports (color: hsl(from red h s calc(l - 20%))) {
  #one {
    background-color: hsl(from var(--base-color) h s calc(l + 20%));
  }

  #three {
    background-color: hsl(from var(--base-color) h s calc(l - 20%));
  }
}

Ergebnis

Die Ausgabe ist wie folgt:

Aus Kompatibilitätsgründen akzeptiert die hsl()-Funktion eine Form, in der alle Werte durch Kommas getrennt sind.

HTML

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: hsl(0 100% 50% / 50%);
}

div.comma-separated {
  background-color: hsl(0, 100%, 50%, 0.5);
}

Ergebnis

Das Beispiel zeigt, wie die hsla()-Syntax ein Alias für hsl() ist; beide werden sowohl von moderner als auch von alter (kommaseparierter) Syntax unterstützt.

HTML

<div class="modern">HSL</div>
<div class="legacy">HSL</div>
<div class="modernWithAlpha">HSL</div>
<div class="modernHSLA">HSLA</div>
<div class="legacyHSLA">HSLA</div>

CSS

div {
  width: 100px;
  min-height: 50px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  display: flex;
  gap: 20px;
}

div.modern {
  background-color: hsl(90 80% 50%);
}

div.legacy {
  background-color: hsl(90, 80%, 50%);
}

div.modernWithAlpha {
  background-color: hsl(90 80% 50% / 50%);
}

div.modernHSLA {
  background-color: hsla(90 80% 50% / 50%);
}

div.legacyHSLA {
  background-color: hsla(90, 80%, 50%, 0.5);
}

Ergebnis

• <hue> Datentyp
• lch() und hwb() Farb-Funktionen
• Farbtoninterpolation in color-mix()
• Liste aller Farbnotationen
• sRGB Farbwähler und Konvertierungstool
• Verwendung relativer Farben
• CSS Farben Modul
• Farbwähler-Tool von Lea Verou