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

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

Absolute Wertsyntax

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 spezifiziert die Helligkeit der Farbe. Hierbei 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 definiert, wie grün (in Richtung -125) oder rot (in Richtung +125) die Farbe ist. Beachten Sie, dass diese Werte unterzeichnet sind (sowohl positive als auch negative Werte erlaubt) und theoretisch unbegrenzt, was es erlaubt, Werte außerhalb der ±125 (±100%) Grenzen festzusetzen. In der Praxis können Werte 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 definiert, wie blau (in Richtung -125) oder gelb (in Richtung +125) die Farbe ist. Beachten Sie, dass diese Werte unterzeichnet sind (sowohl positive als auch negative Werte erlaubt) und theoretisch unbegrenzt, was es erlaubt, Werte außerhalb der ±125 (±100%) Grenzen festzusetzen. In der Praxis können Werte nicht ±160 überschreiten.

A Optional

Ein <alpha-value> der den Alpha-Kanal-Wert der Farbe darstellt, 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 ist, wird er standardmäßig auf 100% gesetzt. Wenn eingeschlossen, wird der Wert durch einen Schrägstrich (/) eingeleitet.

Relative Wertsyntax

lab(from <color> L a b[ / A])

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from ist immer enthalten, wenn eine relative Farbe definiert wird, gefolgt von einem <color> Wert, der die Ursprungsfarbe darstellt. Dies ist die ursprüngliche Farbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kann eine beliebige gültige <color> Syntax sein, einschliesslich 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 definiert, wie grün (in Richtung -125) oder rot (in Richtung +125) die Farbe ist. Beachten Sie, dass diese Werte unterzeichnet sind (sowohl positive als auch negative Werte erlaubt) und theoretisch unbegrenzt, was es erlaubt, Werte außerhalb der ±125 (±100%) Grenzen festzusetzen. In der Praxis können Werte 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 definiert, wie blau (in Richtung -125) oder gelb (in Richtung +125) die Farbe ist. Beachten Sie, dass diese Werte unterzeichnet sind (sowohl positive als auch negative Werte erlaubt) und theoretisch unbegrenzt, was es erlaubt, Werte außerhalb der ±125 (±100%) Grenzen festzusetzen. In der Praxis können Werte nicht ±160 überschreiten.

A Optional

Ein <alpha-value> der den Alpha-Kanal-Wert der Ausgabefarbe darstellt, 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 ist, entspricht er dem Alpha-Kanalwert der Ursprungsfarbe. Wenn eingeschlossen, wird der Wert durch einen Schrägstrich (/) eingeleitet.

Definieren der Ausgabekanal-Komponenten relativer Farben

Bei der Verwendung der relativen Färbungs-Syntax innerhalb einer lab() Funktion wandelt der Browser die Ursprungsfarbe in eine äquivalente Lab-Farbe um (falls sie nicht bereits so angegeben ist). Die Farbe wird als drei unterschiedliche Farbkanalwerte definiert — l (Helligkeit), a (Grün/Rot-Achse), und b (Blau/Gelb-Achse) — plus einem Alphakanalwert (alpha). Diese Kanalwerte sind innerhalb der Funktion verfügbar, um beim Definieren der Ausgabefarbe-Kanalwerte verwendet zu werden:

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

Beim Definieren einer relativen Farbe kann die unterschiedlichen Kanäle der Ausgabefarbe auf mehrere verschiedene Arten ausgedrückt werden. Unten werden einige Beispiele studiert, um diese zu erläutern.

In den ersten beiden Beispielen unten verwenden wir relative Färbungs-Syntax. Jedoch gibt das erste die gleiche Farbe 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 wäre unwahrscheinlich, dass Sie diese jemals in einem echten Codebasis verwenden würden und würden wahrscheinlich stattdessen einen absoluten Farbwert verwenden. Wir haben diese Beispiele hier aufgenommen, um mit dem Lernen über die relative lab() Syntax zu beginnen.

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

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

Diese Funktion gibt die Farbe lab(54.29 80.8198 69.8997) aus.

Die nächste Funktion verwendet absolute Werte für die Kanäle der Ausgabefarbe und gibt eine völlig andere Farbe aus, die nicht auf der Ursprungsfarbe basiert:

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

In dem obigen Fall ist die ausgegebene Farbe 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).
• Setzt die l und b Kanäle der Ausgabefarbe auf die des äquivalenten lab()-Ursprungs als L und b Kanäle — Diese Werte sind 54.29 und 69.8997, beziehungsweise.
• Setzt den a Kanalswert der Ausgabefarbe auf einen neuen Wert, der nicht auf der Ursprungsfarbe basiert: -100.

Die endgültige ausgegebene Farbe 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 ausdrücklich spezifiziert. Wenn der Alpha-Kanal der Ausgabefarbe nicht spezifiziert wird, übernimmt er den gleichen Wert wie der Alphakanal der Ursprungsfarbe. Wenn der Alphakanal der Ursprungsfarbe nicht spezifiziert 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.

Werfen wir einen Blick auf einige Beispiele, die Ursprungs- und Ausgabekanäle Werte ausdrücklich spezifizieren. Das erste spezifiziert den Ausgabekanalswert als gleich wie den Ursprungsalphakanalwert, während das zweite einen anderen Alphakanalswert für die Ausgabe spezifiziert, der nichts mit dem Ursprungsalphakanalwert zu tun hat.

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, was zu einer Ausgabe von lab(74.29 60.8198 29.8997 / 0.9) führt:

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

Anpassung der Helligkeit

Das folgende Beispiel zeigt die Wirkung der Variation 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

Anpassung der Farbachsen

Dieses Beispiel demonstriert die Effekte der Einstellung der a- und b-Werte der lab() Funktion zu 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) geht.

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 background-color Eigenschaft variieren wir die a- und b-Werte der lab() Farb-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 Zeile zeigt Farben am roten Ende der a-Achse (-125) und die untere Zeile am grünen Ende (125). Die mittlere Spalte und Zeile befinden sich an den Mittelpunkten (0) jeder Achse, wobei die mittlere Zelle grau ist; sie enthält weder rot, grün, gelb noch blau, mit 0 für beide Achsen.

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

Dieses Beispiel beinhaltet lineare Verläufe, um die Werteentwicklung 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 niedrigen Ende zum hohen 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

Anpassung der Transparenz

Das folgende Beispiel zeigt die Wirkung der Variation des A (alpha) Wertes der lab() Funktionsnotation. Die Elemente red und red-alpha überlappen das #background-div Element, um die Wirkung der Deckkraft zu demonstrieren. Wenn A einen Wert von 0.4 hat, macht dies die Farbe zu 40% deckend.

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

Verwenden von relativen Farbsystemen mit lab()

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

Diese Varianten werden unter Verwendung von relativen Farben definiert — Die --base-color benutzerdefinierte Eigenschaft wird in eine lab() Funktion übergeben, und die Ausgabefarben lassen den Helligkeitskanal modifizieren, um den gewünschten Effekt über eine calc() Funktion zu erzielen. Die aufgehellte Farbe hat 15% zum Helligkeitskanal hinzugefügt, und die abgedunkelte Farbe hat 15% vom Helligkeitskanal 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

Die Ausgabe ist wie folgt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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