CSS Farben: Farbwerte als hex, rgb und Farbnamen – Schreibweisen und Beispiele

Die Farbe ist der Ort, wo unser Gehirn und das Weltall sich begegnen. Darum erscheint sie den wahren Malern durchaus dramatisch.

Paul Cézanne, (1839 - 1906), französischer Maler

CSS bietet eine relativ große Flexibilität bei der Deklarierung von Farben. Wir wollen aber hier zunächst mit zwei Sätzen auf die Grundlagen der Farbenlehre eingehen.

Farben für Websites werden mit Hilfe der sogenannten additiven Farbmischung definiert. Darin sind alle Farben aus Anteilen der drei Komponenten Rot, Grün und Blau zusammen gesetzt, die deshalb auch RGB-Farbmischung genannt wird (        ). In der CSS-Farbdeklaration wird die Größe jedes dieser Anteile als Zahlenwert auf einer 256-stufigen Skala festgelegt. Damit sind insgesamt 2563 = 16 777 216 Farben möglich.

Farbwerte sind im Bereich von 0 bis 255 definiert. Für alle Angaben, die außerhalb dieses definierten Bereiches liegen, wird der nächste gültige Wert eingesetzt: 0 für negative Werte und der Maximalwert 255 bzw. ff bzw. 100% für Deklarationen, die oberhalb des definierten Bereichs liegen. Man sollte deshalb entsprechende Sicherungen einbauen, wenn man Farbwerte rechnerisch per Script bestimmt.

In der Druckindustrie wird normalerweise mit der negativen Farbmischung gearbeitet, bei der die Farben aus den Anteilen Gelb, Magenta, Cyan und Schwarz (          ) entstehen. Dennoch müssen wir für CSS-Deklarationen aller Medien die additive Farbmischung verwenden, auch für print. Der Grund dafür ist historischer Art: Websites wurden ursprünglich nur auf Bildschirmen ausgegeben, bis zur Definition von Druck-Stylesheets oder gar zur Webzugänglichkeit war damals noch ein weiter Weg.

Alternativen

Mit CSS haben wir fünf verschiedene Möglichkeiten, Farben zu deklarieren:

Hexadezimalangabe:

Festlegung der einzelnen Farbanteile als Hexadezimalwerte im Bereich von 00 bis ff. Dies ist die seit Anbeginn übliche Art der Farbendarstellung in HTML, sie wird durch ein vorangestelltes Gatterzeichen markiert.

Der Wert ff ist Teil des Hexadezimalsystems. Im Unterschied zum Dezimalsystem, das auf dem Wert 10 basiert, ist der Ausgangswert für das Hexadezimalsystem der Wert 16. Es enthält zusätzlich die Zeichen 'a' bis 'f'.

Syntax: { eigenschaft: #rrggbb; }

Beispiel:

{ color : #fa124c; }

Hexadezimal-Kurzangabe:

Wenn die zwei für eine Farbkomponente stehenden Zeichen gleich sind, können sie für die Notierung zu einem Zeichen zusammengezogen werden, z. B.: #456 entspricht #445566. Der Browser rechnet diese Werte dann wieder in die sechsstelligen Werte um. Mehr über diese Kombinationen am Ende dieser Seite, unter dem Stichwort 'websichere Farben'.

Syntax: { eigenschaft: #rgb; }

Beispiel:

{ background : #fd3; }

Prozentangabe:

Hier sind die einzelnen Farbanteile als Prozentwerte im Bereich von 0.0% bis 100.0% definiert. Das %-Zeichen muss hinter jedem Wert erscheinen, Nachkommastellen sind erlaubt. Die Prozentwerte werden vom Browser zur Darstellung in hexadezimale Angaben umgerechnet. Der Sprung von einem Farbwert zum nächsten entspricht etwa 0.4%, kleinere Unterschiede werden gerundet.

Syntax: { eigenschaft: rgb(rrr.r%,ggg.g%,bbb.b%); }
oder { eigenschaft: rgb(rrr%,ggg%,bbb%); }

Beispiel:

{ color : rgb(33.3%,66.7%,100.0%); }
{ background: rgb(80%,40%,20%); }

Dezimalangabe:

Direkte Eingabe der gewünschten RGB-Werte in Dezimalform. Ebenso wie bei der sechsstelligen hexadezimalen Angabe ist hier keinerlei Umrechnung erforderlich. CSS 2.1 macht keine Angaben darüber, ob Prozentwerte und Dezimalwerte in einer Deklaration gemischt werden dürfen. Deshalb sollte man nicht davon ausgehen, dass alle Browser solche Deklarationen darstellen können.

Syntax: { eigenschaft: rgb(rrr,ggg,bbb); }

Beispiel:

{ background-color : rgb(128,2,67); }

Farbnamen oder Schlüsselworte:

Farbnamen sind fest mit einer bestimmten RGB-Kombination verbundene Bezeichnungen, die die Farbwirkung der Kombination praktisch 'bildlich' beschreiben. Sie werden ohne Anführungszeichen und ohne ein vorangestelltes Erkennungszeichen verwendet.

CSS 2 kennt nur die Farbnamen der 16 Grundfarben, die in CSS 2.1 um den Wert orange erweitert sind. Das CSS-3-Modul 'Color' wird auch die X11-Farbnamen als Teil des Standards enthalten. Dort heißen sie allerdings SVG-Farben, da die verwendeten Schlüsselworte an die Werte der Norm SVG 1.0 angepasst wurden.

Syntax: { eigenschaft: farbname; }

Beispiel:

{ color : navy; }

Die folgenden Tabellen sind als Browsertest ausgelegt. Sie enthalten alle Farbnamen, die in CSS 2.1 und SVG 1.0 definiert sind. Die Hintergrundfarben der linken Spalte sind durch den angegebenen Farbnamen deklariert, der Hintergrund der zweiten Spalte wurde durch die dezimale Farbangabe festgelegt. Wenn Ihr Browser alle Farbnamen korrekt unterstützt, ist die Farbdarstellung in beiden Spalten gleich.

Anwenderdefinierte Farbnamen

Neben den oben genannten Namen für Farben gibt es Bezeichnungen, die sich auf die Anwenderoberfläche beziehen. Diese sind nicht an bestimmte RGB-Werte gekoppelt, sondern übernehmen die Farbwerte, die der Nutzer für bestimmte Teile seiner Oberfläche gesetzt hat. Damit lässt sich die Farbgebung einer Website individuell an die vom Anwender definierten Gegebenheiten anpassen.

Die möglichen Werte sind selbsterklärend, allerdings können nicht alle Farbwerte von allen Browsern wiedergegeben werden.

Die folgende Tabelle enthält alle durch den Anwender definierbaren Farbnamen, die in CSS 2 bzw. CSS 2.1 definiert sind. Die Hintergrundfarben der linken Spalte sind durch den in der rechten Spalte angegebenen Farbnamen deklariert. Wenn ein Streifenmuster erscheint, wie in der ersten Reihe als Beispiel gezeigt, dann unterstützt Ihr Browser den entsprechenden Wert nicht.

Achtung: die anwenderdefinierten Farbnamen werden von CSS 3 an als 'deprecated', d. h. unerwünscht, eingestuft und sind jetzt bereits im W3C CSS Validation Service so gekennzeichnet. Das W3C benutzt diese Definition als Vorstufe zur endgültigen Entfernung aus dem Standard.

'Websichere' Farben

Die sogenannten websicheren Farben sind heute im Grunde genommen eine Sache der Vergangenheit. Hier sollen sie nur noch der Vollständigkeit halber mit erwähnt werden. Entwickelt wurde diese 'browser-safe'-Palette in den frühen Tagen des Web. Damals lag die Farbauflösung der Browser bei 256 Farben, die dazu noch zwischen Windows-PC und Mac leicht differierte. Die websichere Palette sollte die Antwort auf dieses Problem sein.

In ihr können die RGB-Komponenten nur jeweils 6 Werte annehmen: 00, 33, 66, 99, cc und ff. Damit ergaben sich 216 mögliche Farben. Eine Übersicht gibt die 216 Web Safe Color Chart.

Eine erweiterte Palette wird unter dem Titel More Crayons vorgestellt. Hier werden die RGB-Komponenten auf die Werte der Hexadezimal-Kurzangabe beschränkt, so dass sich 4096 verschiedene Farben ergeben. Aber auch das ist heute bereits überholt.

CSS Farben hexadezimal – hex-Werte #rrggbb und die Kurzform #rgb

Der hexadezimale Farbwert nennt Rot, Grün und Blau als je zwei Hexadezimalziffern von 00 bis ff: #7A2FB0 ist Rot 7A, Grün 2F, Blau B0. Groß- und Kleinschreibung spielen keine Rolle. Die Kurzform mit drei Ziffern verdoppelt jede Ziffer: #F3E ist #FF33EE. Sie ist nur für Farben möglich, deren Kanäle aus Zwillingsziffern bestehen; #7A2FB0 hat keine Kurzform. Hex-Werte sind kompakt und in jedem Werkzeug lesbar, deshalb sind hex-Werte die verbreitetste Schreibweise für CSS Farben.

rgb() – Farbwerte als Zahlen und Prozent

rgb() nimmt drei Werte für Rot, Grün und Blau, entweder als ganze Zahlen von 0 bis 255 oder als Prozent von 0% bis 100%. Zahlen und Prozent dürfen nicht gemischt werden. Werte außerhalb des Bereichs werden auf den Rand beschnitten: rgb(300, 0, 0) ist rgb(255, 0, 0). Die Schreibweise passt, wenn Farben berechnet oder aus einem Programm übernommen werden, das Kanäle getrennt ausgibt.

p { color: rgb(122, 47, 176); }      /* dieselbe Farbe wie #7A2FB0 */
p { color: rgb(48%, 18%, 69%); }     /* gerundet, in Prozent */

Farbnamen – die 17 Schlüsselwörter von CSS 2.1

CSS 2.1 definiert 17 Farbnamen: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white und yellow. orange kam mit CSS 2.1 hinzu. Die 147 Namen aus SVG – cornflowerblue, rebeccapurple und andere – sind in CSS Color Level 3 standardisiert und werden von allen aktuellen Browsern verstanden. Farbnamen sind für Beispiele und Prototypen bequem; in einem Stylesheet mit abgestimmter Palette sind hex- oder rgb()-Werte genauer, weil sie jeden Ton treffen.

Systemfarben und transparent

CSS 2.1 kennt außerdem Systemfarben wie ButtonFace oder WindowText, die die Farben der Benutzeroberfläche übernehmen. Sie sind in CSS Color Level 3 als veraltet markiert und in Level 4 durch einen neuen Satz ersetzt. transparent ist in CSS 2.1 nur für background-color und border-color zulässig, seit Level 3 für jede Farbangabe.

CSS Farben nach CSS 2.1 – rgba, hsl, moderne Farbräume

CSS Color Level 3 ergänzt rgba() und hsla() mit einem Alphakanal für Deckkraft, hsl() für Farbton, Sättigung und Helligkeit sowie die achtstellige hex-Schreibweise #rrggbbaa. Level 4 erlaubt Leerzeichen statt Kommata, einen Schrägstrich vor dem Alphawert und neue Farbräume wie lab(), lch(), oklch() und color(), die mehr Farben abdecken als sRGB. Für CSS Farben in den hier dokumentierten Eigenschaften gilt: Jede Farbangabe, die CSS 2.1 erlaubt, ist auch in den neueren Modulen gültig.

Häufige Fragen

Wie gibt man Farben in CSS an?

Auf drei Arten: als Farbname (red), hexadezimal (#ff0000 oder kurz #f00) oder als Funktion rgb(255, 0, 0) beziehungsweise rgb(100%, 0%, 0%). Neuere Module ergänzen rgba(), hsl(), hsla() und weitere Farbräume.

Was bedeutet #rrggbb?

Je zwei Hexadezimalziffern für Rot, Grün und Blau, jeweils von 00 (0) bis ff (255). #7A2FB0 steht für Rot 122, Grün 47, Blau 176.

Wann darf man die Kurzform #rgb benutzen?

Wenn jeder der drei Kanäle aus zwei gleichen Ziffern besteht. #f3e steht für #ff33ee. Für #7A2FB0 gibt es keine Kurzform.

Welche Farbnamen kennt CSS 2.1?

17: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. Die 147 SVG-Farbnamen kamen mit CSS Color Level 3 dazu und funktionieren in allen aktuellen Browsern.

Kann man in rgb() Zahlen und Prozent mischen?

Nein. Entweder drei ganze Zahlen von 0 bis 255 oder drei Prozentwerte von 0% bis 100%. Werte außerhalb des Bereichs werden auf den Rand beschnitten.

Wie macht man eine Farbe halbtransparent?

Mit einem Alphakanal aus CSS Color Level 3: rgba(122, 47, 176, 0.5), hsla(…) oder achtstellig #7A2FB080. CSS 2.1 selbst kennt nur transparent für Hintergrund- und Rahmenfarbe.

Sind Farbnamen oder hex-Werte besser?

Farbnamen eignen sich für Beispiele und schnelle Prototypen. Für eine abgestimmte Palette sind hex- oder rgb()-Werte genauer, weil sie jeden Ton exakt treffen und sich in Werkzeugen austauschen lassen.

Was sind Systemfarben in CSS?

Schlüsselwörter wie ButtonFace oder WindowText, die Farben der Benutzeroberfläche des Betriebssystems übernehmen. CSS 2.1 definiert sie, Color Level 3 markiert sie als veraltet, Level 4 ersetzt sie durch einen neuen Satz.