Farbdefinitionen

Mit Farbdefinitionen legst du fest, welche Farbe Texte, Hintergründe, Rahmen oder andere Elemente erhalten. CSS bietet dafür mehrere Schreibweisen.

Farbnamen

Die einfachste Möglichkeit ist die Verwendung von vordefinierten Farbnamen. CSS kennt über 140 Farbnamen wie red, blue, green oder tomato.

1p {
2    color: red;
3}

Häufig verwendete Farbnamen:

• Grundfarben: red, blue, green, yellow, orange, purple, pink
• Neutraltöne: black, white, gray, silver
• Weitere Beispiele: tomato, coral, gold, lime, cyan, navy, teal, violet, brown, magenta

Farbnamen sind leicht lesbar, aber die Auswahl ist begrenzt. Für präzise Farben nutzt du besser Hex, RGB oder HSL.

Hexadezimale Farben (Hex)

Hex-Farben beginnen mit einem # und bestehen aus sechs Zeichen (0–9 und A–F). Jeweils zwei Zeichen stehen für Rot, Grün und Blau.

Syntax

1#RRGGBB

Beispiel: #3498db steht für einen Blauton.

1p {
2    color: #3498db;
3}

Kurzschreibweise

Wenn alle drei Farbpaare aus doppelten Zeichen bestehen, kannst du die Kurzform mit drei Zeichen verwenden:

1p {
2    color: #f00;
3}

#f00 ist identisch mit #ff0000 (Rot).

RGB (Red Green Blue)

Bei RGB gibst du die Anteile von Rot, Grün und Blau als Zahlen von 0 bis 255 an.

Syntax

1rgb(rot, grün, blau)

1p {
2    color: rgb(46, 204, 113);
3}

RGBA (Red Green Blue Alpha)

RGBA erweitert RGB um einen vierten Wert: Alpha. Damit steuerst du die Transparenz von 0 (vollständig transparent) bis 1 (vollständig deckend).

Syntax

1rgba(rot, grün, blau, alpha)

1.box {
2    background-color: rgba(231, 76, 60, 0.5);
3}

HSL (Hue Saturation Lightness)

HSL beschreibt Farben über Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness). Viele Designer finden diese Schreibweise intuitiver als RGB.

Syntax

1hsl(farbton, sättigung, helligkeit)

• Farbton (Hue): 0–360 Grad auf dem Farbkreis (0 = Rot, 120 = Grün, 240 = Blau)
• Sättigung (Saturation): 0 % = grau, 100 % = volle Farbe
• Helligkeit (Lightness): 0 % = schwarz, 50 % = normale Farbe, 100 % = weiß

1p {
2    color: hsl(280, 60%, 50%);
3}

HSLA (Hue Saturation Lightness Alpha)

Wie bei RGBA fügt HSLA einen Alpha-Wert für Transparenz hinzu.

Syntax

1hsla(farbton, sättigung, helligkeit, alpha)

1.box {
2    background-color: hsla(200, 80%, 50%, 0.5);
3}