Um eine Farbe in CSS darzustellen, müssen Sie eine Möglichkeit finden, das analoge Konzept der "Farbe" in eine digitale Form zu übersetzen, die ein Computer verwenden kann. Dies geschieht typischerweise, indem die Farbe in Bestandteile zerlegt wird, wie z.B. Mengen verschiedener Primärfarben zum Mischen oder Helligkeit und Farbton. Definierte Farbmodelle stellen sicher, dass Farben unabhängig von ihrem Darstellungskontext gleich erscheinen.

Ein Farbmodell ist ein mathematisches Modell, das Farben mit Hilfe von numerischen Werten darstellt. Farbmodelle beschreiben, wie man die verfügbaren Farben innerhalb eines Farbraums erstellt.RGB war das erste Farbmodell für das Web. DersRGB-Farbraum des RGB-Farbmodells – der standardisierte Rot-, Grün- und Blau-Farbraum – wurde 1996 für Computermonitore und das Web erstellt. EinFarbraum ist ein System zur Gruppierung von Farben, so dass die Beschreibung einer gegebenen Farbe konsistent ist. Wenn Sie eine Farbe zwischen zwei verschiedenen Farbräumen umwandeln, sollte sie in beiden identisch aussehen.

Ursprünglich waren Monitore begrenzt, wie viele Farben sie anzeigen konnten, und CSS-Farben waren durch diese Beschränkungen begrenzt, die sich mit der Zeit erweiterten, als die Fähigkeiten verbessert wurden. Da moderne Geräte nicht mehr auf RGB beschränkt sind, haben wir jetzt auch Farbmodelle, die auf menschlicher Wahrnehmung basieren und ein viel breiteresSpektrum an Farben bieten. Wir können jetzt Farbe in CSS auf verschiedene Weisen beschreiben, und die Optionen erweitern sich ständig.

Dieser Leitfaden stellt die verschiedenen<color>-Wertetypen vor. Für eine detailliertere Diskussion siehe die unten angegebenen Referenzlinks.

Schlüsselwörter

Das Web definiert eine Reihe von standardisierten Farbnamen, die es Ihnen ermöglichen, Schlüsselwörter anstelle numerischer Darstellungen zu verwenden, um Farben zu beschreiben. Dies ist ein einfacherer, wenn auch begrenzter Ansatz – möglicherweise gibt es kein Schlüsselwort, das exakt die Farbe repräsentiert, die Sie verwenden möchten.

Farbschlüsselwörter beinhalten Standard-Primär- und -Sekundärfarben (wiered,blue oderorange), Grautöne (vonblack biswhite, einschließlich Farben wiedarkgray undlightgrey) und eine Vielzahl anderer Mischfarben, einschließlichlightseagreen,cornflowerblue undrebeccapurple. Benannte Farben verwenden dasRGB-Modell und sind mit demsRGB (srgb) Farbraum verbunden.

Es gibt über 160 benannte Farben. Es gibt benannte Farben von besonderem Interesse:transparent setzt einen transparenten Farbwert, währendcurrentColor den aktuellen Wert der CSS-color-Eigenschaft setzt. Es gibt auch benannte<system-color> wieaccentcolortext undbuttonface, die die Standardfarbauswahlen widerspiegeln, die vom Benutzer, Browser oder Betriebssystem getroffen werden.

Alle Farbschlüsselwörter sind nicht case-sensitiv. Weitere Informationen zu Farbschlüsselwörtern finden Sie im<named-color> Datentyp.

RGB-Werte

Es gibt zwei primäre Methoden, um eineRGB-Farbe durch ihre Rot-, Grün- und Blau-Komponenten in CSS zu definieren – hexadezimale undrgb()-Werte. Wie benannte Farben verwenden auch diese Methoden dasRGB-Modell und sind mit demsRGB (srgb) Farbraum verbunden. Allerdings erlauben sie es, ein viel breiteres Spektrum an Farben zu spezifizieren.

Hexadezimale String-Notation

Die Hexadezimale (Hex)-String-Notation verwendet einen hexadezimalen Wert, um jede Komponente (Rot, Grün und Blau) einer RGB-Farbe darzustellen. Es kann auch eine vierte Komponente enthalten: den Alphakanal (oder Transparenz).

Eine Farbe in hexadezimaler String-Notation beginnt immer mit dem Zeichen"#". Danach kommen die hexadezimalen Ziffern des Farbcode. Der String ist nicht case-sensitiv.

"#rrggbb"

Gibt eine vollständig undurchsichtige Farbe an, deren rote Komponente die hexadezimale Zahl0xrr ist, die grüne Komponente0xgg und die blaue Komponente0xbb.

"#rrggbbaa"

Gibt eine Farbe an, deren rote Komponente die hexadezimale Zahl0xrr ist, die grüne Komponente0xgg und die blaue Komponente0xbb. Der Alphakanal wird durch0xaa angegeben; je niedriger dieser Wert ist, desto transparenter wird die Farbe.

"#rgb"

Gibt eine Farbe an, deren rote Komponente die hexadezimale Zahl0xrr ist, die grüne Komponente0xgg und die blaue Komponente0xbb.

"#rgba"

Gibt eine Farbe an, deren rote Komponente die hexadezimale Zahl0xrr ist, die grüne Komponente0xgg und die blaue Komponente0xbb. Der Alphakanal wird durch0xaa angegeben; je niedriger dieser Wert ist, desto transparenter wird die Farbe.

Wie oben gezeigt, kann jede der roten, grünen und blauen Farbkomponenten als zwei Ziffern umfassender Hex-Wert dargestellt werden, der eine Zahl zwischen 0 (00) und 255 (FF) repräsentiert, oder als ein Ziffer umfassender Hex-Wert (eine Zahl zwischen 0 (0) und 15 (F).

Diese beiden Hex-Farben sind äquivalente Farbwerte; beide sind rot:

color: #ff0000;color: #f00;

Alle Komponentenmüssen mit der gleichen Anzahl an Ziffern angegeben werden. Wenn Sie die Einziffernnotation verwenden, wird die endgültige Farbe berechnet, indem jede Komponente der Ziffer zweimal verwendet wird; das heißt,"#D" wird zu"#DD", wenn gezeichnet wird.

Um die Werte 25% transparent zu machen, fügen Sie den Alphakanalwert wie unten gezeigt hinzu:

color: #ff000044;color: #f004;

Siehe den<hex-color> Datentyp für weitere Informationen zur hexadezimalen String-Notation für Farben.

HTML-Eingabe vom Typ Farbe

Es gibt viele Situationen, in denen Ihre Website dem Benutzer ermöglichen muss, eine Farbe auszuwählen. Vielleicht haben Sie eine anpassbare Benutzeroberfläche oder Sie implementieren eine Zeichenanwendung. Vielleicht haben Sie bearbeitbaren Text und müssen dem Benutzer die Auswahl der Textfarbe erlauben. Oder vielleicht ermöglicht Ihre Anwendung dem Benutzer, Farben Ordnern oder Elementen zuzuweisen. Für solche Anwendungsfälle hat das<input> Element einen"color"type, der ein Farbauswahlelement rendert.

Dieses Beispiel erlaubt es Ihnen, eine Farbe auszuwählen. Sobald eine Auswahl getroffen wurde, wird dieborder-color auf diese Farbe gesetzt und der Wert angezeigt.

<div>  <label for="colorPicker">Border color:</label>  <input type="color" value="#8888ff" />  <output></output></div>

Das HTML erstellt eine Box, die ein Farbauswahlelement enthält (mit einem Label, das mit dem<label> Element erstellt wurde) und ein leeres<output>-Element, in das wir den Wert der Farbe mit JavaScript ausgeben werden. Der Wert der Farbeingabe ist immer ein hexadezimaler String.

#box {  width: 500px;  height: 100px;  border: 5px solid rgb(245 220 225);  padding: 4px 6px;  font:    16px "Lucida Grande",    "Helvetica",    "Arial",    sans-serif;}

Das folgende JavaScript aktualisiert die Farbe des Rahmens, um dem Anfangswert des Farbauswahlers zu entsprechen, und fügt dann zwei Event-Handler zum<input type="color"> Element hinzu, um auf Änderungen seines Werts zu reagieren.

const colorPicker = document.querySelector("#colorPicker");const box = document.querySelector("#box");const output = document.querySelector("output");box.style.borderColor = colorPicker.value;colorPicker.addEventListener("input", (event) => {  box.style.borderColor = event.target.value;});colorPicker.addEventListener("change", (event) => {  output.innerText = `${colorPicker.value}`;});

Dasinput-Ereignis wird jedes Mal gesendet, wenn sich der Wert des Elements ändert; d.h. jedes Mal, wenn der Benutzer die Farbe im Farbwähler anpasst. Jedes Mal, wenn dieses Ereignis eintritt, setzen wir die Randfarbe der Box auf den aktuellen Wert des Farbwählers.

Daschange-Ereignis wird empfangen, wenn der Wert des Farbwählers endgültig ist. Wir antworten, indem wir den Inhalt des<output> auf den Stringwert der ausgewählten Farbe setzen.

RGB-Funktionsnotation

RGB (Rot/Grün/Blau) Funktionsnotation, ähnlich zur hexadezimalen String-Notation, stellt Farben unter Verwendung ihrer roten, grünen und blauen Komponenten dar (und optional eine Alphakanalkomponente für Transparenz). Anstatt einen String zu verwenden, wird die Farbe jedoch mithilfe der CSS-Funktionrgb() definiert. Diese Funktion akzeptiert 3 oder 4 Eingabeparameter – rote, grüne und blaue Komponentenwerte sowie einen optionalen Alphakanalwert.

Zulässige Werte für jeden dieser Parameter sind:

red,green undblue

Jeder muss einen<number> Wert zwischen 0 und 255 (inklusive), einen<percentage> von 0% bis 100% darstellen, oder das Schlüsselwortnone, das in diesem Fall0 entspricht.

alpha

Der Alphakanal ist als Prozentsatz zwischen0% (vollständig transparent) und100% (vollständig undurchsichtig) oder als Zahl zwischen0.0 (entspricht0%) und1.0 (entspricht100%) spezifiziert.

Ein leuchtendes Rot, das zu 50 % transparent ist, kann beispielsweise alsrgb(255 0 0 / 50%) oderrgb(100% 0 0 / 0.5) dargestellt werden.

Siehe diergb() Farbfunktion für weitere Informationen zur RGB-Funktionsnotation.

Farb-Funktionen mit einem Farbtonkomponenten

Die Farbfunktionen, die eine<hue>-Komponente — ein<angle> aus dem Farbmodell-Farbrad — enthalten, sind diesrgb Farbfunktionenhsl() undhwb(), CIElabslch() Funktion und OKLabsoklch() Farbfunktion. Diese Farbfunktionen sind intuitiver, da der Farbton es uns ermöglicht, Unterschiede oder Ähnlichkeiten zwischen Farben wie Rot, Orange, Gelb, Grün, Blau usw. zu erkennen.

HSL-Funktionsnotation

Diehsl() CSS-Farbfunktion war die erste auf Farbton basierende Farbfunktion, die in Browsern unterstützt wurde.hsl() ist intuitiver alsrgb() – es ist generell einfacher zu bestimmen, welchen Effekt das Variieren der Werte für Farbton (h), Sättigung (s) und Helligkeit (l) hat, als spezifische Farben über die Rot-, Grün- und Blau-Kanäle zu definieren. Darüber hinaus ist HSL ähnlich zum HSB-(Farbton, Sättigung, Helligkeit)-Farbwähler in Photoshop, was es vielen Menschen sofort vertraut machte, als es erstmals unterstützt wurde.

Diehsl() undhwb() sRGB-Farbfunktionen sind beide zylindrisch. Farbton definiert die Farbe als ein<angle> auf einem kreisförmigenFarbkreis. Das untenstehende Diagramm zeigt einen HSL-Farbzylinder. Sättigung ist ein Prozentsatz, der definiert, wie weit die Farbe auf einer Skala zwischen vollständig grau und mit der maximal möglichen Menge des gegebenen Farbtons gesättigt ist.Mit zunehmendem Helligkeitswert wechselt die Farbe von der dunkelsten zur hellsten möglichen Farbe (von schwarz nach weiß).

Bild bereitgestellt von BenutzerSharkD aufWikipedia, verteilt unter derCC BY-SA 3.0 Lizenz.

Der Wert der Farbton-Komponente (H) einer HSL- (oder HWB-) Farbe ist ein Winkel, der bei 0° als Rot beginnt und dann durch Gelb, Grün, Cyan, Blau und Magenta geht, bevor er bei Rot wieder auf 360° endet. Der Wert kann in jeder von CSS unterstützten<angle>-Einheit angegeben werden, einschließlich Grad (deg), Radianten (rad), Gon (grad) oder Umdrehungen (turn). Der Farbtonwert identifiziert, welche Grundfarbe die Farbe hat, kontrolliert aber nicht, wie lebendig oder gedämpft oder wie hell oder dunkel die Farbe ist.

Die Sättigungskomponente (S) der Farbe gibt den Prozentsatz der Endfarbe an, der aus dem angegebenen Farbton besteht, wobei 100% vollständig gesättigt und 0% vollständig farblos (grauskaliert) ist. Die Helligkeitskomponente (L) gibt an, wie hell die Farbe ist, auf einer gleitenden Skala zwischen vollständig schwarz (0%) und vollständig weiß (100%). Sie können auch optional einen Alphakanal einschließen, dem ein Schrägstrich (/) vorangeht, um die Farbe weniger als 100% undurchsichtig zu machen.

Hier sind einige Beispiel-Farben in HSL-Notation:

table {  border: 1px solid black;  font:    16px "Open Sans",    "Helvetica",    "Arial",    sans-serif;  border-spacing: 0;  border-collapse: collapse;}th,td {  border: 1px solid black;  padding: 4px 6px;  text-align: left;}th {  background-color: hsl(0 0% 75%);}

<table>  <thead>    <tr>      <th scope="col">Color in HSL notation</th>      <th scope="col">Example</th>    </tr>  </thead>  <tbody></tbody></table>

const colors = [  "hsl(90deg 0% 50%)",  "hsl(90 100% 50%)",  "hsl(0.15turn 50% 75%)",  "hsl(0.15turn 90% 75%)",  "hsl(0.15turn 90% 50%)",  "hsl(270deg 90% 50% / 50%)",];const tbody = document.querySelector("tbody");for (const color of colors) {  const tr = document.createElement("tr");  const td1 = document.createElement("td");  td1.appendChild(document.createElement("code")).textContent = color;  const td2 = document.createElement("td");  td2.style.backgroundColor = color;  tr.appendChild(td1);  tr.appendChild(td2);  tbody.appendChild(tr);}

Der letzte Wert ist halbtransparent; er enthält den optionalen Alphakanal, dem ein Schrägstrich vorangeht.

HWB-Funktionsnotation

Diehwb() Farbfunktion verwendet dasselbe Farbkoordinatensystem wiehsl(), wobei0deg Rot ist. Statthsl()'s Helligkeit und Sättigung spezifizierenhwb()-Funktionen jedoch Weißgrad (W) und Schwarzgrad (B). Diese Funktion ist ebenfalls ziemlich intuitiv — sie ermöglicht es Ihnen, einen Farbton auszuwählen und dann Weiß oder Schwarz in gewünschtem Maß hinzuzumischen, um die gewünschte Farbe zu erzielen.

W undB Werte reichen von0% bis100% (oder0 bis1). Wenn der kombinierte Wert vonW undB bei 100% (oder1) oder größer liegt, ist die Farbe grau, ähnlich wie das Setzen ders auf0% beihsl(). Wie beihsl() kann auch ein optionaler Alphakanalwert, dem ein Schrägstrich vorangeht (/), hinzugefügt werden.

Hier sind einige Beispiele für die Verwendung der HWB-Notation:

/* These examples all specify varying shades of a lime green. */hwb(90 10% 10%)hwb(90 50% 10%)hwb(90deg 10% 10%)hwb(1.5708rad 60% 0%)hwb(.25turn 0% 40%)/* Same lime green but with an alpha value */hwb(90 10% 10% / 0.5)hwb(90 10% 10% / 50%)

In den unten stehenden Beispielen setzen wir dieselben Farbtöne wie in denhsl()-Beispielen, aber wir fügen jedem Farbton überhwb() Weißgrad und Schwarzgrad hinzu, anstatt Sättigung und Helligkeit:

table {  border: 1px solid black;  font:    16px "Open Sans",    "Helvetica",    "Arial",    sans-serif;  border-spacing: 0;  border-collapse: collapse;}th,td {  border: 1px solid black;  padding: 4px 6px;  text-align: left;}th {  background-color: hwb(0 75% 25%);}

<table>  <thead>    <tr>      <th scope="col">Color in HWB notation</th>      <th scope="col">Example</th>    </tr>  </thead>  <tbody></tbody></table>

const colors = [  "hwb(90deg 50% 50%)",  "hwb(90 0% 0%)",  "hwb(0.15turn 25% 0%)",  "hwb(0.15turn 10% 25%)",  "hwb(1turn 10% 65%)",  "hwb(270deg 75% 10%)",];const tbody = document.querySelector("tbody");for (const color of colors) {  const tr = document.createElement("tr");  const td1 = document.createElement("td");  td1.appendChild(document.createElement("code")).textContent = color;  const td2 = document.createElement("td");  td2.style.backgroundColor = color;  tr.appendChild(td1);  tr.appendChild(td2);  tbody.appendChild(tr);}

LCH und OkLCh: CIELAB und Oklab Farbräume

Währendhsl() undhwb() intuitiv sind, haben sie einen großen Nachteil. Bei diesen Funktionen hat jeder voll gesättigte Farbtonwinkel (hsl(<angle> 100% 50%) oderhwb(<angle> 0% 0%)) dieselbe Helligkeit, aber das entspricht nicht dem menschlichen Sehvermögen oder der Arbeitsweise von Monitoren. Weißen Text auf voll gesättigtem Blau (hsl(240deg 100% 50%)) zu setzen ist lesbar, aber derselbe Text auf voll gesättigtem Gelb (hsl(60deg 100% 50%)) wird nicht nur unleserlich sein, sondern auch die Augen Ihrer Benutzer schmerzen. Bei diesen Farbfunktionen ist die Helligkeit einer Farbe relativ zu anderen Farben, und nicht zur menschlichen Wahrnehmung. In Wirklichkeit haben nicht alle Farbtöne die gleiche maximale Sättigung.

Wäre es nicht fantastisch, wenn Sie einfach den Farbtonkanal einer Farbe auf einer Website ändern könnten, ohne dass der Text unleserlich wird? Das können Sie mit Farbfunktionen in den CIELAB- und Oklab-Farbräumen.

Die CIELAB- und Oklab-Farbräume repräsentieren den gesamten Bereich der Farben, die der Mensch sehen kann. CIE Lab Farbfunktionen schließenlch() undlab() ein. Oklab-Farbfunktionen schließenoklch() undoklab() ein. Das Hauptziel dieser Modelle ist, dass sie einheitlich sind, so dass ein gegebener Abstand zwischen zwei Punkten im Farbraum für einen Betrachter gleich unterschiedlich erscheinen sollte. Oklab ist ein Farbraum, der dasselbe Modell wie CIELAB verwendet, aber zusätzliche numerische Optimierungsschritte einbezieht, so dass die Werte als genauer als die von CIELAB gelten. Aufgrund dieser Optimierung sind Farbtöne gleichmäßiger wahrnehmbar als bei anderen Modellen.

Dielch() undoklch() Funktionen verwenden Helligkeit (L), Chroma (C) und Farbton (H) und werden in diesem Abschnitt weiter erörtert. Dielab() undoklab() Funktionen arbeiten anders, da sie Helligkeit (L), Rot/Grün-ness (entlang dera-Achse) und Gelb/Blau-ness (entlang derb-Achse) verwenden. Diese Achsen werden als rechteckige Koordinaten bezeichnet. Der Hauptvorteil dieser Farbfunktionen ist, dass dielightness die wahrgenommene Helligkeit ist; es ist die Helligkeit einer Farbe, wie sie vom menschlichen Auge wahrgenommen wird, anstatt die Helligkeit im Vergleich zu anderen Farben.

Ähnlich wie die sRGB-Farbton-Farbfunktionen ist der Farbton (h) inlch() undoklch() eine Zahl, ein Winkel oder das Schlüsselwortnone (gleichbedeutend mit0deg), das den<hue>-Winkel der Farbe darstellt. Dabei sind jedoch die Farben bei jedem Winkelwert nicht gleich. Die Winkel, die bestimmten Farbtönen entsprechen, unterscheiden sich über die sRGB-, CIELAB- (verwendet vonlch()) und Oklab- (verwendet vonoklch()) Farbräume hinweg.

Die folgenden Verläufe zeigen die Farbtonfarben bei jedem Winkel von0deg bis360deg in den sRGB-, CIELAB- und Oklab-Farbräumen:

<p>sRGB (<code>hsl()</code> and <code>hwb()</code>)</p><div></div><p>CIE Lab (<code>lch()</code>)</p><div></div><p>OKLab (<code>oklch()</code>)</p><div></div><p>  <label><input type="checkbox" /> Toggle greyscale</label></p>

div:has(~ p input:checked) {  filter: grayscale(100%);}p {  margin: 0;}div {  height: 50px;  margin-bottom: 10px;}#srgb {  background: linear-gradient(    to right,    hsl(0deg 100% 50%),    hsl(90deg 100% 50%),    hsl(180deg 100% 50%),    hsl(270deg 100% 50%),    hsl(360deg 100% 50%)  );}#lch {  background: linear-gradient(    to right,    lch(50% 100% 0deg),    lch(50% 100% 90deg),    lch(50% 100% 180deg),    lch(50% 100% 270deg),    lch(50% 100% 360deg)  );}#oklch {  background: linear-gradient(    to right,    oklch(50% 100% 0deg),    oklch(50% 100% 90deg),    oklch(50% 100% 180deg),    oklch(50% 100% 270deg),    oklch(50% 100% 360deg)  );}

Vielleicht bemerken Sie, wie die Helligkeit der späteren Verläufe gleichmäßiger über das Spektrum der Farbtöne verteilt ist als der sRGB-Verlauf. Aktivieren Sie das Kontrollkästchen im obigen Beispiel, um den Farbtonverlauf in Graustufen umzuwandeln, um dies deutlicher zu machen.

Beachten Sie auch, wie die Verteilung der blauen Werte in CIE Lab länger ist als in den anderen beiden. Dies ist der Unterschied zwischenlch() undoklch(). Dielch() Blaustrecke beruht auf einem Fehler, der das Chroma und die Helligkeit von Farbtonwerten zwischen270deg und330deg verschiebt. Dies wurde im oklab Farbraum behoben und daher dieoklch() Farbnomenklatur.

Wie oben erwähnt, ist der Farbton (H) in denlch() undoklch() Funktionen ein<angle>,number oder das Schlüsselwortnone. Dielightness ist entweder ein<percentage> oder fürlch() eine Zahl zwischen0 und100 und füroklch() eine Zahl zwischen0 und1, wobei0 oder0% den völligen Mangel an Helligkeit, was schwarz bedeutet.

DasC ist ein<number>,<percentage>, oder das Schlüsselwortnone (entspricht0%) ist das Chroma oder die "Menge an Farbe". Dies ähnelt demS Sättigungswert derhsl() Farbfunktion. Der Wert0 bedeutet völligen Mangel an Chroma oder Sättigung; was zu einem Grau zwischen Weiß und Schwarz inklusive führt, abhängig vom Helligkeitswert. Die Zahlenwerte sind theoretisch unbegrenzt, wobei100% gleich150 fürlch() und0.4 füroklch() ist.

Wie bei den anderen Farbfunktionen gibt es auch einen optionalen Alphatransparenzwert, dem ein Schrägstrich (/) vorangeht.

Das untenstehende Beispiel zeigt die Auswirkungen der Änderung des Helligkeitswertes in denlch() undoklch() Funktionen.

/* Varying shades of pink */.container {  display: grid;  font-family: sans-serif;  font-size: 14px;  color: white;  grid-template-columns: repeat(6, 1fr);  gap: 4px;}.dark-text {  color: lch(1% 40 0deg);}.container div {  border-radius: 8px;  padding: 8px 4px;}

<div></div>

const container = document.querySelector(".container");for (let l = 0; l <= 100; l += 10) {  const div = document.createElement("div");  const usedL = l === 0 ? 1 : l === 100 ? 99 : l;  div.textContent = div.style.backgroundColor = `lch(${usedL}% 40 0)`;  if (usedL >= 80) div.classList.add("dark-text");  container.appendChild(div);}container.appendChild(document.createElement("div"));for (let l = 0; l <= 100; l += 10) {  const div = document.createElement("div");  const usedL = l === 0 ? 1 : l === 100 ? 99 : l;  div.textContent = div.style.backgroundColor = `oklch(${usedL}% 0.12 0)`;  if (usedL >= 80) div.classList.add("dark-text");  container.appendChild(div);}

Lab und OKLab

Dielab() Funktionsnotation drückt eine gegebene Farbe im CIE L*a*b* Farbraum aus. Dieoklab() Funktion definiert Farben im OKLab-Farbraum. Diese Funktionen enthalten den gesamten Bereich der Farben, die Menschen sehen können, indem sie die Helligkeit (L), einen Rot/Grün-Achsenwert (a), einen Blau/Gelb-Achsenwert (b) und einen optionalen Alphatransparenzwert verwenden.

Ähnlich wie beilch() undoklch() ist dielightness entweder:

• Ein<percentage>, wobei0% vollständig schwarz und100% vollständig weiß ist.
• Eine Zahl zwischen0 und100 fürlab() und0 und1 füroklab(), wobei0 vollständig schwarz und1/100 vollständig weiß ist.

Dera-Wert ist ein<number> zwischen-125 und125 fürlab() oder-0.4 und0.4 füroklab(), ein<percentage> zwischen-100% und100%, oder das Schlüsselwortnone (gleichbedeutend mit0% in diesem Fall). Dieser Wert gibt die Entfernung der Farbe entlang der a-Achse im Farbraum an, was definiert, wie grün (in Richtung -100%) oder rot (in Richtung +100%) die Farbe ist.

Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte erlauben) und theoretisch unbegrenzt sind, d.h. Sie können Werte außerhalb der ±125 oder ±0.4 (±100%)-Grenzen festlegen. In der Praxis können die Werte jedoch nicht die ±160 oder ±0.5-Grenzen überschreiten.

Derb-Wert unterliegt den gleichen Einschränkungen. Er gibt die Entfernung der Farbe entlang der b-Achse im Farbraum an, was definiert, wie blau (in Richtung -100%) oder gelb (in Richtung +100%) die Farbe ist.

Das folgende Beispiel zeigt die Auswirkungen der Variation dera-Achse über einelab()-Funktion und derb-Achse über eineoklab()-Funktion.

<div></div>

/* Varying shades of pink */.container {  display: grid;  font-family: sans-serif;  font-size: 14px;  color: white;  grid-template-columns: repeat(5, 1fr);  gap: 4px;}.container div {  border-radius: 8px;  padding: 8px 4px;}

const container = document.querySelector(".container");for (let a = -100; a <= 100; a += 25) {  const div = document.createElement("div");  div.textContent = div.style.backgroundColor = `lab(50% ${a}% 0)`;  container.appendChild(div);}container.appendChild(document.createElement("div"));for (let b = -4; b <= 4; b++) {  const div = document.createElement("div");  div.textContent = div.style.backgroundColor = `oklab(50% 0 ${b / 10})`;  container.appendChild(div);}

Zusätzliche Farbfunktions-Notationen

Diecolor()-Funktion

Wenn Sie eine explizite Kontrolle über Farbräume bei der Definition von Farben möchten, können Sie diecolor() Funktion verwenden.

Dies ist nützlich, um eine Farbe für hochauflösende Geräte mit breiteren Farbspektren zu beschreiben.Zum Beispiel, wenn Sie die Farbedisplay-p3 0 0 1 anzeigen möchten, die außerhalb des sRGB-Spektrums liegt, könnten Sie eine@mediacolor-gamut At-Regel verwenden, um zu erkennen, ob die Hardware des Kunden Farben in diesem Bereich unterstützt, bevor Sie versuchen, sie zu verwenden:

.vibrant {  background-color: color(srgb 0 0 1);}@media (color-gamut: p3) {  .vibrant {    background-color: color(display-p3 0 0 1);    /* Equivalent to out-of-gamut color(srgb 0 0 1.042) */  }}

Die Verwendung voncolor() ist wichtig, wenn es um relative Farben geht, die als nächstes besprochen werden. Die älteren sRGB-Farbnotationen, die oben diskutiert wurden —hsl(),hwb(), undrgb()— drücken nicht das volle Spektrum der sichtbaren Farben aus, während diecolor()-Funktion ein viel breiteres Farbspektrum unterstützt. Daher wird bei der Verwendung der älteren Funktionstypen zur Definition relativer Farben die ausgegebene Farbe, die durch Abfragen derHTMLElement.style Eigenschaft oder derCSSStyleDeclaration.getPropertyValue()-Methode zurückgegeben wird, eincolor(srgb ...)-Wert sein.

Um ein Beispiel für die Umwandlung derrgb(),hsl(),hwb(), und andereFarbformate zu sehen, schauen Sie in unserFarbumrechnungs-Tool.

Relative Farben

Jede der oben aufgeführten Farbfunktionen kann verwendet werden, umrelative Farben zu definieren, was die Definition von<color>-Werten relativ zu anderen bestehenden Farben erlaubt, anstatt einen Farbwert jedes Mal von Grund auf neu zu definieren. Diese leistungsstarke Funktion ermöglicht das Erstellen von Komplementärfarben zu bestehenden Farben — wie helleren, dunkleren, gesättigten, halbdurchsichtigen oder invertierten Varianten einer Originalfarbe. Relative Farben bieten einen effektiven Mechanismus zur Erstellung von Paletten und zur Definition von Farbveränderungen. Weitere Informationen zu ihren relativen Syntaxen finden Sie auf jeder Farbfunktionsseite.

Wie oben erwähnt, wird bei der Verwendung vonrgb(),hsl(), oderhwb() zur Ausgabe einer relativen Farbe die ausgegebene Farbe einecolor()-Funktion imsrgb-Farbraum sein.

color-mix() Funktion

Diecolor-mix() Funktion nimmt zwei Farbwerte beliebiger Syntax, die oben erwähnt wurde, zusammen mit optionalen prozentualen Anteilen für jede Farbe und gibt das Ergebnis ihres Mischens in einem bestimmten Farbraum mit einem bestimmten Anteil zurück.

light-dark() Funktion

Dielight-dark() Funktion ermöglicht es Ihnen, zwei Farbwerte für eine Eigenschaft anzugeben, die für die Verwendung in hellen bzw. dunklen Farbschemata vorgesehen ist. Welcher gesetzt wird, hängt davon ab, ob der Entwickler ein helles oder dunkles Farbschema gesetzt hat oder der Benutzer eines angefordert hat. Diese Funktion ist eine Abkürzung, mit der Sie dieselben Ergebnisse erzielen können wie dieprefers-color-scheme Medienabfrage, aber mit weniger Code.

Siehe auch

• Farbe auf HTML-Elemente anwenden mit CSS
• Farbe weise verwenden
• Verwendung relativer Farben
• Farbe und Luminanz verstehen
• WCAG 1.4.1: Farbkontrast
• CSS-Farbmodul