lab()

Nachfolgend 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, eine <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (äquivalent zu 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 (äquivalent zu 0% in diesem Fall). Dieser Wert spezifiziert die Entfernung der Farbe entlang der a Achse, welche definiert, wie grün (bewegend in Richtung -125) oder rot (bewegend in Richtung +125) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte sind möglich) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der ±125 (±100%) Grenzen setzen 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 (äquivalent zu 0% in diesem Fall). Dieser Wert spezifiziert die Entfernung der Farbe entlang der b Achse, welche definiert, wie blau (bewegend in Richtung -125) oder gelb (bewegend in Richtung +125) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte sind möglich) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der ±125 (±100%) Grenzen setzen können. In der Praxis können Werte ±160 nicht ü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 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 standardmäßig 100% angenommen. Wenn dieser enthalten ist, 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 eingeschlossen, wenn eine relative Farbe definiert wird, gefolgt von einem <color> Wert, der die Ursprungfarbe darstellt. Dies ist die ursprüngliche Farbe, auf der die relative Farbe basiert. Die Ursprungfarbe 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 (äquivalent zu 0% in diesem Fall). 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, eine <percentage> zwischen -100% und 100%, oder das Schlüsselwort none (äquivalent zu 0% in diesem Fall). Dieser Wert repräsentiert die Entfernung der Ausgabefarbe entlang der a Achse, welche definiert, wie grün (bewegend in Richtung -125) oder rot (bewegend in Richtung +125) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte sind möglich) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der ±125 (±100%) Grenzen setzen 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 (äquivalent zu 0% in diesem Fall). Dieser Wert repräsentiert die Entfernung der Ausgabefarbe entlang der b Achse, welche definiert, wie blau (bewegend in Richtung -125) oder gelb (bewegend in Richtung +125) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte sind möglich) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der ±125 (±100%) Grenzen setzen können. In der Praxis können Werte ±160 nicht ü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 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 standardmäßig der Alpha-Kanal-Wert der Ursprungfarbe angenommen. Wenn dieser enthalten ist, wird der Wert von einem Schrägstrich (/) vorangestellt.

Definition der Ausgabekanalkomponenten relativer Farben

Wenn Sie relative Farbsyntax innerhalb einer lab() Funktion verwenden, wandelt der Browser die Ursprungfarbe in eine äquivalente Lab-Farbe um (wenn sie nicht bereits als solche angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert — l (Helligkeit), a (grün/rot Achse) und b (blau/gelb Achse) — sowie ein Alpha-Kanalwert (alpha). Diese Kanalwerte sind innerhalb der Funktion verfügbar, um verwendet zu werden, wenn die Ausgabefarbkanalwerte definiert werden:

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

Wenn eine relative Farbe definiert wird, können die verschiedenen Kanäle der Ausgabefarbe auf verschiedene Arten ausgedrückt werden. Im Folgenden werden wir einige Beispiele untersuchen, um diese zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir relative Farbsyntax. Das erste Beispiel gibt jedoch die gleiche Farbe wie die Ursprungfarbe aus und das zweite Beispiel gibt eine Farbe aus, die überhaupt nicht auf der Ursprungfarbe basiert. Diese erzeugen wirklich keine relativen Farben! Sie würden diese wahrscheinlich niemals in einem echten Codebase verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele aufgenommen, um einen Ausgangspunkt für das Lernen über relative lab() Syntax zu bieten.

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

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

Diese Funktion ergibt die Farbe lab(54.29 80.8198 69.8997).

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 Ursprungfarbe basiert:

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

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

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

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

Dieses Beispiel:

• Konvertiert die hsl() Ursprungfarbe in eine äquivalente lab() Farbe — lab(54.29 80.8198 69.8997).
• Setzt die l und b Kanäle der Ausgabefarbe auf die L und b Kanalwerte des lab() Äquivalents der Ursprungfarbe — diese Werte sind 54.29 und 69.8997.
• Setzt den a Kanalwert der Ausgabefarbe auf einen neuen Wert, der nicht auf der Ursprungfarbe 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 Alpha-Kanäle weder für die Ursprung- noch für die Ausgabefarben explizit angegeben. Wenn der Ausgabefarbe-Alpha-Kanal nicht angegeben ist, wird der gleiche Wert wie der Ursprungfarbe-Alpha-Kanal angenommen. Wenn der Ursprungfarbe-Alpha-Kanal nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), ist der Standardwert 1. Daher sind die Ursprung- und Ausgabefarbe-Alpha-Kanalwerte 1 für die obigen Beispiele.

Werfen wir einen Blick auf einige Beispiele, die Ursprung- und Ausgabefarbe-Alpha-Kanalwerte spezifizieren. Das erste Beispiel spezifiziert den Ausgabefarbe-Alpha-Kanalwert als denselben wie den Ursprung-Alpha-Kanalwert, während das zweite Beispiel einen anderen Ausgabefarbe-Alpha-Kanalwert spezifiziert, der nicht auf dem Ursprung-Alpha-Kanalwert basiert.

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

Dieses Beispiel demonstriert die Auswirkungen des Setzens der a und b Werte der lab() Funktion auf die Endpunkte und Mittelpunkte 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 background-color Eigenschaft variieren wir die a und b Werte der lab() Farbfunktion entlang der a-Achse und b-Achse und zeigen die Effekte von maximalen, mittleren und minimalen Werten in jedem Fall.

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 steht 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 liegen 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 umfasst lineare Farbverläufe, um die Werteprogression 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 Farbverlauf bleibt eine Achse statisch, während die andere Achse von einem Ende zum anderen 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 Variation des A (Alpha-)Werts der lab() Funktional-Notation. Die red und red-alpha Elemente überlappen das #background-div Element, um den Effekt der Opazität zu demonstrieren. Ein A Wert von 0.4 macht die Farbe 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

Dieses Beispiel stylt drei <div> Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere verwendet die unveränderte --base-color, während die linken und rechten Elemente hellere und dunklere Varianten dieser --base-color erhalten.

Diese Varianten werden unter Verwendung relativer Farben definiert — die --base-color Benutzerdefinierte Eigenschaft wird in eine lab() Funktion gespeist, und die Ausgabefarben haben ihren Helligkeitskanal modifiziert, um den gewünschten Effekt durch eine calc() Funktion zu erzielen. 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:

• <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 Release Notes: enthält lab() und lch() Farben