Farben in CSS definieren: Farb-Codes und Farbnamen verwenden
Farben sind ein zentrales Element im Web-Design und spielen eine entscheidende Rolle für die visuelle Gestaltung und die Benutzerfreundlichkeit einer Webseite. Sie vermitteln Emotionen, schaffen visuelle Hierarchien und helfen, die Markenidentität zu transportieren.
Bei der Auswahl der Farben in CSS ist es wichtig, die Barrierefreiheit (Englisch: Accessibility) zu berücksichtigen. Verschiedene Benutzer haben individuell unterschiedliche Sehfähigkeiten und einige Menschen leiden an einer Sehschwäche oder sind farbblind. Deshalb sollte man darauf achten, dass der Kontrast zwischen Vordergrund und Hintergrund ausreichend groß ist, um die Lesbarkeit des Textes für alle Besucher zu garantieren.
In CSS können Farben auf unterschiedliche Weise definiert werden, sodass Designer je nach Anforderung die passende Methode wählen können. Am häufigsten werden hexadezimale Farb-Codes verwendet. Alternativ können RGB-Werte und vordefinierte Farbnamen verwendet werden.
Color mit Hex-Code festlegen (Hexadezimale Farb-Codes)
Der hexadezimale Farbcode – oder kurz Hex-Code – ist die bekannteste und am häufigste Methode, um Farben in CSS zu definieren. Der Hex-Code besteht aus 6 Ziffern 0 bis 9 und den Buchstaben A bis F (bzw. a bis f). Je zwei Hex-Ziffern 00 bis FF repräsentieren im RGB-Farbraum den Rot, Grün und Blau-Anteil der Farbe. Ein Beispiel für einen Hex-Code ist #FF5733. Dieser Hex-Code bezeichnet die Farbe .
Die 1. und 2. Ziffer bezeichnen den Rot-Anteil,
die 3. und 4. Ziffer bezeichnen den Grün-Anteil,
die 5. und 6. Ziffer bezeichnen den Blau-Anteil.
Insgesamt lassen sich auf diese Weise 16,7 Millionen (2563) unterschiedliche Farben erzeugen.
Hex-Codes bieten dem Entwickler eine präzise Kontrolle über die exakte Farbmischung, was sie zur bevorzugten Methode der Farb-Definition im Webdesign macht. Ähnlich wie die Angabe der RGB-Werte ermöglicht diese Methode die Definition von Farben durch die genaue Angabe der Farbanteile der drei Primärfarben Rot, Grün und Blau. Allerdings ist der Hex-Code kürzer als der entsprechende RGB-Wert. RGB-Werte werden aus diesem Grund selten verwendet.
Moderne Browser verstehen auch Hex-Codes, die eine Komponente für die Transparenz enthalten. Die Transparenz wird durch zwei weitere Hex-Ziffern bestimmt. 00 bedeutet 0% Deckkraft, also volle Transparenz. FF bedeutet 100% Deckkraft, also überhaupt keine Transparenz. Der Hex-Wert 80 bedeutet 50% Transparenz.
Farben definieren durch RGB-Werte
RGB steht für Red, Green und Blue, (also Rot, Grün und Blau) und bezieht sich auf die drei Primärfarben im additiven Farbsystem (Mischung von farbigem Licht). Das Mischen der drei Grundfarben im gleichen Verhältnis erzeugt einen weißen bzw. grauen Farbton.
Durch das Mischen von Rot, Grün und Blau in verschiedenen Intensitäten entsteht die gesamte Farbpalette. Werden die drei Grundfarben mit maximaler Intensität gemischt, ergibt sich Weiß.
Insgesamt lassen sich 16,7 Millionen Farben erzeugen.
In CSS wird das RGB-System mit der Funktion rgb() verwendet. Ein Beispiel hierfür ist rgb(255, 87, 51). Dieser RGB-Wert erzeugt folgende Farbe .
Die Zahlenwerte von 0 bis 255 im Dezimalsystem geben die Intensität der jeweiligen Farbe an, wobei 0 die geringste Intensität und 255 die höchste darstellt.
RGBA ist eine Erweiterung von RGB, bei der zusätzlich ein Alpha-Kanal angegeben wird, der die Transparenz der Farbe steuert. Die rgba()-Funktion funktioniert ähnlich wie rgb(), jedoch gibt der vierte Wert die Transparenz der Farbe an. Für die Transparenz muss ein Dezimalwert zwischen 0 und 1 angegeben werden. Dabei bedeutet 0 vollständig transparent und 1 vollständig deckend.
Farben definieren mit Farbname
CSS unterstützt außerdem 141 vordefinierte Standard Farbnamen. Einige Farben haben zwei unterschiedliche Namen. So sind z.B. die Farben Aqua und Cyan (Hex-Code #00FFFF) identisch. Alle Grautöne existieren sowohl in der Schreibweise Grey als auch Gray.
Die Farbtabelle enthält die Grautöne nur in der Schreibweise *Grey, z.B DarkGrey, DarkSlateGrey oder DimGrey.
Benannte Farben sind eine einfache und praktische Möglichkeit, häufig verwendete Farben zu definieren.