lab()

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

Absolute Wertsyntax

lab(L a b[ / A])

Die Parameter sind wie folgt:

L

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

a

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

b

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

A Optional

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

Relative Wertsyntax

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

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from wird immer beim Definieren einer relativen Farbe mit angegeben, 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, eine <percentage> zwischen 0% und 100% oder das Schlüsselwort none (entspricht 0% in diesem Fall). Dieser Wert stellt die Helligkeit der Ausgabefarbe dar. Hier entspricht die Zahl 0 0% (schwarz) und die Zahl 100 100% (weiß).

a

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

b

Eine <number> zwischen -125 und 125, eine <percentage> zwischen -100% und 100% oder das Schlüsselwort none (entspricht 0% in diesem Fall). Dieser Wert stellt die Entfernung der Ausgabefarbe entlang der b-Achse dar, die definiert, wie blau (Richtung -125) oder gelb (Richtung +125) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte zulassen) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der Grenzen von ±125 (±100%) festlegen können. In der Praxis können Werte ±160 nicht überschreiten.

A Optional

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

Definition von relativen Farbkanalausgabekomponenten

Bei der Verwendung der relativen Farbsyntax innerhalb einer lab()-Funktion 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 definiert — l (Helligkeit), a (Grün/Roten-Achse), und b (Blau/Gelber-Achse) — sowie ein Alfakanalwert (alpha). Diese Kanalwerte sind innerhalb der Funktion verfügbar, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

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

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

In den folgenden beiden ersten Beispielen verwenden wir die relative Farbsyntax. Jedoch 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. Diese erstellen wirklich keine relativen Farben! Sie würden diese wahrscheinlich nie in einer echten Codebasis verwenden und wahrscheinlich einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen der relativen lab()-Syntax aufgenommen.

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

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

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

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

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

In diesem 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-Kanalwerte für die Ausgabefarbe auf die der lab()-Äquivalentwerte L und b der Ursprungsfarbe — diese Werte sind 54.29 und 69.8997, jeweils.
• Setzt den a-Kanalwert der Ausgabefarbe auf einen neuen Wert, 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 angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben wird, ist der Standardwert derselbe wie der des Alphakanals der Ursprungsfarbe. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben wird (und es sich nicht um eine relative Farbe handelt), ist der Standardwert 1. Daher sind die Alphakanalwerte der Urspungs- und Ausgabefarbe 1 in den obigen Beispielen.

Betrachten wir einige Beispiele, die die Ursprungs- und Ausgabefarbenkanalwerte angeben. Das erste Beispiel gibt den Alphakanalwert der Ausgabefarbe als derselbe Wert wie der Alphakanalwert der Ursprungsfarbe an, während das zweite Beispiel einen anderen Alphakanalwert ohne Bezug zum Alphakanalwert der Ursprungsfarbe angibt.

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 erneut in das lab()-Äquivalent konvertiert — lab(54.29 80.8198 69.8997). Auf die L-, a-, b- und A-Werte werden calc()-Berechnungen angewendet, was zu einer Ausgabefarbe 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))

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

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

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

Dieses Beispiel demonstriert die Auswirkungen der Einstellung der a- und b-Werte der lab()-Funktion auf die End- und Mittelpunkte der a-Achse, die vom Grünen (-125) zum Roten (125) geht, sowie der b-Achse, die vom Gelben (-125) zum Blauen (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

Mit der CSS-Eigenschaft background-color variieren wir die a- und b-Werte der lab()-Farbfunktion entlang der a-Achse und der b-Achse, um die Auswirkungen 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 oberste Reihe zeigt Farben am roten Ende der a-Achse (-125) und die unterste Reihe befindet sich am grünen Ende (125). Die mittlere Spalte und die 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 0-Wert für beide Achsen.

Dieses Beispiel enthält lineare Farbverlä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 Farbverlaufsbild bleibt eine Achse statisch, während die andere Achse von dem niedrigen Ende zu dem 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

Das folgende Beispiel zeigt die Wirkung der Veränderung des A (Alpha) Werts der lab()-Funktionalnotation. Die Elemente red und red-alpha überlagern das #background-div-Element, um die Wirkung der Opazität zu demonstrieren. Wenn A einen Wert von 0.4 hat, macht dies die Farbe zu 40% opak.

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

Dieses Beispiel gestaltet drei <div>-Elemente mit verschiedenen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color, während die linken und rechten gelichtete und verdunkelte 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 haben ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über eine calc()-Funktion zu erreichen. Die gelichtete Farbe hat 15% zum Helligkeitskanal hinzugefügt, und die verdunkelte 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

Das Ergebnis ist wie folgt:

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