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

Die Definition von komplementären Farben mit hsl() kann durch Addition oder Subtraktion von 180 Grad vom Farbtonwert erfolgen, da sie auf demselben Durchmesser des Farbkreises positioniert sind. Beispielsweise, wenn der Farbtonwinkel einer Farbe 10deg beträgt, hat ihre komplementäre Farbe 190deg als Farbtonwinkel.

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 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 (gleichwertig mit 0deg in diesem Fall), das den Farbtonwinkel der Farbe darstellt <hue>.

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

S

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

L

Eine <percentage> oder das Schlüsselwort none (gleichwertig mit 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 Alphakanalwert 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 keinen Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, wird er standardmäßig auf 100% gesetzt. Wenn 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 verwendet, wenn eine relative Farbe definiert wird, gefolgt von einem <color> Wert, der die Ursprungsfarbe darstellt. Dies ist die Originalfarbe, 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 (gleichwertig mit 0deg in diesem Fall), das den Farbtonwinkel der Ausgabefarbe darstellt <hue>.

S

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

L

Eine <percentage> oder das Schlüsselwort none (gleichwertig mit 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 Alphakanalwert 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 keinen Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, entspricht er standardmäßig dem Alphakanalwert der Ursprungsfarbe. Wird er einbezogen, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definition der Ausgabekanalkomponenten von relativen Farben

Wenn relative Farbsyntax in einer hsl()-Funktion verwendet wird, konvertiert der Browser die Ursprungsfarbe in eine äquivalente HSL-Farbe (falls dies nicht bereits als solche angegeben ist). Die Farbe wird als drei verschiedene Farbe-kanalwerte definiert — h (Farbton), s (Sättigung) und l (Helligkeit) — plus ein Alphakanalwert (alpha). Diese Kanäle-Werte sind innerhalb der Funktion verfügbar, um bei der Definition der Ausgabefarben-Kanalwerte verwendet zu werden:

• Der h-Wert wird zu einem <number> zwischen 0 und 360 aufgelöst, einschließlich, der den Farbton-Gradwert der Ursprungsfarbe repräsentiert.
• Die s- und l-Werte werden jeweils zu einem <number> zwischen 0 und 100 aufgelöst, einschließlich, wobei 100 100% entspricht.
• Der alpha-Wert wird zu einem <number> zwischen 0 und 1 aufgelöst, einschließlich.

Bei der Definition einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf unterschiedliche Weise ausgedrückt werden. Unten werden wir einige Beispiele studieren, um dies zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir relative Farbsyntax. Allerdings gibt das erste das gleiche Farbergebnis wie die Ursprungsfarbe aus und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen eigentlich keine relativen Farben! Es ist unwahrscheinlich, dass Sie diese jemals in einem echten Code verwenden, und Sie würden wahrscheinlich stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt zum 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 die gleiche Farbe wie die Ursprungsfarbe aus — sie verwendet die h, s und l Kanalwerte der Ursprungsfarbe (0, 100% und 50%) als Ausgabekanalwerte:

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

Die Ausgabe dieser Funktion ist das 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 Ursprungsfarbe basiert:

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

In dem obigen Fall ist die Ausgabefarbe das color()-Äquivalent von hsl(240 60% 70%): color(srgb 0.52 0.52 0.88).

Die folgende Funktion erstellt eine relative Farbe auf der Grundlage 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 der Ausgabefarbe auf den H-Kanalwert des hsl()-Äquivalents der Ursprungsfarbe — 0.
• Setzt die S- und L-Kanalwerte der Austrittsfarbe auf neue Werte, die nicht auf der Ursprungsfarbe basieren: 30% und 60%.

Die endgültige Ausgabe 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 für die Ursprungs- oder Ausgabefarben keine Alphakanäle explizit angegeben. Wenn der Ausgabefarb-Alphakanal nicht spezifiziert ist, übernimmt er standardmäßig denselben Wert wie der Ursprungsfarben-Alphakanal. Wenn der Ursprungsfarben-Alphakanal nicht spezifiziert ist (und es sich nicht um eine relative Farbe handelt), übernimmt er standardmäßig 1. Daher sind die Ursprungs- und Austritts-Alphakanalwerte in den obigen Beispielen 1.

Schauen wir uns einige Beispiele an, die Ursprungs- und Ausgabefarb-Alphakanalwerte spezifizieren. Das erste spezifiziert den Ausgabefarb-Alphakanal als den gleichen wie den der Ursprungsfarbe, während das zweite einen anderen Ausgabefarb-Alphakanalwert spezifiziert, der nicht mit dem Alphakanalwert der Ursprungsfarbe verwandt ist.

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

Formale Syntax

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

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 stylt drei <div> Elemente mit verschiedenen 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 benutzerdefinierte Eigenschaft --base-color 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% 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;
}

#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:

Veraltete Syntax: durch Kommas getrennte Werte

Aus veralteten Gründen akzeptiert die hsl() Funktion eine Form, in 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

Veraltete versus moderne Syntax

Das Beispiel demonstriert, 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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <hue> Datentyp
• lch() und hwb() Farbfunktions
• Farbtoninterpolation in color-mix()
• Liste aller Farbnennungen
• sRGB-Farbauswahl und Umwandlungswerkzeug
• Verwendung relativer Farben
• CSS-Farben Modul
• Farbwähler-Werkzeug von Lea Verou