CSS Farben in der Praxis: von Hexadezimal bis oklch()
Von: Jonas, Charleen Wenn ihr Farben mittels Farbnamen festlegt, geht das schnell und bietet keine Flexibilität. Die Definition über moderne Modelle wie OKLCH bietet erheblich mehr Spielraum und Komfort in komplexen Projekten – setzt aber auch entsprechende Kenntnisse voraus.
CSS bietet eine Vielzahl an Möglichkeiten um Farben zu definieren. Von vordefinierten Farbnamen bis hin zur Verwendung modernster Farbmodelle wie OKLCH. Welche Möglichkeit ihr nutzen solltet, hängt vom Anwendungsfall und der Browser-Kompatibilität ab.
Ältere Methoden wie vordefinierte Farbnamen sind einfach zu verwenden, bieten aber wenig Spielraum für feinere Farbnuancen. Moderne, wahrnehmungsbasierte Modelle wie LAB, LCH und OKLCH ermöglichen eine genauere Farbdarstellung und natürlichere Übergänge, setzen aber ein gewisses Verständnis für die Farbtheorie voraus und sind für Anfänger eventuell schwieriger zu steuern.
Vordefinierte Farbnamen
Starten wir einfach. Es existieren 140 Farbnamen, die in CSS genutzt werden können. Sie entsprechen jeweils einer Farbe und sind für Beginner oder für die schnelle Verwendung optimal geeignet. Farbnamen werden von allen Browsern unterstützt. Allerdings sind keine Anpassungen der Transparenz oder Helligkeit möglich.
color: tomato; /* Orange
color: aqua; /* Türkies, synonym für Cyan */
color: lime; /* Neongrün */Hexadezimale Farbwerte
Eine der bekanntesten Methoden zur Farbdefinition ist die Verwendung von hexadezimalen Farbwerten – und das obwohl Hex-Farben wenig intuitiv und schwieriger zu merken sind.
Hex-Farben kombinieren die drei Farbkanäle Rot (R), Grün (G) und Blau (B). Ein Hex-Wert besteht aus sechs Zeichen, in jeweils 3 Paare unterteilt. Jedes Paar reicht von 00 (kein Anteil) bis FF (maximaler Anteil), bei 256 möglichen Abstufungen. Das erste Paar bestimmt den Rotanteil, das zweite den Grünanteil und das dritte den Blauanteil der Farbe.
color: #FF0000; /* Rot (R = FF, G = 00, B = 00) */
color: #00FF00; /* Grün (R = 00, G = FF, B = 00) */
color: #0000FF; /* Blau (R = 00, G = 00, B = FF) */
color: #FFFF00; /* Gelb (R = FF, G = FF, B = 00) */Kurzschreibweise für Hex-Farben
Falls alle drei Farbwerte doppelt vorkommen, kann auch die Kurzform genutzt werden, in der zwei Zeichen zu einem zusammengefasst werden und somit nur noch drei Zeichen hinter der Raute vorkommen.
color: #FFCC00; /* Lange Schreibweise */
color: #FC0; /* Kurzform möglich (FF → F, CC → C, 00 → 0) */Hexadezimale Farben mit Transparenz
Zusätzlich zu den drei Farbkanälen kann ein vierter, der »Alphakanal«, für Transparenz hinzugefügt werden. Er wird direkt an das letzte Zeichenpaar angehangen, dabei steht 00 für vollständige Transparenz und FF für eine volle Deckkraft.
color: #FF000080; /* 50% transparentes Rot */
color: #0000FF40; /* 25% transparentes Blau */
color: #00FF00FF; /* voll gedecktes Grün */rgb() und rgba()
Eine weitere, sehr bekannte und häufig genutzte Methode zur Farbdefinition in CSS ist es, Farbwerte in rgb() oder rgba() anzugeben. Sie bietet eine präzise Kontrolle über Farben und ermöglicht Transparenzen (das a steht für den Alphakanal und somit Transparenz).
Farbdefinition mit rgb()
Die rgb()-Funktion ermöglicht die Definition einer Farbe basierend auf den drei Primärfarben des RGB-Farbmodells: Rot, Grün und Blau.
/* Die Syntax */
color: rgb(<red>, <green>, <blue>);Jeder der drei Farbkanäle kann, wie bereits bei der Hex-Farbdefinition kennengelernt, einen Farbwert zwischen 0 und 255, also 256 Farbabstufungen, widergeben. 255 steht dabei für maximale Farbleuchtkraft, 0 für kein Vorhandensein der Farbe.
color: rgb(255, 0, 0); /* Reines Rot */
color: rgb(0, 255, 0); /* Reines Grün */
color: rgb(0, 0, 255); /* Reines Blau */
color: rgb(0, 0, 0); /* Schwarz (kein Licht) */
color: rgb(255, 255, 255); /* Weiß (maximale Helligkeit) */Auch möglich ist es, statt der Werte 0-255, diese in Prozentzahlen anzugeben. Dabei entsprechen 100% dem Wert 255 und 0% der 0.
color: rgb(100%, 0%, 0%); /* Reines Rot */
color: rgb(0%, 100%, 0%); /* Reines Grün */
color: rgb(0%, 0%, 100%); /* Reines Blau */Transparenz mit rgba()
Die rgba()-Funktion ist eine Erweiterung von rgb(), die zusätzlich eine Transparenzstufe (alpha) beinhaltet.
/* Die Syntax */
color: rgba(<red>, <green>, <blue>, <alpha>);Die Transparenz, also der Wert des Alphakanals, wird dabei zwischen 0 (vollständig transparent) und 1 (komplett deckend) angegeben, die stellvertretend für einen Prozentwert zwischen 0% und 100% stehen.
color: rgba(255, 0, 0, 0.5); /* Halbtransparentes Rot (50%) */
color: rgba(0, 0, 255, 0.3); /* Stark transparentes Blau (30%) */
color: rgba(0, 0, 0, 0.1); /* Fast unsichtbares Schwarz (10%) */Der Vorteil gegenüber der Nutzung der Hex-Definition ist die leichte Anpassbarkeit, ohne, dass Farben umgerechnet werden müssen. Außerdem sind Farben aus den CMYK- und HSL- Farbsystemen leicht in rgb() umzuwandeln, was eine vielseitige Verwendung möglich macht.
hsl() und hsla()
Die Notation mittels hsl() und hsla() bieten eine intuitive Möglichkeit, Farben in CSS zu definieren. Sie sind oft intuitiver als das klassische RGB-Modell, da sie Farben eher so beschreiben, wie das menschliche Auge sie wahrnimmt. Ihre Farbwerte werden durch Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness), sowie gegebenenfalls Transparenz (alpha), definiert.
hsl ()
hsl() steht für Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit). Damit können Farben, sowie gegebenenfalls Transparenz (alpha), präzise definiert werden.
/* Die Syntax */
color: hsl(<H>, <S>, <L>);H (Hue/Farbton) ist dabei ein Winkel in Grad (von 0–360°, aber ohne das Gradzeichen ° geschrieben), der die Grundfarbe bestimmt. S (Saturation/Sättigung) ist ein Prozentwert (von 0% – 100%), der angibt, wie intensiv oder entsättigt die Farbe ist. L (Lightness/Helligkeit) ist ein Prozentwert (0% – 100%), der die Helligkeit steuert.
Beispiele für Farbton-Werte (Hue):
| Farbe | Winkel |
|---|---|
| Rot | 0° |
| Gelb | 60° |
| Grün | 120° |
| Cyan | 180° |
| Blau | 240° |
| Magenta | 300° |
color: hsl(0, 100%, 50%); /* Reines Rot */
color: hsl(120, 100%, 50%); /* Reines Grün */
color: hsl(240, 100%, 50%); /* Reines Blau */Wichtig zu beachten ist, dass eine Farbe bei einem Wert von 100% Helligkeit immer komplett weiß ist, unabhängig vom definierten Farbton oder der Sättigung. Dementsprechend bedeutet ein Lightness-Wert von 0% immer schwarz.
Auch spielt für die Definition eines mittleren Grautons, wie in rgb(128, 128, 128), der Farbton keine Rolle, da keine Sättigung vorhanden ist.
color: hsl(0, 0%, 50%); /* Mittlerer Grauton */hsla ()
Ist eine Verwendung des HSL-Systems mit Transparenzen gewünscht, lautet die definierende Funktion hsla(). Die vierte Komponente a (Alphakanal) gibt dabei die Transparenz an.
/* Die Syntax */
color: hsla(<H>, <S>, <L>, <A>);Die Transparenz wird mit einem Wert zwischen 0 (vollständig transparent) und 1 (komplett deckend) angegeben.
color: hsla(0, 100%, 50%, 0.5); /* Halbdurchsichtiges Rot */
color: hsla(120, 100%, 50%, 0.3); /* Stark transparentes Grün */
color: hsla(240, 100%, 50%, 0.1); /* Kaum sichtbares Blau */Die Verwendung von hsl() und hsla() eignet sich gut für die Erstellung von dynamischen Farbvariationen, da Helligkeit oder Sättigung von Farben leicht anpassbar sind. Sie sind zudem leicht verständlich, nur die Gradzahlen zur Definition der Hue-Werte müssen erlernt oder nachgeschlagen werden.
lab()
lab() ist ein geräteunabhängiger Farbraum, der entwickelt wurde, um Farben so darzustellen, wie das menschliche Auge sie wahrnimmt. LAB besteht aus drei Komponenten: L für den Helligkeitswert (Lightness), A für die Farbkomponente auf der Grün-Magenta-Achse und B für die Farbkomponente auf der Blau-Gelb-Achse.
/* Die Syntax */
color: lab(<L> <a> <b>);
color: lab(<L> <a> <b> / <alpha>); /* Die Syntax mit optionaler Transparenz */ Die Lightness-Wert (L) ist unabhängig von der Farbe (A/B). Ein bestimmter L-Wert stellt immer die gleiche Helligkeit dar, egal welche Farbtöne A und B annehmen.
Die Farbtöne variieren durch unterschiedliche Werte für A (Grün-Magenta-Achse) und B (Blau-Gelb-Achse). Der Wertebereich erstreckt sich von negativen (-128) bis positiven (+127) Werten.
color: lab(50 80 60); /* Kräftiges Rot */
color: lab(70 40 80); /* Orange */
color: lab(35 30 50); /* Braun */lch()
lch() ist eine moderne CSS-Farbnotation, die Farben im LCH-Farbmodell definiert. Dieses basiert wiederum auf dem LAB-Farbmodell und stellt Farben ebenfalls so dar, wie sie vom menschlichen Auge wahrgenommen werden. L (für Lightness) definiert dabei die Helligkeit der Farbe, C (für Chroma) die Farbintensität und H (für Hue) den Farbton in Grad.
/* Die Syntax */
color: lch(<L> <C> <H>);
color: lch(<L> <C> <H> / <alpha>); /* Die Syntax mit optionaler Transparenz */ Der Lightness-Wert (L) gibt an, wie hell oder dunkel eine Farbe erscheint. Der Wertebereich liegt zwischen 0% für Schwarz und 100% für Weiß. Wichtig dabei ist die Angabe in Prozent. Die Helligkeit ist unabhängig von der Farbintensität (Chroma) und dem Farbton (Hue), kann also über verschiedene Farbtöne hinweg konstant dargestellt werden.
Die Chroma-Komponente (C) gibt die Farbintensität, daher die Sättigung, an. Der Wertebereich erstreckt sich von 0 bis 130, abhängig vom Farbton und der maximal möglichen Sättigung innerhalb des genutzten Farbraums (einige sehr gesättigte Farben mit hohen Chroma-Werten über 100 können nur in erweiterten Farbräumen wie Display P3 dargestellt werden, während sie im sRGB-Farbraum nicht erreichbar sind und auf den nächstkleineren darstellbaren Wert reduziert werden).
Je größer der Wert, desto weiter entfernt ist der Farbton von einem neutralen Grau (Wert 0) und desto kräftiger erscheint er für das menschliche Auge. Niedrige C-Werte hingegen ergeben pastellige und wenig gesättigte Farben.
Über die Hue-Komponente (H) wird ein Farbton anhand eines Winkels, angegeben in Grad, definiert. Die Werte reichen von 0° bis 360°. Dabei werden die Werte als reine Dezimalzahlen geschrieben, ohne das Gradzeichen °
| Farbe | Winkel in Grad |
|---|---|
| Rot | 0° |
| Gelb | 60° |
| Grün | 120° |
| Cyan | 180° |
| Blau | 240° |
| Magenta | 300° |
color: lch(60% 70 0); /* Rot */
color: lch(60% 70 120); /* Grün */
color: lch(60% 70 240); /* Blau */Das LCH-Farbmodell bietet eine intuitive Steuerung von Farben, da Helligkeit, Sättigung und Farbton getrennt anpassbar sind. Besonders für die Entwicklung von Farbpaletten ist LCH eine leistungsstarke Alternative zu Farbsystemen wie RGB oder HSL.
oklch()
OKLCH ist eine moderne Farbnotierung für das Web, die durch LCH-Werte (Lightness, Chroma, Hue) umgesetzt wird. Das »OK« steht dabei für das zugrundeliegende Farbmodell, »OKLab«. OKLab ist eine Weiterentwicklung des LAB-Farbsystems und wurde speziell für Displays optimiert. Es sorgt unter anderem für gleichmäßigere Farbverläufe, konstantere Helligkeitswidergaben und verbesserte Kontrastwidergabe. oklch() wird bereits von allen moderneren Browsern unterstützt und wir gehen davon aus, dass es künftig zum Standard im Webdesign wird.
/* Die Syntax */
color: oklch(<L> <C> <H>);
color: oklch(L C H / alpha); /* Die Syntax mit optionaler Transparenz */ Der Lightness-Wert muss bei der Verwendung von oklch() als Dezimalzahl mit einem Wert zwischen 0 und 1 definiert werden. Auch in diesem Farbsystem ist die Helligkeit einer Farbe unabhängig von den beiden anderen zu definierenden Werten. Das nachfolgende Beispiel zeigt auf, wie unterschiedliche Farben in visuell konstanter Helligkeit dargestellt werden können.
/* Alle Farben haben die gleiche wahrgenommene Helligkeit (L = 0.6) */
color: oklch(0.6 0.3 90); /* Ein gesättigtes Gelb */
color: oklch(0.6 0.3 250); /* Ein kräftiges Blau */
color: oklch(0.6 0 0); /* Ein neutraler Grauton */Die Chroma-Komponente in oklch() verhält sich ähnlich wie in lch(). Die maximalen Sättigungswerte sind von dem jeweiligen Farbton abhängig, sehr hohe Werte sind meist nur in Wide-Gamut-Farbräumen, wie Display P3, vollständig darstellbar. Im Gegensatz zur Definition des C-Wertes in lch(), wird bei der Verwendung von oklch() ein Wert zwischen 0 und rund 0.4 angegeben. 0 steht dabei für keine Sättigung, dementsprechend einen Grauton, und 0.4 (und gegebenenfalls höhere Werte) für eine sehr hohe bis maximale Leuchtkraft.
/* Unterschiedliche Chroma-Werte bei konstanter Helligkeit (L = 0.6) und gleichem Farbton (H = 50°) */
color: oklch(0.6 0.05 50); /* Sehr blasses Gelb */
color: oklch(0.6 0.2 50); /* Mittleres, gesättigtes Gelb */
color: oklch(0.6 0.4 50); /* Sehr intensives Gelb */Der Farbton im OKLCH-Farbsystem wird, wie im LCH- und HSL-System, als Winkel in Grad auf einer kreisförmigen Skala, mit einem Wert zwischen 0° und 360°, definiert. Dabei muss der Wert als reine Dezimalzahl, ohne das Gradzeichen ° angegeben werden.
| Farbe | Winkel in Grad |
|---|---|
| Rot | 0° |
| Gelb | 60° |
| Grün | 120° |
| Cyan | 180° |
| Blau | 240° |
| Magenta | 300° |
/* Unterschiedliche Hue-Werte bei konstanter Helligkeit (L = 0.7) und Sättigung (C = 0.2) */
color: oklch(0.7 0.2 0); /* Rot */
color: oklch(0.7 0.2 120); /* Grün */
color: oklch(0.7 0.2 240); /* Blau */Geschrieben von:
Charleen Warkentin
