Mein erster Artikel über CSS-Farbcodes “Die verwirrend bunte Welt der CSS-Farbcodes” hat sich zu einem der am häufigsten aufgerufenen Seiten auf eMaster.de entwickelt.

Ich bedanke mich daher bei allen Lesern und möchte heute noch etwas näher auf die CSS-Farben eingehen…

Was bedeuten die #000000 Zeichen?

Jeweils zwei Stellen in diesem hexadezimalen Zahlencode beschreiben einen Wert der im Web gebräuchlichen RGB-Farbpalette.

Die ersten beiden Ziffern sind also der Wert für R (rot), die Ziffern 3 und 4 beschreiben den grünen Anteil (G) und die letzten beiden Ziffern den blauen (B).

Zwar lassen sich in CSS die RGB-Werte auch direkt eingeben, dieses hat sich aber nicht als Standard durchgesetzt.

Aus diesen 3 Grundfarben werden sämtliche andere Farbtöne “gemischt”. Wie stark der Anteil einer Farbe jeweils ist, lässt sich mit dem sechsstelligen Hexadezimalcode besonders kurz und einprägsam darstellen.

Übrigens: Haben Sie sich als Kind nicht auch ganz dicht vor den Röhrenfernseher gesetzt und dort lauter winzige rote, grüne und blaue Punkte erkennen können? Sehen Sie: RGB.
Wie komme ich an den Farbcode?

Die meist benutzen Farbcodes sollten Sie sich einfach merken: #000000 ist Schwarz, #FFFFFF Weiß, #CC0000 Rot und so weiter…

Eine Hilfestellung finden Sie in meinem Artikel “Die verwirrend bunte Welt der CSS-Farbcodes“.

Sofern Sie einen Grafik-Editor wie etwas “Photoshop” oder “The Gimp” benutzen, finden Sie in deren Farbwählern alle nötigen Angaben.

So sieht das in Photoshop aus (grüner Rahmen):

Es lassen sich natürlich nicht nur so genannte Web-sichere Farben darstellen! Sie können jeden erdenklichen Farbton in Photoshop als Hex-Code anzeigen lassen…

…oder Sie verwenden einen der unzähligen Online-Generatoren.

Sehen Sie sich mal das Color Wheel von Jemima Pereira auf ficml.org oder den Farbgenerator auf wellstyled.com an, der Ihnen sogar noch die passenden Pasteltöne anzeigt.
CSS-Farbcodes: Wie abkürzen?

Unter gewissen Umständen lassen sich CSS-Farbcodes abkürzen – sie werden dann dreistellig.

Und zwar immer dann, wenn sich die beiden Ziffern jeder (!) der drei Farbgruppen gleichen.

Beispiel: Dieser Farbcode #FFFFFF (weiß) lässt sich so abkürzen: #FFF

Das schon oben verwendete Rot #CC0000 sieht abgekürzt so aus: #C00

Und dieser blasse Flieder #993366 wird zu #936

Hingegen lässt sich ein komplexer Code wie #936CDC nicht abkürzen.

Auch werden Kombinationen nicht verstanden. So kann etwa #996CDC nicht zu #96CDC werden. Der Browser stellt solche falschen Codes als Schwarz dar.

Übrigens: Die Groß- und Kleinschreibung ist egal.
Ein paar typische Anwendungen für CSS-Farben!

Für alle möglichen Elemente lassen sich Hintergrundfarben festlegen:

{ background: #CCC; }

Für die Farben von Schrift reicht die Kurzform “color” statt “font-color”:

{ color: #000; }

Toll ist auch die Kombination eines Hintergrundbildes mit einer Farbe. Etwa wenn sich das Hintergrundbild nicht über den ganzen Monitor erstrecken soll. Diesen Effekt sieht man häufig auf Webseiten, die beispielsweise am oberen Bildschirmrand einen Farbverlauf haben (Hintergrundbild), dessen Endfarbe sich dann über den Rest der Seite erstreckt (Farbcode).

Ein Hintergrundbild holt man sich – so wie jede andere Grafik auch – per “url”:

{ background: #C00 url(images/verlauf.gif) repeat-x; }

Der Code “repeat-x” sorgt in diesem Fall dafür, dass das Hintergrundbild nur in horizontaler Linie wiederholt wird.

Sehr beliebt sind auch Umrahmungen oder einzelne Linien.

Hier wird eine H1-Überschrift mit einer 1 Pixel starken, schwarzen Punktlinie unterstrichen:

h1 { border-bottom: 1px dotted #000; }

Und hier erhält ein Bild eine 10 Pixel starke, grüne Rahmung:

img { border: 10px solid #009900; }

Richtig, hier hätte ich auch #090 abkürzen können, wollte ich aber nicht ;)

[ad#largereccontent]
Farbnamen als Klartext!

Das World Wide Web Consortium (W3C) hat 16 Farbtöne definiert, die auch als Klartext eingegeben werden können:

1. aqua
2. black
3. blue
4. fuchsia
5. gray
6. green
7. lime
8. maroon
9. navy
10. olive
11. purple
12. red
13. silver
14. teal
15. white
16. yellow

Ein entsprechender Code sähe dann so aus:

{ color: purple; }

Heutige Browser verstehen sogar noch weit mehr dieser Klartextbezeichnungen für CSS-Farben.

Wie sinnvoll und hilfreich das für Sie ist, bleibt Ihnen überlassen. Mir sind die Klartext-Farben einfach nicht flexibel genug…

…und außerdem, können Sie sich was unter “PowderBlue”, “PaleTurquoise”, “PapayaWhip” und “LightGoldenRodYellow” vorstellen?

Dann doch lieber #908f5f…

Wer sich mit CSS-Code, Webdesign und Farbpaletten beschäftigt, leidet bei all den #sowiso und #hihaho mitunter an Farb-Verwirrung.

Ich gebe Ihnen 3 Tipps, wie Sie einfacher mit CSS-Farbcodes jonglieren können und die Übersicht behalten…

Wie merkt man sich zig Millionen Farben?

Am besten gar nicht. Das ist nämlich nicht nötig. Auch ist es nicht erforderlich, dass Sie das Hexadezimalsystem erlernen und sich Ihre Lieblingsfarben in Zukunft ausrechnen.

Merken Sie sich nur einfach folgendes:

Tipp 1: Fehler schnell erkennen!

Farbwerte werden in CSS mit einer 6-stelligen* Hexadezimalzahl definiert. Sie dürfen also nur die Ziffern 0-9 und die Buchstaben A-F benutzen.

Ein Farbcode wie in der Einleitung (#sowiso) ist daher gar nicht möglich. Oft sind einfache Tippfehler die Ursache für Fehler, die sich aber schnell aufspüren lassen.

Ebenfalls eine häufige Fehlerquelle ist das Vergessen der Raute #. Zwischen Raute und eigentlichem Farbcode darf kein Leerzeichen stehen.

Statt der Hex-Werte kann man auch RGB-Werte benutzen, diese Methode wird aber weniger häufig angewandt.

Aber es sind immer noch so viele Farben!

Besonders Webdesign-Anfänger baden gerne ausgiebig in kunterbunten Layouts. Selbst schuld.

Tipp 2: Nur wenige Farben verwenden!

Es ist ein ungeschriebenes Gesetz, dass man neben Schwarz und Weiß nur 3 oder maximal 4 weitere Farben auf einer Webseite einsetzen sollte.

Genaugenommen zählt man Schwarz und Weiß auch schon dazu, so dass der Spruch “Weniger ist mehr” hier wirklich Geltung hat.

Das sieht nicht nur besser aus, sondern lässt sich auch einfacher merken.

Und durch Werbebanner, Fotos und anderer Gimmicks kommt schnell mehr als genug Farbe in jedes Web-Layout.

Es gibt nur wenige Grundfarben!

Wenn Sie nach Ihrer Lieblingsfarbe gefragt werden, sagen Sie wahrscheinlich nur “rot”, “blau” oder “gelb”, und nennen nicht irgendeine Modefarbe, die sich kaum zuordnen lässt.

Tipp 3: Merken Sie sich die wichtigsten Farbwerte!

Es ist hilfreich, sich die Codes der allerwichtigsten Farbwerte einzuprägen. Es reichen schon wenige Grundtöne, um für bessere Orientierung und schnelle Tests zu sorgen.

Ich habe eine Grafik mit 9 Farbtönen angefertigt, die mir als Gedächtnisstütze dient.

Sie können die Grafik gerne kopieren und nach Ihren Wünschen verändern. Oder Sie fertigen sich gleich eine eigene Vorlage an.

Die 3 Tipps zum einfachen Umgang mit CSS-Farbcodes!

Hier also noch mal eine Kurzübersicht meiner CSS-Farbtipps:

1. Bei Hex-Code dran denken: 6-stellig*, nur 0-9 und A-F benutzen und Raute nicht vergessen.
2. Nur wenig Farbtöne in einem Layout verwenden: Ist leichter zu merken und sieht besser aus.
3. Sich die wichtigsten Codes einprägen. Schon wenige Werte sorgen für besseren Durchblick.

*Unter bestimmten Umständen kann man 6-stelligen CSS-Farbcode auch abkürzen. Aber das erkläre ich Ihnen in einem anderen Post.