Farbangaben in CSS – Farben definieren

In CSS gibt es diverse Möglichkeiten Farbwerte für Rahmen, die Schriftfarbe oder Hintergründe zu definieren. Diese stellen wir hier schrittweise vor:

RGB in Hexadezimalzahlen

In CSS 1 und 2 gibt es identische Möglichkeiten, bestimmten Eigenschaften Farbwerte zuzuweisen. Als häufigste Form findet man Farben als Hexadezimalwert deklariert. Um diese Notation zu verstehen, braucht es zunächst eine kurze Einführung in das Hexadezimalsystem:

Das hexadezimale Zahlensystem kennt 16 Zahlen je Stelle. Die ersten 10 sind unsere ganz normalen Zahlen aus dem Zehnersystem und danach geht es mit Buchstaben weiter. Diese reichen von 0 bis F also 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E und F. Damit hat man pro Ziffer 16-Möglichkeiten. Kombiniert man zwei dieser Hexidezimalen-Zahlen zu einem Paar, kann man 16², also 256 Werte kodieren.

Hexadezimalwerte in CSS beginnen immer mit einer Raute #. Darauf folgen 3 Paare, bestehend aus je 2 hexadezimalen Zeichen. In der RGB-Notation von CSS stehen 3 dieser Pärchen für die Farbwerte in der Reihenfolge Rot-Grün-Blau, das erste also für den Rotanteil, das mittlere für den Grünanteil das letzte für den Blauanteil.

Wie der Name schon sagt, ist das hexadezimale System ein Zahlensystem, welches auf der 16 basiert. Zur Darstellung werden die arabischen Zahlen 0-9 und die lateinischen Buchstaben A-F benutzt. Die Zahlen haben ihre klassischen Werte, A-F ergänzen diese nach oben. So hat das A den Wert von 10 und das F den von 15, sie Zahlen dazwischen entsprechend. Es stehen also pro Zeichen 16 Werte (inklusive der 0) zur Verfügung. Es sind für jeden einzelnen Farbwert 2 Stellen vorhanden, der Sechzehnerübergang gestaltet sich wie beim normalen Dezimalsystem: Ist an einer Stelle das Maximum (hier F) erreicht, wird die Stelle vor der betrachteten um 1 erhöht. Wird zu 0F eins hinzugezählt, ergibt sich folglich der Wert 10, im hexadezimalen System 16. Das Maximum ist mit FF (also 255) erreicht, mit der 00 ergeben sich also 256 Werte pro Farbe, was insgesamt 2563 Farben ermöglicht.

Bei der Farbangabe als hexadezimaler Wert gilt: Je größer der Wert, desto heller wird die Farbe. Schwarz hat somit den Wert #000000, weiß #FFFFFF.

Kurzschreibweise

In CSS gibt es eine Möglichkeit die Schreibweise von hexadezimalen Werten zu verkürzen, was jedoch nicht für alle Werte möglich ist! Besteht ein Wert aus drei gleichen Zahlenpaaren, beispielsweise #CCBB00, so kann er zusammengefasst werden, in dem die Zahlen nur einfach notiert werden. In diesem Beispiel wäre dies #CB0.

Anwendungsbeispiel

a {
  color: #FFFFFF;
  background: #000;
}

Definition über rgb()

Wem diese hexadezimalen Werte zu kryptisch erscheinen, kann einen Umweg über die Funktion rgb() gehen. Bei dieser können die dezimalen Werte von 0 bis 255, durch ein Komma getrennt, angegeben werden. Die Reihenfolge ist identisch mit der der hexadezimalen Notierung und auch hier gilt: Je größer der Wert, desto heller die Farbe, 255 ist also das Maximum. Alternativ sind auch prozentuale Angaben möglich, was jedoch sehr ungebräuchlich ist.

a {
  color: rgb(100%, 100%, 100%);
  background: rgb(0, 0, 0);
}

Diese Methode ist jedoch nicht sehr weit verbreitet, da sie an sich nur unnötigen Speicher belegt.

Definition über Farbschlüsselwörter

Neben der Angabe von Farbwerten, gibt es noch eine Palette vordefinierter Farben.

Grundfarben (CSS 1 + 2)

Als Anwendungsbeispiel:

a {
  color: white;
  background: black;
}

Farbschlüsselwörter ab CSS 3

In CSS 3 wird die Palette der vordefinierten Farben auf 140 erweitert. Diese können wie die alten Farbnamen verwendet werden. Alle modernen Browser unterstützen mittlerweile die folgenden Farbnamen:

Farben mit Alphakanal ab CSS 3

Da in CSS 3 auch eine Eigenschaft zur Deckkraft von Elementen existiert, wurde das RGB-Modell um einen Parameter, die Deckkraft, erweitert. So können 2 Eigenschaften in einer zusammengefasst werden.

a {
  background: rgba(255, 0, 0, 0.5);
  color:#33006655;
}

Des weiteren kommt in CSS 3 ein Format zur Verarbeitung von Daten im HSL-Format. Dies stellt eine Alternative zum RGB-System da und kann ebenfalls mit einem Parameter für den Alpha-Wert genutzt werden:

a {
  background: hsla(0, 100%, 100%, 0.5);
}