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%;
}

Das Definieren von komplementären Farben mit hsl() kann durch Addieren oder Subtrahieren von 180 Grad vom Farbtonwert erfolgen, da sie sich auf demselben Durchmesser des Farbkreises befinden. 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

Ein <number>, ein <angle> oder das Schlüsselwort none (in diesem Fall gleichbedeutend mit 0deg), das den <hue>-Winkel der Farbe darstellt.

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

S

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

L

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

A Optional

Ein <alpha-value>, der den Alpha-Kanalwert der Farbe repräsentiert, 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 anzugeben, dass kein Alpha-Kanal vorhanden ist. Wenn der A-Kanalwert nicht explizit angegeben wird, beträgt der Standardwert 100%. Falls enthalten, wird 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 eingeschlossen, 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

Ein <number>, ein <angle> oder das Schlüsselwort none (in diesem Fall gleichbedeutend mit 0deg), das den <hue>-Winkel der Ausgabefarbe darstellt.

S

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

L

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

A Optional

Ein <alpha-value>, der den Alpha-Kanalwert der Ausgabefarbe repräsentiert, 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 anzugeben, dass kein Alpha-Kanal vorhanden ist. Wenn der A-Kanalwert nicht explizit angegeben wird, entspricht er standardmäßig dem Alpha-Kanalwert der ursprünglichen Farbe. Falls enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definition von Komponenten des Relativfarben-Ausgabekanals

Bei der Verwendung der relativen Farbsyntax innerhalb einer hsl()-Funktion wandelt der Browser die ursprüngliche Farbe in eine äquivalente HSL-Farbe um (falls sie nicht bereits so angegeben ist). Die Farbe wird als drei distincte Farbkanalwerte definiert — h (Farbton), s (Sättigung) und l (Helligkeit) — plus ein Alpha-Kanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung und können beim Definieren der Ausgabefarbkanalwerte verwendet werden:

• Der h-Wert wird als ein <number> zwischen 0 und 360, inklusive, aufgelöst, das den Gradwert des Farbtons der ursprünglichen Farbe darstellt.
• Die s- und l-Werte werden jeweils als ein <number> zwischen 0 und 100, inklusive, aufgelöst, wobei 100 gleichbedeutend mit 100% ist.
• Der alpha-Wert wird als ein <number> zwischen 0 und 1, inklusive, aufgelöst.

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

In den ersten zwei Beispielen unten verwenden wir die relative Farbsyntax. Allerdings gibt das erste Beispiel die gleiche Farbe wie die ursprüngliche Farbe aus und das zweite Beispiel gibt eine Farbe aus, die überhaupt nicht auf der ursprünglichen Farbe basiert. Sie erzeugen tatsächlich keine relativen Farben! Sie würden diese vermutlich nie in einem echten Code verwenden und wahrscheinlich einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Erlernen der relativen 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%)

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 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%, jeweils.

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 in diesem Abschnitt gezeigten Beispielen wurden die Alpha-Kanäle weder für die ursprünglichen noch für die Ausgabefarben explizit angegeben. Wenn der Alpha-Kanal der Ausgabefarbe nicht angegeben wird, entspricht er standardmäßig dem gleichen Wert wie der Alpha-Kanal der ursprünglichen Farbe. Wenn der Alpha-Kanal der ursprünglichen Farbe nicht angegeben wird (und es sich nicht um eine relative Farbe handelt), beträgt er standardmäßig 1. Daher sind die Alpha-Kanalwerte der ursprünglichen und der Ausgabefarbe 1 für die obigen Beispiele.

Betrachten wir einige Beispiele, die Alpha-Kanalwerte für die ursprüngliche und die Ausgabefarbe angeben. Das erste gibt an, dass der Alpha-Kanalwert der Ausgabefarbe derselbe ist wie der der ursprünglichen Farbe, während das zweite einen anderen, nicht mit dem ursprünglichen Alpha-Kanalwert im Zusammenhang stehenden Alpha-Kanalwert für die Ausgabefarbe angibt.

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 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 Varianten Aufhellungen und Abdunkelungen dieser --base-color sind.

Diese Varianten werden unter Verwendung von relativen Farben definiert — die benutzerdefinierte Eigenschaft --base-color wird in eine hsl()-Funktion eingespeist, und die Ausgabefarbe hat ihren Helligkeitskanal verändert, 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% zur Helligkeitskomponente hinzugefügt, während die abgedunkelte Farbe 20% davon subtrahiert hat.

<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 älteren Gründen akzeptiert die hsl()-Funktion eine Form, in der alle Werte mit 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 demonstriert, wie die hsla()-Syntax ein Alias für hsl() ist; beide werden sowohl in moderner als auch älterer (kommagetrennter) 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 Konvertierungswerkzeug
• Verwendung relativer Farben
• CSS-Farben-Modul
• Farbwählwerkzeug von Lea Verou