CSS Tutorial – Farben

Einstellen der Farbeigenschaft

Die color-Eigenschaft definiert die Textfarbe eines Elements. Wird sie im body-Selektor gesetzt, gilt sie automatisch für nahezu alle Texte der Webseite, da Farben vererbt werden.

body {
    color: #ff5722;
}
    

Achtung: Die color-Eigenschaft erbt sich in der Regel vom übergeordneten Element – mit Ausnahme von Links, die ihre eigenen Standards besitzen.

Definition von Farbwerten

CSS bietet verschiedene Methoden, um Farben zu definieren. Die wichtigsten sind:

• Farbnamen wie red, blue, white
• HEX-Werte wie #ff0000
• RGB-Werte über rgb()
• Moderne Formate wie rgba(), hsl(), hsla(), hwb() oder lch()

Werfen wir einen Blick auf die gängigsten Varianten.

Farbschlüsselwörter

CSS unterstützt vordefinierte Farbnamen. Die gebräuchlichsten sind: black, blue, red, yellow, gray, white u. v. m.

h1 {
    color: red;
}
    

Moderne Browser unterstützen hunderte Farbnamen, dennoch sollte man für professionelle Projekte lieber HEX oder RGB verwenden.

HEX-Farbwerte

HEX ist die am weitesten verbreitete Methode. Die Schreibweise lautet #rrggbb, wobei jede Komponente einen Wert von 00 bis FF hat.

h1 {
    color: #ffa500;
}
    

Beispiele:

• #ffffff = Weiß
• #000000 = Schwarz
• #ff5722 = kräftiges Orange

Tipp: Wenn alle Werte doppelt vorkommen, kann die Kurzform genutzt werden: #fff statt #ffffff.

RGB-Farbwerte

Die Funktion rgb() definiert Farben über Rot-, Grün- und Blauwerte zwischen 0 und 255.

h1 {
    color: rgb(255, 165, 0);
}
    

Alternativ sind Prozentwerte möglich:

h1 {
    color: rgb(100%, 65%, 0%);
}
    

RGBA-Farbwerte (mit Transparenz)

rgba() funktioniert wie rgb(), erweitert aber um einen vierten Wert: den Alpha-Kanal für Transparenz.

p {
    color: rgba(255, 165, 0, 0.6); /* 60% sichtbar */
}
    

RGBA ist besonders nützlich für Overlays, Schatten und halbtransparente UI-Elemente.

HSL und HSLA

HSL steht für Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit).

h1 {
    color: hsl(30, 100%, 50%);
}
    

Mit hsla() kommt wieder ein Alpha-Kanal hinzu:

h1 {
    color: hsla(30, 100%, 50%, 0.5);
}
    

Modern: HWB, LAB, LCH

Neue Browser unterstützen auch Farbräume, die deutlich natürlichere Farben erlauben:

• hwb() – Farbton, Weißanteil, Schwarzanteil
• lab() – sehr präziser Farbraum für professionelle Designer
• lch() – perceptual color (sieht oft „echter“ aus)

h1 {
    color: lch(70% 80 40);
}
    

Diese Farbräume sind die Zukunft moderner UI-Gestaltung.

Einfluss auf Ränder und Konturen

Wird border-color oder outline-color nicht explizit gesetzt, verwenden viele Browser automatisch die Textfarbe des Elements.

p.border {
    color: #0000ff;
    border: 2px solid;
}

p.outline {
    color: #00ff00;
    outline: 2px solid;
}
    

Die Rahmen übernehmen hier automatisch die definierte Textfarbe.