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 erfolgen, indem man 180 Grad zum Farbtonwert hinzufügt oder abzieht, da sie auf dem Farbrad auf demselben Durchmesser positioniert sind. Zum Beispiel, wenn der Farbtonwinkel einer Farbe 10deg ist, hat ihre Komplementärfarbe einen Farbton 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

Unten sind Beschreibungen der erlaubten Werte für sowohl absolute als auch relative Farben.

Absolute Wertsyntax

hsl(H S L[ / A])

Die Parameter sind wie folgt:

H

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

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

S

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

L

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

A Optional

Ein <alpha-value> darstellend den Alpha-Kanalwert der Farbe, 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 Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, wird er standardmäßig auf 100% gesetzt. Falls enthalten, wird der Wert durch einen Schrägstrich (/) eingeleitet.

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 repräsentiert. 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) darstellend den <hue> Winkel der Ausgabefarbe.

S

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

L

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

A Optional

Ein <alpha-value> darstellend den Alpha-Kanalwert der Ausgabefarbe, 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 Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, wird er standardmäßig auf den Alpha-Kanalwert der Ursprungsfarbe gesetzt. Falls enthalten, wird der Wert durch einen Schrägstrich (/) eingeleitet.

Definition der Ausgabekanalkomponenten relativer Farben

Bei Verwendung der relativen Farbsyntax in einer hsl()-Funktion konvertiert der Browser die Ursprungsfarbe in eine äquivalente HSL-Farbe (sofern nicht bereits so angegeben). Die Farbe wird als drei verschiedene Farbkanalwerte definiert - h (Farbton), s (Sättigung) und l (Helligkeit) - plus ein Alpha-Kanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

• Der h-Wert wird auf einen <number> zwischen 0 und 360, inklusive, aufgelöst, der den <hue> Gradwert der Ursprungsfarbe darstellt.
• Die s- und l-Werte werden jeweils auf ein <number> zwischen 0 und 100, inklusive, aufgelöst, wobei 100 100% entspricht.
• Der alpha-Wert wird auf 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 Weise ausgedrückt werden. Im Folgenden werden einige Beispiele untersucht, um diese zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Allerdings gibt das erste Beispiel dieselbe Farbe wie die Ursprungsfarbe aus und das zweite Beispiel gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erstellen nicht wirklich relative Farben! Sie würden diese wahrscheinlich nie in einer echten Codebasis verwenden und stattdessen eher einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt zum Lernen über die 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 (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 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 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 Ursprungsfarbe:

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

In diesem Beispiel:

• Wird die Ursprungsfarbe (rgb(255 0 0)) in ein äquivalentes hsl()-Format konvertiert (hsl(0 100% 50%)).
• Setzt den H-Kanalwert für die Ausgabefarbe auf denjenigen der ursprungsfarblichen hsl()-Äquivalents H-Kanalwert - 0.
• Setzt die S- und L-Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungsfarbe 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 Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alphakanalwert der Ausgabefarbe nicht spezifiziert ist, wird er standardmäßig auf denselben Wert wie der Alphakanalwert der Ursprungsfarbe gesetzt. Wenn der Alphakanalwert der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird er standardmäßig auf 1 gesetzt. Daher sind die Ursprungs- und Ausgabealphakanalwerte für die obigen Beispiele 1.

Schauen wir uns einige Beispiele an, die Ursprungs- und Ausgabefarbkanalwerte spezifizieren. Das erste Beispiel gibt den Ausgabefarbkanalwert als gleich dem Ursprungsalphakanalwert an, während das zweite Beispiel einen anderen Ausgabefarbkanalwert angibt, der nicht mit dem Ursprungsalphakanalwert 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()-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( [ 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 konischem Verlauf

Die hsl()-Funktion arbeitet gut mit conic-gradient() zusammen, 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()

In diesem Beispiel werden drei <div>-Elemente mit verschiedenen Hintergrundfarben gestylt. Das mittlere erhält die unveränderte --base-color, während die linken und rechten jeweils aufgehellte und abgedunkelte Varianten dieser --base-color erhalten.

Diese Varianten werden mithilfe relativer Farben definiert - die --base-color benutzerdefinierte Eigenschaft wird in eine hsl()-Funktion eingepasst, und die Ausgabefarbe hat ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über eine calc()-Funktion zu erzielen, während Farbton und 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:

Altsyntax: kommagetrennte Werte

Aus Kompatibilitätsgrü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

Altsyntax versus moderne Syntax

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <hue> Datentyp
• lch() und hwb() Farbfunktions
• Farbtoninterpolation in color-mix()
• Liste aller Farbnotationen
• Farbformat-Konverter-Tool
• Verwendung relativer Farben
• CSS-Farben Modul
• Farbwähler-Tool von Lea Verou