hsl()

Komplementärfarben mit hsl() können definiert werden, indem 180 Grad zum Farbtonwert addiert oder davon subtrahiert werden, da sie auf dem gleichen Durchmesser des Farbkreises positioniert sind. Zum Beispiel, wenn der Farbtonwinkel einer Farbe 10deg beträgt, hat ihre Komplementärfarbe 190deg als Farbtonwinkel.

Nachfolgend sind 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

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

Hinweis: Die Winkel, die bestimmten Farbnuancen entsprechen, unterscheiden sich zwischen den Farbräumen sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()). Weitere Details und Beispiele finden Sie auf der <hue>-Referenzseite.

S

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

L

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

A Optional

Ein <alpha-value>, das den Alphakanal-Wert der Farbe repräsentiert, wobei die Zahl 0 0% entspricht (vollständig transparent) und 1 100% entspricht (vollständig undurchsichtig). Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, liegt er standardmäßig bei 100%. Falls inkludiert, wird der Wert von einem Schrägstrich (/) eingeleitet.

Relative Wertsyntax

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

Die Parameter sind wie folgt:

from <color>

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

H

Eine <number>, ein <angle> oder das Schlüsselwort none (entspricht in diesem Fall 0deg) repräsentiert den Ausgabefarben-<hue>-Winkel.

S

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

L

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

A Optional

Ein <alpha-value>, das den Alphakanal-Wert der Ausgabefarbe repräsentiert, wobei die Zahl 0 0% entspricht (vollständig transparent) und 1 100% entspricht (vollständig undurchsichtig). Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, liegt er standardmäßig beim Alphakanalwert der ursprünglichen Farbe. Falls inkludiert, wird der Wert von einem Schrägstrich (/) eingeleitet.

Definition der Ausgabekanal-Komponenten relativer Farbausgaben

Wenn die relative Farbsyntax innerhalb einer hsl()-Funktion verwendet wird, konvertiert der Browser die ursprüngliche Farbe in eine gleichwertige HSL-Farbe (falls sie nicht bereits so spezifiziert wurde). Die Farbe wird als drei separate Farbkanalwerte definiert — h (Farbton), s (Sättigung) und l (Helligkeit) — plus einen Alphakanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabefarbenkanalwerte verwendet zu werden:

• Der h-Wert wird auf einen <number> zwischen 0 und 360, inklusiv, aufgelöst, der den Farbtonwert der ursprünglichen Farbe repräsentiert.
• Die s- und l-Werte werden jeweils auf einen <number> zwischen 0 und 100, inklusiv, aufgelöst, wobei 100 gleichbedeutend mit 100% ist.
• Der alpha-Wert wird auf einen <number> zwischen 0 und 1, inklusiv, aufgelöst.

Beim Definieren einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf mehrere verschiedene 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. Allerdings gibt das erste Beispiel die gleiche Farbe wie die ursprüngliche Farbe zurück und das zweite gibt eine Farbe aus, die überhaupt nicht auf der ursprünglichen Farbe basiert. Sie erstellen eigentlich keine relativen Farben! Sie würden diese wahrscheinlich nie in einem echten Codebase verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen über die relative hsl()-Syntax aufgenommen.

Beginnen wir mit einer ursprünglichen Farbe von rgb(255 0 0) (entspricht hsl(0 100% 50%)). Die folgende Funktion gibt die gleiche Farbe wie die ursprüngliche Farbe aus — sie verwendet die h-, s- und l-Kanalwerte (0, 100% und 50%) der ursprünglichen Farbe 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 Ausgabefarbkanalwerte und gibt eine völlig andere Farbe aus, die nicht auf der ursprünglichen Farbe basiert:

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

Im obigen 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 ursprünglichen Farbe:

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

Dieses Beispiel:

• Konvertiert die ursprüngliche Farbe (rgb(255 0 0)) in ein hsl()-Äquivalent (hsl(0 100% 50%)).
• Setzt den H-Kanalwert für die Ausgabefarbe auf den H-Kanalwert der ursprünglichen hsl()-Äquivalentfarbe — 0.
• Setzt die S- und L-Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der ursprünglichen Farbe basieren: 30% und 60%.

Die endgültige Ausgabefarbe ist das Äquivalent von hsl(0 30% 60%) im sRGB-Farbraum — color(srgb 0.72 0.48 0.48).

In den bisher gesehenen Beispielen in diesem Abschnitt wurden die Alphakanäle weder für die ursprünglichen noch für die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht spezifiziert ist, übernimmt er standardmäßig denselben Wert wie der Alphakanal der ursprünglichen Farbe. Wenn der Alphakanal der ursprünglichen Farbe nicht spezifiziert ist (und es sich um keine relative Farbe handelt), liegt der Standardwert bei 1. Daher sind die Werte der Ursprung- und Ausgabekanäle in den obigen Beispielen 1.

Schauen wir uns einige Beispiele an, die Ursprung- und Ausgabekanäle spezifizieren. Das erste Beispiel spezifiziert den Ausgabekanalwert als den gleichen wie den Ursprungskanalwert, wohingegen das zweite Beispiel einen anderen Ausgabekanalwert spezifiziert, der nicht mit dem Ursprungskanalwert zusammenhängt.

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()-Repräsentation konvertiert — 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 funktioniert gut mit conic-gradient(), 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 linken und rechten aufgehellte und abgedunkelte Varianten dieser --base-color erhalten.

Diese Varianten werden mithilfe relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in eine hsl()-Funktion eingespeist, und die Ausgabefarbe hat ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über eine calc()-Funktion zu erreichen, während der Farbton und die 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

Das Ergebnis ist wie folgt:

Aus Kompatibilitätsgründen akzeptiert die hsl()-Funktion eine Form, in der alle Werte unter Verwendung von 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 in der modernen als auch in der alten (Komma-getrennten) 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() Farbfunktionen
• Farbtoninterpolation in color-mix()
• Liste aller Farbnotationen
• sRGB-Farbauswahl und Konvertierungstool
• Verwendung relativer Farben
• CSS Farben Modul
• Farbwähler-Tool von Lea Verou