Farben in CSS definieren – Farb-Codes und Farbnamen
Farben sind ein zentrales Element des Web-Designs und spielen eine entscheidende Rolle für die visuelle Gestaltung und die Benutzerfreundlichkeit einer Website. 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 zu berücksichtigen. Verschiedene Benutzer haben unterschiedliche Sehfähigkeiten und einige Menschen leiden an Sehstörungen oder Farbblindheit. Deshalb sollte der Kontrast zwischen Vordergrund und Hintergrund ausreichend groß sein, um die Lesbarkeit zu gewährleisten.
In CSS können Farben auf unterschiedliche Weise definiert werden, sodass Designer je nach Anforderung die passende Methode auswählen können. Am häufigsten werden hexadezimale Farb-Codes, RGB-Werte und vordefinierte Standard Farbnamen verwendet.
Color mit Hex-Code festlegen (Hexadezimale Farb-Codes)
Hexadezimale Farbcodes, kurz Hex-Codes, ist die bekannteste und am häufigsten verwendete 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 R-Anteil,
die 3. und 4. Ziffer bezeichnen den G-Anteil,
die 5. und 6. Ziffer bezeichnen den B-Anteil.
Insgesamt lassen sich 16,7 Millionen 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 kaum 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 alle 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 140 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.
Meine 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.