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 man 180 Grad zum Farbtonwert hinzufügt oder davon abzieht, da sie sich auf demselben Durchmesser des Farbkreises befinden. Beispielsweise hat die Komplementärfarbe eines Farbtons mit 10deg den Farbtonwinkel 190deg.

Nachfolgend sind Beschreibungen der zulässigen Werte für sowohl absolute als auch 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 (was in diesem Fall 0deg entspricht) und den Farbtonwinkel der Farbe darstellt.

Hinweis: Die Winkel, die bestimmten Farbtönen entsprechen, unterscheiden sich über die sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()) Farbräume. Weitere Details und Beispiele finden Sie auf der Referenzseite <hue>.

S

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

L

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

A Optional

Ein <alpha-value> der den Alphakanalwert der Farbe darstellt, 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 explizit keinen Alphakanal anzugeben. Wenn der A Kanalwert nicht explizit angegeben ist, wird standardmäßig 100% angenommen. Wenn enthalten, wird der Wert mit einem 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 eingeschlossen, 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

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

S

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

L

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

A Optional

Ein <alpha-value> der den Alphakanalwert der Ausgabefarbe darstellt, 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 explizit keinen Alphakanal anzugeben. Wenn der A Kanalwert nicht explizit angegeben ist, wird standardmäßig der Alphakanalwert der Ursprungsfarbe angenommen. Wenn enthalten, wird der Wert mit einem Schrägstrich (/) vorangestellt.

Definieren von relativen Farb-Ausgabekanalkomponenten

Wenn relative Farbsyntax innerhalb einer hsl()-Funktion verwendet wird, konvertiert der Browser die Ursprungsfarbe in eine äquivalente HSL-Farbe (falls sie nicht bereits so angegeben ist). Die Farbe wird als drei unterschiedliche Farbkanalwerte definiert — h (Farbton), s (Sättigung) und l (Helligkeit) — plus einem Alphakanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

• Der h-Wert wird zu einer <number> zwischen 0 und 360 aufgelöst, die den Farbtongradwert der Ursprungsfarbe darstellt.
• Die s- und l-Werte werden jeweils zu einem <number> zwischen 0 und 100 aufgelöst, wobei 100 100% entspricht.
• Der alpha-Wert wird zu einem <number> zwischen 0 und 1 aufgelöst.

Beim Definieren einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf verschiedene Arten ausgedrückt werden. Im Folgenden werden wir einige Beispiele untersuchen, um dies zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Das erste Beispiel gibt jedoch dieselbe Farbe wie die Ursprungsfarbe aus, und das zweite Beispiel gibt eine Farbe aus, die nicht auf der Ursprungsfarbe basiert. Diese erzeugen eigentlich keine relativen Farben! Sie würden wahrscheinlich nie in einem echten Codebase verwendet werden, und man würde stattdessen wahrscheinlich einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen über relative hsl()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe von rgb(255 0 0) (entspricht 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 die Ausgabekanalwerte:

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

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

Die nächste Funktion verwendet absolute Werte für die Ausgabefarbenkanalwerte 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-Äquivalent color() von hsl(240 60% 70%): color(srgb 0.52 0.52 0.88).

Die folgende Funktion erzeugt eine relative Farbe, die auf der Ursprungsfarbe basiert:

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

Dieses Beispiel:

• Konvertiert die Ursprungsfarbe (rgb(255 0 0)) in ein äquivalentes hsl() (hsl(0 100% 50%)).
• Setzt den H-Kanalwert für die Ausgabefarbe auf den H-Kanalwert der äquivalenten Ursprungsfarbe hsl() — 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 ist das Äquivalent von 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 Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben ist, wird er standardmäßig auf denselben Wert wie der Alphakanal der Ursprungsfarbe gesetzt. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), beträgt er standardmäßig 1. Daher sind die Ursprungs- und Ausgabealphakanalwerte 1 für die obigen Beispiele.

Lassen Sie uns einige Beispiele betrachten, die die Ursprungs- und Ausgabealphakanalwerte angeben. Das erste Beispiel gibt den Ausgabefarbenalphakanalwert an, der derselbe wie der Alphakanalwert der Ursprungsfarbe ist, während das zweite Beispiel einen anderen Ausgabefarbenalphakanalwert angibt, der nicht mit dem Alphakanalwert der Ursprungsfarbe 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 Ursprungsfarbe rgb() erneut in eine hsl()-Darstellung 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 gestaltet drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color, während die linken und rechten Varianten dieser --base-color aufgehellte und abgedunkelte Varianten erhalten.

Diese Varianten werden unter Verwendung relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in einer hsl()-Funktion übergeben, und die Ausgabefarbe hat ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über eine calc()-Funktion zu erzielen, 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 abgezogen.

<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 Gründen der Abwärtskompatibilität akzeptiert die hsl()-Funktion eine Form, bei der alle Werte mit Kommas getrennt werden.

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 modernen als auch in veralteten (durch Kommas getrennten) Syntaxen 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
• Farbton-Interpolation in color-mix()
• Liste aller Farbnationen
• sRGB Farbwahl- und Umwandlungswerkzeug
• Verwenden von relativen Farben
• CSS-Farben Modul
• Farbwahlwerkzeug von Lea Verou