lab()

Syntax

/* Absolute values */
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

/* Relative values */
lab(from green l a b / 0.5)
lab(from #123456 calc(l + 10) a b)
lab(from hsl(180 100% 50%) calc(l - 10) a b)

Werte

Unten sind die Beschreibungen der zulässigen Werte für sowohl absolute als auch relative Farben aufgeführt.

Absolute Wert-Syntax

lab(L a b[ / A])

Die Parameter sind wie folgt:

L

Eine <number> zwischen 0 und 100, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert gibt die Helligkeit der Farbe an. Hier entspricht die Zahl 0 0% (schwarz) und die Zahl 100 100% (weiß).

a

Eine <number> zwischen -125 und 125, ein <percentage> zwischen -100% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert gibt die Entfernung der Farbe entlang der a-Achse an, die bestimmt, wie grün (bei -125) oder rot (bei +125) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte sind zulässig) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der ±125 (±100%) Grenzen setzen können. In der Praxis können die Werte jedoch nicht ±160 überschreiten.

b

Eine <number> zwischen -125 und 125, ein <percentage> zwischen -100% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert gibt die Entfernung der Farbe entlang der b-Achse an, die bestimmt, wie blau (bei -125) oder gelb (bei +125) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte sind zulässig) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der ±125 (±100%) Grenzen setzen können. In der Praxis können die Werte jedoch nicht ±160 überschreiten.

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 undurchsichtig) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alpha-Kanal anzugeben. Wenn der Wert des A-Kanals nicht explizit angegeben ist, wird er auf 100% gesetzt. Wenn er enthalten ist, wird der Wert von einem Schrägstrich (/) vorangestellt.

Relative Wert-Syntax

lab(from <color> L a b[ / 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.

L

Eine <number> zwischen 0 und 100, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert repräsentiert die Helligkeit der Ausgabefarbe. Hier entspricht die Zahl 0 0% (schwarz) und die Zahl 100 100% (weiß).

a

Eine <number> zwischen -125 und 125, ein <percentage> zwischen -100% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert repräsentiert die Entfernung der Ausgabefarbe entlang der a-Achse, die bestimmt, wie grün (bei -125) oder rot (bei +125) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte sind zulässig) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der ±125 (±100%) Grenzen setzen können. In der Praxis können die Werte jedoch nicht ±160 überschreiten.

b

Eine <number> zwischen -125 und 125, ein <percentage> zwischen -100% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert repräsentiert die Entfernung der Ausgabefarbe entlang der b-Achse, die bestimmt, wie blau (bei -125) oder gelb (bei +125) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte sind zulässig) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der ±125 (±100%) Grenzen setzen können. In der Praxis können die Werte jedoch nicht ±160 überschreiten.

A Optional

Ein <alpha-value> das den Alpha-Kanal-Wert 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 Alpha-Kanal anzugeben. Wenn der Wert des A-Kanals nicht explizit angegeben ist, wird er auf den Alpha-Kanal-Wert der Ursprungsfarbe gesetzt. Wenn er enthalten ist, wird der Wert von einem Schrägstrich (/) vorangestellt.

Definieren von Ausgabekanalkomponenten für relative Farben

Wenn der relative Farbsyntax innerhalb einer lab()-Funktion verwendet wird, konvertiert der Browser die Ursprungsfarbe in eine äquivalente Lab-Farbe (falls sie nicht bereits als solche angegeben ist). Die Farbe wird als drei unterschiedliche Farbkanalwerte — l (Helligkeit), a (Grün/Rot-Achse) und b (Blau/Gelb-Achse) — plus ein Alpha-Kanal-Wert (alpha) definiert. Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

• Der l-Kanalwert wird auf einen <number> zwischen 0 und 100 aufgelöst, inklusive.
• Die a- und b-Kanäle werden jeweils auf einen <number> zwischen -125 und 125 aufgelöst, inklusive.
• Der alpha-Kanal wird auf einen <number> zwischen 0 und 1 aufgelöst, inklusive.

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

In den ersten beiden folgenden Beispielen verwenden wir relative Farbsyntax. Das erste gibt jedoch die gleiche 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! Sie würden wahrscheinlich nie diese in einem echten Code verwenden und stattdessen nur einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Anfangspunkt zum Lernen über die relative lab()-Syntax aufgenommen.

Fangen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) an (entspricht rot). Die folgende Funktion gibt die gleiche Farbe wie die Ursprungsfarbe aus — sie verwendet die l-, a- und b-Kanalwerte (54.29, 80.8198 und 69.8997) der Ursprungsfarbe als Ausgabekanalwerte:

lab(from hsl(0 100% 50%) l a b)

Die Ausgabe dieser Funktion ist lab(54.29 80.8198 69.8997).

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:

lab(from hsl(0 100% 50%) 29.692% 44.89% -29.034%)

In diesem Fall ist die Ausgabefarbe lab(29.692 56.1125 -36.2925).

Die folgende Funktion erstellt eine relative Farbe basierend auf der Ursprungsfarbe:

lab(from hsl(0 100% 50%) l -100 b)

Dieses Beispiel:

• Konvertiert die hsl()-Ursprungsfarbe in eine äquivalente lab()-Farbe — lab(54.29 80.8198 69.8997).
• Legt die l- und b-Kanalwerte der Ausgabefarbe auf die Werte des äquivalenten lab()-Wertes der Ursprungsfarbe fest — diese Werte sind 54.29 und 69.8997.
• Legt den a-Kanalwert der Ausgabefarbe auf einen neuen Wert fest, der nicht auf der Ursprungsfarbe basiert: -100.

Die endgültige Ausgabefarbe ist lab(54.29 -100 69.8997).

In den Beispielen, die wir bisher in diesem Abschnitt gesehen haben, wurden die Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit spezifiziert. Wenn der Alphakanal der Ausgabefarbe nicht angegeben ist, wird er standardmäßig auf den gleichen Wert wie der Alphakanal der Ursprungsfarbe gesetzt. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird er auf 1 gesetzt. Daher sind die Alphakanalwerte für Ursprung und Ausgabe in diesen Beispielen 1.

Schauen wir uns einige Beispiele an, die die Angabe der Ursprungs- und Ausgabefarbkanalwerte spezifizieren. Das erste spezifiziert den Alphakanalwert der Ausgabe, der dem Alpha-Wert der Ursprungsfarbe entspricht, während das zweite einen anderen Alphakanalwert der Ausgabe spezifiziert, der nicht mit dem Alpha-Wert der Ursprungsfarbe zusammenhängt.

lab(from hsl(0 100% 50% / 0.8) l a b / alpha)
/* Computed output color: lab(54.29 80.8198 69.8997 / 0.8) */

lab(from hsl(0 100% 50% / 0.8) l a b / 0.5)
/* Computed output color: lab(54.29 80.8198 69.8997 / 0.5) */

Im folgenden Beispiel wird die hsl()-Ursprungsfarbe wieder in das lab()-Äquivalent umgewandelt — lab(54.29 80.8198 69.8997). calc()-Berechnungen werden auf die L-, a-, b- und A-Werte angewendet, sodass eine Ausgabefarbe von lab(74.29 60.8198 29.8997 / 0.9) entsteht:

lab(from hsl(0 100% 50%) calc(l + 20) calc(a - 20) calc(b - 40) / calc(alpha - 0.1))

Formale Syntax

<lab()> = 
  lab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

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

Beispiele

Anpassen der Helligkeit

Das folgende Beispiel zeigt die Auswirkungen der Änderung des Helligkeitswertes der lab()-Funktion.

HTML

<div data-color="red-dark"></div>
<div data-color="red"></div>
<div data-color="red-light"></div>

<div data-color="green-dark"></div>
<div data-color="green"></div>
<div data-color="green-light"></div>

<div data-color="blue-dark"></div>
<div data-color="blue"></div>
<div data-color="blue-light"></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

[data-color="red-dark"] {
  background-color: lab(5 125 71);
}
[data-color="red"] {
  background-color: lab(40 125 71);
}
[data-color="red-light"] {
  background-color: lab(95 125 71);
}

[data-color="green-dark"] {
  background-color: lab(10% -120 125);
}
[data-color="green"] {
  background-color: lab(50% -120 125);
}
[data-color="green-light"] {
  background-color: lab(90% -120 125);
}

[data-color="blue-dark"] {
  background-color: lab(10 -120 -120);
}
[data-color="blue"] {
  background-color: lab(50 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(90 -120 -120);
}

Ergebnis

Anpassen der Farbachsen

Dieses Beispiel demonstriert die Auswirkungen der Einstellung der a- und b-Werte der lab()-Funktion an den End- und Mittelpunkten der a-Achse, die von Grün (-125) zu Rot (125) und der b-Achse, die von Gelb (-125) zu Blau (125) reicht.

HTML

<div data-color="red-yellow"></div>
<div data-color="red-zero"></div>
<div data-color="red-blue"></div>

<div data-color="zero-yellow"></div>
<div data-color="zero-zero"></div>
<div data-color="zero-blue"></div>

<div data-color="green-yellow"></div>
<div data-color="green-zero"></div>
<div data-color="green-blue"></div>

CSS

Unter Verwendung der CSS-Eigenschaft background-color, variieren wir die a- und b-Werte der lab()-Funktion entlang der a-Achse und b-Achse, um die Effekte von maximalen, mittleren und minimalen Werten in jedem Fall zu zeigen.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

/* a-axis max, variable b-axis */
[data-color="red-yellow"] {
  background-color: lab(50 125 125);
}
[data-color="red-zero"] {
  background-color: lab(50 125 0);
}
[data-color="red-blue"] {
  background-color: lab(50 125 -125);
}

/* a-axis center, variable b-axis */
[data-color="zero-yellow"] {
  background-color: lab(50 0 125);
}
[data-color="zero-zero"] {
  background-color: lab(50 0 0);
}
[data-color="zero-blue"] {
  background-color: lab(50 0 -125);
}

/* a-axis min, variable b-axis */
[data-color="green-yellow"] {
  background-color: lab(50 -125 125);
}
[data-color="green-zero"] {
  background-color: lab(50 -125 0);
}
[data-color="green-blue"] {
  background-color: lab(50 -125 -125);
}

Ergebnis

Die linke Spalte befindet sich am gelben Ende (-125) der b-Achse und die rechte Spalte am blauen Ende (125). Die obere Reihe zeigt Farben am roten Ende der a-Achse (-125) und die untere Reihe am grünen Ende (125). Die mittlere Spalte und Reihe befinden sich an den Mittelpunkten (0) jeder Achse, wobei die mittlere Zelle grau ist; sie enthält kein Rot, Grün, Gelb oder Blau, mit einem Wert von 0 für beide Achsen.

Lineare Verläufe entlang der a-Achse und b-Achse

Dieses Beispiel enthält lineare Verläufe, um den Verlauf der Werte der lab()-Funktion entlang der a-Achse (von Rot zu Grün) und entlang der b-Achse (von Gelb zu Blau) zu demonstrieren. In jedem Gradientenbild bleibt eine Achse statisch, während die andere Achse vom unteren zum oberen Ende der Achsenwerte fortschreitet.

<div data-color="red-to-green-yellow">
  <span>red</span><span>`b`= -125 (yellow)</span><span>green</span>
</div>
<div data-color="red-to-green-zero">
  <span>red</span><span>no yellow or blue</span><span>green</span>
</div>
<div data-color="red-to-green-blue">
  <span>red</span><span>`b`= 125 (blue)</span><span>green</span>
</div>

<div data-color="yellow-to-blue-red">
  <span>yellow</span><span>`a` = -125 (red)</span><span>blue</span>
</div>
<div data-color="yellow-to-blue-zero">
  <span>yellow</span><span>no red or green</span><span>blue</span>
</div>
<div data-color="yellow-to-blue-green">
  <span>yellow</span><span>`a` = 125 (green)</span><span>blue</span>
</div>

CSS

div {
  height: 50px;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
span {
  background-color: #ffffffcc;
  padding: 3px;
}

/* a-axis gradients */
[data-color="red-to-green-yellow"] {
  background-image: linear-gradient(to right, lab(50 125 125), lab(50 -125 125));
}
[data-color="red-to-green-zero"] {
  background-image: linear-gradient(to right, lab(50 125 0), lab(50 -125 0));
}
[data-color="red-to-green-blue"] {
  background-image: linear-gradient(to right, lab(50 125 -125), lab(50 -125 -125));
}

/* b-axis gradients */
[data-color="yellow-to-blue-red"] {
  background-image: linear-gradient(to right, lab(50 125 125), lab(50 125 -125));
}
[data-color="yellow-to-blue-zero"] {
  background-image: linear-gradient(to right, lab(50 0 125), lab(50 0 -125));
}
[data-color="yellow-to-blue-green"] {
  background-image: linear-gradient(to right, lab(50 -125 125),lab(50 -125 -125));
}

Ergebnis

Anpassen der Deckkraft

Das folgende Beispiel zeigt die Auswirkungen der Variation des A (Alpha)-Wertes der lab()-Funktionsnotation. Die rot und rot-alpha Elemente überlappen sich mit dem #background-div Element, um den Effekt der Deckkraft zu demonstrieren. Ein A-Wert von 0.4 macht die Farbe zu 40% undurchsichtig.

HTML

<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lightblue;
  width: 150px;
  height: 40px;
}

[data-color="red"] {
  background-color: lab(80 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(80 125 125 / 0.4);
}

Ergebnis

Verwendung relativer Farben mit lab()

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

Diese Varianten werden unter Verwendung relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in eine lab()-Funktion übergeben, und die Ausgabefarben haben ihren Helligkeitskanal modifiziert, um den gewünschten Effekt zu erzielen, indem eine calc()-Funktion verwendet wird. Die aufgehellte Farbe hat 15% zur Helligkeit hinzugefügt, und die abgedunkelte Farbe hat 15% von der Helligkeit 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;
  /* equivalent of lab(75 24 79) */
}

#one {
  background-color: lab(from var(--base-color) calc(l + 15) a b);
}

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

#three {
  background-color: lab(from var(--base-color) calc(l - 15) a b);
}

Ergebnis

Das Ergebnis ist wie folgt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <color> Datentyp
• <color-function> Datentyp
• Verwendung relativer Farben
• CSS-Farben Modul
• LCH-Farben in CSS: was, warum und wie? von Lea Verou (2020)
• Safari Technology Preview 122 Versionshinweise: enthält lab() und lch() Farben