CSS-Funktion hsl()

Probieren Sie es aus

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

Syntax

/* Absolute values */
hsl(120deg 75% 25%)
hsl(120 75 25) /* deg and % units are optional */
hsl(120deg 75% 25% / 60%)
hsl(none 75% 25%)

/* Relative values */
hsl(from green h s l / 0.5)
hsl(from #123456 h s calc(l + 20))
hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30))

/* Legacy 'hsla()' alias */
hsla(120deg 75% 25% / 60%)

/* Legacy format */
hsl(120, 75%, 25%)
hsl(120deg, 75%, 25%, 0.8)

Werte

Im Folgenden finden Sie Beschreibungen der zulässigen Werte sowohl für absolute als auch für relative Farben.

Absolute Wertsytax

hsl(H S L[ / A])

Die Parameter sind wie folgt:

H

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

Hinweis: Die Winkel, die bestimmten Farbtönen 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 Referenzseite zu <hue>.

S

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

L

Eine <percentage> oder das Schlüsselwort none (in diesem Fall gleichwertig mit 0%). Dieser Wert stellt die Helligkeit der Farbe dar. Hierbei ist 100% weiß, 0% schwarz und 50% „normal“.

A Optional

Ein <alpha-value>, das den Wert des Alphakanals der Farbe darstellt, wobei die Zahl 0 0% (vollständig transparent) entspricht und 1 100% (vollständig deckend) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal anzugeben. Wenn der Kanalwert A nicht explizit angegeben wird, ist sein Standardwert 100 %. Wenn er enthalten ist, wird dem Wert ein Schrägstrich (/) vorangestellt.

Relative Wertsyntax

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

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from ist beim Definieren einer relativen Farbe immer enthalten, 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 (in diesem Fall gleichwertig mit 0deg), das den <hue>-Winkel der Ausgabefarbe darstellt.

S

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

L

Eine <percentage> oder das Schlüsselwort none (in diesem Fall gleichwertig mit 0%). Dies stellt die Helligkeit der Ausgabefarbe dar. Hierbei ist 100% weiß, 0% schwarz und 50% „normal“.

A Optional

Ein <alpha-value>, das den Wert des Alphakanals der Ausgabefarbe darstellt, wobei die Zahl 0 0% (vollständig transparent) entspricht und 1 100% (vollständig deckend) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal anzugeben. Wenn der Kanalwert A nicht explizit angegeben wird, entspricht sein Standardwert dem Alphakanalwert der Ursprungsfarbe. Wenn er enthalten ist, wird dem Wert ein Schrägstrich (/) vorangestellt.

Definieren relativer Ausgabefarbkanalkomponenten

Bei Verwendung relativer Farbsytax innerhalb einer hsl()-Funktion konvertiert der Browser die Ursprungsfarbe in eine gleichwertige HSL-Farbe, falls sie nicht bereits als solche angegeben ist. Die Farbe wird als drei unterschiedliche Farbkanalwerte definiert — h (Farbton), s (Sättigung) und l (Helligkeit) — sowie als Alphakanalwert (alpha). Diese Kanalwerte werden innerhalb der Funktion verfügbar gemacht, um sie bei der Definition der Ausgabefarbkanalwerte zu verwenden:

• Der Wert h wird zu einer <number> zwischen einschließlich 0 und 360 aufgelöst, die den <hue>-Gradwert der Ursprungsfarbe darstellt.
• Die Werte s und l werden jeweils zu einer <number> zwischen einschließlich 0 und 100 aufgelöst, wobei 100 gleichwertig mit 100% ist.
• Der Wert alpha wird zu einer <number> zwischen einschließlich 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 betrachten wir einige Beispiele zur Veranschaulichung.

In den ersten beiden folgenden Beispielen verwenden wir die relative Farbsytax. Das erste gibt jedoch dieselbe Farbe wie die Ursprungsfarbe aus und das zweite eine Farbe, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen also eigentlich keine relativen Farben! In einer echten Codebasis würden Sie diese wahrscheinlich nie verwenden und stattdessen einfach einen absoluten Farbwert einsetzen. Wir haben diese Beispiele als Ausgangspunkt zum Lernen der relativen hsl()-Syntax aufgenommen.

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

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

Die Ausgabefarbe 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 Kanalwerte der Ausgabefarbe und gibt eine vollständig andere Farbe aus, die nicht auf der Ursprungsfarbe 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 Ursprungsfarbe:

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

Dieses Beispiel:

• Konvertiert die Ursprungsfarbe (rgb(255 0 0)) in ein hsl()-Äquivalent (hsl(0 100% 50%)).
• Setzt den Kanalwert H der Ausgabefarbe auf den Kanalwert H des hsl()-Äquivalents der Ursprungsfarbe — 0.
• Setzt die Kanalwerte S und L der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungsfarbe basieren: jeweils 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 in diesem Abschnitt gezeigten Beispielen wurden die Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben wird, entspricht sein Standardwert dem Alphakanalwert der Ursprungsfarbe. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben wird (und sie keine relative Farbe ist), ist sein Standardwert 1. Daher sind die Alphakanalwerte für Ursprung und Ausgabe in den obigen Beispielen 1.

Sehen wir uns einige Beispiele an, die Alphakanalwerte für Ursprung und Ausgabe angeben. Das erste legt fest, dass der Alphakanalwert der Ausgabe mit dem Alphakanalwert des Ursprungs identisch ist, während das zweite einen anderen Alphakanalwert für die Ausgabe angibt, der nicht mit dem Alphakanalwert des Ursprungs 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()-Darstellung konvertiert — hsl(0 100% 50% / 0.8). calc()-Berechnungen werden auf die Werte H, S, L und A 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))

Formale Syntax

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

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

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

<hue> = 
  <number>  |
  <angle>   

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

Beispiele

Verwendung von hsl() mit conic-gradient()

Die Funktion hsl() 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

Verwendung relativer Farben mit hsl()

Dieses Beispiel formatiert drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Dem mittleren wird das unveränderte --base-color zugewiesen, während dem linken und rechten aufgehellte und abgedunkelte Varianten dieser --base-color zugewiesen werden.

Diese Varianten werden mithilfe relativer Farben definiert — die benutzerdefinierte Eigenschaft --base-color wird an eine hsl()-Funktion übergeben, und der Helligkeitskanal der Ausgabefarbe wird über eine calc()-Funktion verändert, um den gewünschten Effekt zu erzielen, während Farbton und Sättigung unverändert bleiben. Der aufgehellten Farbe werden 20 % zum Helligkeitskanal hinzugefügt, und bei der abgedunkelten Farbe werden 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;
}

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

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

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

/* Use @supports to add in support for old syntax that requires % units to
   be specified in lightness calculations */
@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 sieht wie folgt aus:

Ältere Syntax: durch Kommas getrennte Werte

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

Ältere gegenüber moderner Syntax

Das Beispiel zeigt, dass die hsla()-Syntax ein Alias für hsl() ist; beide werden sowohl mit moderner als auch mit älterer, durch Kommas getrennter 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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Datentyp <hue>
• Farbfunktionen lch() und hwb()
• Farbtoninterpolation in color-mix()
• Liste aller Farbnotationen
• Werkzeug zur Konvertierung von Farbformaten
• Verwendung relativer Farben
• Modul CSS-Farben
• Farbauswahlwerkzeug von Lea Verou