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

Komplementärfarben mit hsl() zu definieren, kann durch Hinzufügen oder Subtrahieren von 180 Grad zum Farbtonwert erfolgen, da sie auf demselben Durchmesser des Farbkreises positioniert sind. Zum Beispiel hat eine Farbe mit einem Farbtonwinkel von 10deg eine Komplementärfarbe mit einem Farbtonwinkel von 190deg.

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

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 (äquivalent zu 0deg in diesem Fall), das den <hue> Winkel der Farbe darstellt.

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

S

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

L

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

A Optional

Ein <alpha-value>, das den Alpha-Kanal-Wert der Farbe repräsentiert, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig deckend) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, ist der Standardwert 100%. Wenn er enthalten ist, wird der Wert von 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 angegeben, wenn eine relative Farbe definiert wird, gefolgt von einem <color> Wert, der die Ursprungsfarbe repräsentiert. Dies ist die ursprüngliche Farbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kann eine beliebige gültige <color> Syntax sein, einschließlich einer anderen relativen Farbe.

H

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

S

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

L

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

A Optional

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

Definieren der Ausgabekanal-Komponenten relativer Farben

Wenn die relative Farbsyntax innerhalb einer hsl() Funktion verwendet wird, konvertiert der Browser die Ursprungsfarbe in eine äquivalente HSL-Farbe (wenn sie nicht bereits als solche angegeben ist). Die Farbe wird als drei unterschiedliche Farbkunkanal-Werte definiert — h (Farbton), s (Sättigung) und l (Helligkeit) — plus ein Alpha-Kanal-Wert (alpha). Diese Kanalswerte können innerhalb der Funktion verwendet werden, wenn die Ausgabefarbkanalwerte definiert werden:

• Der h Wert wird zu einer <number> zwischen 0 und 360 aufgelöst, einschließlich, der die <hue> Grad-Wert der Ursprungsfarbe repräsentiert.
• Die s und l Werte werden jeweils zu einem <number> zwischen 0 und 100 aufgelöst, einschließlich, wobei 100 äquivalent zu 100% ist.
• Der alpha Wert wird zu einem <number> zwischen 0 und 1 aufgelöst, einschließlich.

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

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Das erste gibt jedoch dieselbe Farbe wie die Ursprungsfarbe aus und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen wirklich keine relativen Farben! In einer echten Codebasis würden Sie diese wahrscheinlich nicht verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt gewählt, um die relative hsl() Syntax zu lernen.

Beginnen wir mit einer Ursprungsfarbe von rgb(255 0 0) (äquivalent zu hsl(0 100% 50%)). Die folgende Funktion gibt dieselbe Farbe wie die Ursprungsfarbe aus — sie verwendet die h, s, und l Kanalwerte (0, 100%, und 50%) der Ursprungsfarbe 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 Ausgabefarben-Kanalwerte und gibt eine völlig 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 erzeugt 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 H Kanalwert für die Ausgabefarbe auf den h Kanalwert der hsl() Äquivalent der Ursprungsfarbe — 0.
• Setzt die S und L Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungsfarbe basieren: 30% und 60%, beziehungsweise.

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 Alpha-Kanäle für sowohl die Ursprungs- als auch die Ausgabefarben nicht explizit angegeben. Wenn der Alpha-Kanal der Ausgabefarbe nicht angegeben wird, ist der Standardwert derselbe wie der Alpha-Kanalwert der Ursprungsfarbe. Wenn der Alpha-Kanal der Ursprungsfarbe nicht angegeben wird (und es sich nicht um eine relative Farbe handelt), ist der Standardwert 1. Daher sind die Ursprungs- und Ausgabekanalwerte für die obigen Beispiele 1.

Werfen wir einen Blick auf einige Beispiele, die die Ursprungs- und Ausgabekanalwert ausdrücklich angeben. Das erste gibt den Alpha-Kanalwert der Ausgabe als denselben Wert wie den der Ursprungsfarbe an, während das zweite einen anderen Ausgabekanalwert, der nicht mit dem der Ursprungsfarbe zusammenhängt, 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() Repräsentation umgewandelt — hsl(0 100% 50% / 0.8). calc() Berechnungen werden auf die H, S, L, und A Werte angewendet. 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))

Formal 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 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

Verwendung relativer Farben mit hsl()

Dieses Beispiel stylt drei <div> Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere Element erhält die unveränderte --base-color, während die linken und rechten Elemente aufgehellte und abgedunkelte Varianten dieser --base-color erhalten.

Diese Varianten werden unter Verwendung relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in eine 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% hinzugefügt zum Helligkeitskanal, und die abgedunkelte Farbe hat 20% 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;
}

#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 ist wie folgt:

Ältere Syntax: kommegetrennte Werte

Aus älteren Gründen akzeptiert die hsl() Funktion eine Form, in der alle Werte durch Kommata 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 versus moderne Syntax

Das Beispiel zeigt, wie die hsla() Syntax ein Alias für hsl() ist; beide werden sowohl in modernen als auch älteren (komma-getrennten) Notationen 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

• <hue> Datentyp
• lch() und hwb() Farb Funktionen
• Farbton Interpolation in color-mix()
• Liste aller Farbschreibweisen
• Tool zur Konvertierung von Farbformaten
• Verwendung relativer Farben
• CSS Farben Modul
• Farbwähler Tool von Lea Verou