Farben in CSS
CSS ermöglicht es, auf verschiedene Arten Farben für Elemente festzulegen. Man kann Farbnamen, HEX-Codes, RGB/RGBA-Werte sowie HSL/HSLA-Formate verwenden.
Verwendung von Farbnamen
CSS kennt über 140 vordefinierte Farbnamen wie 'red', 'blue', 'green'. Sie sind eine schnelle und leicht verständliche Lösung.
HEX-Farben
HEX-Codes enthalten die roten, grünen und blauen Komponenten einer Farbe. Format: #RRGGBB, wobei jede Komponente eine hexadezimale Zahl zwischen 00 und FF ist.
RGB- und RGBA-Farben
Das RGB-Farbmodell bestimmt Farben durch die Mischung von Rot, Grün und Blau. RGBA ergänzt dies um einen Alphakanal für Transparenz.
HSL- und HSLA-Farben
Das HSL-Modell (Hue, Saturation, Lightness) beschreibt eine Farbe anhand von Farbton, Sättigung und Helligkeit. HSLA enthält zusätzlich einen Alphakanal für Transparenz.
Farbbeispiele
Die folgenden Quadrate enthalten den Farbnamen sowie HEX- und RGB-Code.
Red
#FF0000
rgb(255, 0, 0)
Green
#00FF00
rgb(0, 255, 0)
Blue
#0000FF
rgb(0, 0, 255)
Purple
#800080
rgb(128, 0, 128)
Orange
#FFA500
rgb(255, 165, 0)
Cyan
#00FFFF
rgb(0, 255, 255)
Pink
#FFC0CB
rgb(255, 192, 203)
Yellow
#FFFF00
rgb(255, 255, 0)
Vergleich der Farbformate
Die folgenden Beispiele zeigen, wie man dieselbe Farbe in verschiedenen Formaten darstellen kann.
Tipps für die Verwendung von Farben
Die richtige Wahl der Farben ist entscheidend für das Erscheinungsbild einer Webseite und für die Barrierefreiheit.
- Achte immer auf ausreichenden Kontrast zwischen Text- und Hintergrundfarbe.
- RGBA- und HSLA-Farben ermöglichen Transparenz, was besonders bei modernen Designs nützlich ist.
- In größeren Projekten sollte eine konsistente Farbpalette verwendet werden, um ein einheitliches Design zu gewährleisten.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
