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 sind die Beschreibungen der erlaubten 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. 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 bestimmt, wie grün (Bewegung zu -125) oder rot (Bewegung zu +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 ±125 (±100%) Grenzen festlegen können. In der Praxis können Werte jedoch ±160 nicht ü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 (Bewegung zu -125) oder gelb (Bewegung zu +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 ±125 (±100%) Grenzen festlegen können. In der Praxis können Werte jedoch ±160 nicht überschreiten.

A Optional

Ein <alpha-value> repräsentiert den Alphakanalwert 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 keinen Alphakanal explizit festzulegen. Wenn der A-Kanalwert nicht explizit angegeben ist, wird er standardmäßig auf 100% gesetzt. Wenn er enthalten ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Relative Wert-Syntax

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

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from ist immer enthalten, wenn Sie eine relative Farbe definieren, gefolgt von einem <color>-Wert, der die Ursprungsfarbe darstellt. 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.

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. 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 repräsentiert die Entfernung der Ausgabefarbe entlang der a-Achse, die bestimmt, wie grün (Bewegung zu -125) oder rot (Bewegung zu +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 ±125 (±100%) Grenzen festlegen können. In der Praxis können Werte jedoch ±160 nicht ü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 (Bewegung zu -125) oder gelb (Bewegung zu +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 ±125 (±100%) Grenzen festlegen können. In der Praxis können Werte jedoch ±160 nicht überschreiten.

A Optional

Ein <alpha-value> repräsentiert den Alphakanalwert 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 keinen Alphakanal explizit festzulegen. Wenn der A-Kanalwert nicht explizit angegeben ist, wird er standardmäßig auf den Alphakanalwert der Ursprungsfarbe gesetzt. Wenn er enthalten ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definition von relativen Farbausgabe-Kanal-Komponenten

Beim Verwenden der relativen Farbsyntax innerhalb einer lab()-Funktion wandelt der Browser die Ursprungsfarbe in eine äquivalente Lab-Farbe um (falls diese nicht bereits als solche festgelegt 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 stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

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

Beim Definieren einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf mehrere unterschiedliche Arten ausgedrückt werden. Unten werden wir einige Beispiele studieren, um dies zu illustrieren.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Das erste gibt jedoch dieselbe Farbe wie die Ursprungsfarbe aus und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erstellen wirklich keine relativen Farben! In einem echten Code würden Sie diese wahrscheinlich niemals verwenden und stattdessen einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt zum Lernen über relative lab()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) (entspricht red). 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 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 Ausgabefarbe der Kanalwerte und gibt eine komplett 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 Ausgabe die 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:

• Wandelt die hsl() Ursprungsfarbe in eine äquivalente lab() Farbe um — lab(54.29 80.8198 69.8997).
• Setzt die l- und b-Kanalwerte für die Ausgabefarbe auf die L- und b-Kanalwerte des lab()-Äquvalents der Ursprungsfarbe — diese Werte sind 54.29 und 69.8997 respektive.
• 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 bisherigen Beispielen in diesem Abschnitt sind die Alphakanäle weder für die Ursprung- noch für die Ausgabefarben explizit angegeben worden. Wenn der Alphakanal der Ausgabefarbe nicht angegeben ist, wird er standardmäßig auf denselben 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 standardmäßig auf 1 gesetzt. Daher sind die Ursprung- und Ausgabewerte der Alphakanäle 1 für die obigen Beispiele.

Schauen wir uns einige Beispiele an, die die Werte der Ursprung- und Ausgabefarb-Alphakanäle angeben. Das erste legt den Ausgabewert des Alphakanals auf denselben Wert wie der Wert des Ursprungs-Alphakanals fest, während das zweite einen anderen Wert festlegt, der nicht auf dem Ursprungs-Alphakanalwert 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() Ursprungsfarbe erneut 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 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))

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 Auswirkungen der Einstellung der a- und b-Werte der lab()-Funktion an den Endpunkten 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

Durch Verwendung der CSS background-color-Eigenschaft variieren wir die a- und b-Werte der lab()-Farb-Funktion entlang der a-Achse und b-Achse und zeigen die Auswirkungen 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 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 0-Wert für beide Achsen.

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

Dieses Beispiel beinhaltet lineare Verläufe, um die Progression 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 Verlaufsbild bleibt eine Achse statisch, während die andere Achse von ihrem niedrigen Ende bis 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 Deckkraft

Das folgende Beispiel zeigt die Wirkung der Variation des A (Alpha)-Wertes der lab()-Funktionalnotation. Die red und red-alpha Elemente überlappen das #background-div Element, um die Wirkung der Deckkraft zu demonstrieren. Ein A-Wert von 0.4 verleiht der Farbe eine Deckkraft von 40%.

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 Farben mit lab()

Dieses Beispiel stylt drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color, während die linke und rechte Varianten dieser --base-color aufgehellt bzw. abgedunkelt sind.

Diese Varianten werden unter Verwendung von relativen Farben definiert — die benutzerdefinierte Eigenschaft --base-color wird in eine lab()-Funktion übergeben, und die Ausgabefarben haben ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über eine calc()-Funktion zu erzielen. Der aufgehellte Wert hat eine 15%ige Erhöhung des Helligkeitskanals und der abgedunkelte Wert eine 15%ige Verringerung des Helligkeitskanals.

<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