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.