Farbangaben in CSS - Farben definieren

0 | 0 Kommentare | 53549 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Farbangaben in CSS - Farben definieren" mit Ihrem Wissen!

Anzeige Hier werben

In CSS gibt es diverse Möglichkeiten Farbwerte für Rahmen, die Schriftfarbe oder Hintergründe zu definieren. Diese sollen hier schrittweise vorgestellt werden.

CSS 1 & 2

Farben als Hexadezimalwert

Einführung in das Hexadezimalsystem

Diese Hexadezimalwerte beginnen immer mit einer Raute #. Danach folgen 3 Pärchen bestehend aus 2 hexadezimalen Zeichen. Die 3 Pärchen stehen für die Farbwerte in der Reihenfolge Rot-Grün-Blau, das erste also für Rot, das letzte für Blau. 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
Anwendungsbeispiel Farben als hexadezimaler Wert  
css
1
2
3
4
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.

Anwendungsbeispiel der rgb()-Notation  
css
1
2
3
4
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 (< CSS 3)

Neben der Angabe von Farbwerten, gibt es noch eine kleine Palette vordefinierter Farben. Hier eine Übersicht.

Bild zu Farbangaben in CSS - Farben definieren
CSS 1 & 2 kompatible Farben

Als Anwendungsbeispiel:

Farben über den Farbnamen  
css
1
2
3
4
a {
  color: white;
  background: black;
}

CSS 3

Firefox3.6Unbekannt4Unbekannt
IE6Nein7Nein8Nein9Unbekannt
Opera10Unterstützt11Unterstützt
Safari4Unterstützt5Unterstützt
rgba()

Definition über rgba()

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.

 
css
1
2
3
a {
  background: rgba(255, 0, 0, 0.5);
}
Firefox3.6Unbekannt4Unbekannt
IE6Nein7Nein8Nein9Unbekannt
Opera10Unterstützt11Unterstützt
Safari4Unterstützt5Unterstützt
hsl/hsla()

Definition über hsl() bzw hsla()

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.

 
css
1
2
3
a {
  background: hsla(0, 100%, 100%, 0.5);
}

Definition über Farbschlüsselwörter (CSS 3)

In CSS 3 wird die Palette der vordefinierten Farben auf 140 erweitert. Diese können wie die alten Farbnamen verwendet werden. Die Darstellung sollte in den meisten aktuellen Browsern schon jetzt keine Probleme bereiten.

Bild zu Farbangaben in CSS - Farben definieren
CSS 3 Farben

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite "Farbangaben in CSS - Farben definieren" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Farbangaben in CSS - Farben definieren" hier bearbeiten.


Kommentare: Farbangaben in CSS - Farben definieren