CSS Farben - Alle Formate erklärt

Farben sind essenziell für gutes Webdesign. CSS bietet dir 5 verschiedene Wege, Farben zu definieren.

1. Farbnamen - Die einfachste Methode

CSS kennt 140 Farbnamen:

h1 {
    color: red;
}

p {
    color: blue;
    background-color: lightgray;
}

.box {
    border: 2px solid green;
}

Häufige Farbnamen:

• red, blue, green, yellow
• black, white, gray
• pink, purple, orange
• lightblue, darkgreen, lightgray

Wann nutzen?

• ✅ Zum schnellen Testen
• ✅ Für offensichtliche Farben
• ❌ Nicht für professionelle Projekte (begrenzte Auswahl)

2. Hexadezimal (Hex) - Der Standard

Hex-Codes sind der am häufigsten verwendete Weg:

.text {
    color: #FF0000;        /* Rot */
    background-color: #000000;  /* Schwarz */
}

.button {
    color: #FFFFFF;        /* Weiß */
    background-color: #007BFF;  /* Blau */
}

Hex verstehen

Ein Hex-Code besteht aus 6 Zeichen (oder 3 als Kurzform):

#RRGGBB
 ↑ ↑ ↑
 │ │ └─ Blau
 │ └─── Grün
 └───── Rot

Jedes Paar: 00 bis FF (0-255)

Beispiele:

#FF0000  /* Rot (FF = viel Rot, 00 = kein Grün/Blau) */
#00FF00  /* Grün */
#0000FF  /* Blau */
#FFFFFF  /* Weiß (alle an) */
#000000  /* Schwarz (alle aus) */
#808080  /* Grau (alle gleich) */

Kurzform

Wenn beide Ziffern gleich sind, kannst du abkürzen:

#FF0000  →  #F00   /* Rot */
#00FF00  →  #0F0   /* Grün */
#FFFFFF  →  #FFF   /* Weiß */
#000000  →  #000   /* Schwarz */

Groß-/Kleinschreibung egal:

#FF0000  =  #ff0000  =  #Ff0000  /* Alles identisch */

3. RGB - Rot, Grün, Blau

RGB definiert Farben mit 3 Zahlen (0-255):

.element {
    color: rgb(255, 0, 0);        /* Rot */
    background-color: rgb(0, 255, 0);    /* Grün */
}

.box {
    color: rgb(0, 0, 255);        /* Blau */
    background-color: rgb(128, 128, 128); /* Grau */
}

Syntax:

rgb(rot, grün, blau)

Vergleich Hex vs. RGB:

#FF0000  =  rgb(255, 0, 0)    /* Rot */
#00FF00  =  rgb(0, 255, 0)    /* Grün */
#0000FF  =  rgb(0, 0, 255)    /* Blau */
#FFFFFF  =  rgb(255, 255, 255) /* Weiß */
#000000  =  rgb(0, 0, 0)      /* Schwarz */

4. RGBA - RGB mit Transparenz

RGBA ist wie RGB, aber mit Alpha-Kanal für Transparenz:

.overlay {
    background-color: rgba(0, 0, 0, 0.5);  /* 50% transparentes Schwarz */
}

.button {
    background-color: rgba(0, 123, 255, 0.8);  /* 80% transparentes Blau */
}

.highlight {
    background-color: rgba(255, 255, 0, 0.3);  /* 30% transparentes Gelb */
}

Syntax:

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

Alpha-Wert:

• 1.0 = komplett deckend (0% transparent)
• 0.5 = halb transparent
• 0.0 = komplett transparent (unsichtbar)

Praktisches Beispiel:

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);  /* Dunkler Hintergrund */
}

5. HSL - Hue, Saturation, Lightness

HSL ist intuitiver für Designer:

.element {
    color: hsl(0, 100%, 50%);     /* Rot */
    background-color: hsl(120, 100%, 50%);  /* Grün */
}

.box {
    color: hsl(240, 100%, 50%);    /* Blau */
    background-color: hsl(0, 0%, 50%);    /* Grau */
}

Syntax:

hsl(hue, saturation, lightness)

HSL verstehen

1. Hue (Farbton): 0-360 Grad

0° / 360° = Rot
120° = Grün
240° = Blau

2. Saturation (Sättigung): 0%-100%

• 0% = Grau (keine Farbe)
• 100% = Volle Farbe

3. Lightness (Helligkeit): 0%-100%

• 0% = Schwarz
• 50% = Normale Farbe
• 100% = Weiß

Beispiele:

hsl(0, 100%, 50%)    /* Knallrot */
hsl(0, 50%, 50%)     /* Gedämpftes Rot */
hsl(0, 100%, 25%)    /* Dunkles Rot */
hsl(0, 100%, 75%)    /* Helles Rot */

HSLA - HSL mit Transparenz

.element {
    background-color: hsla(0, 100%, 50%, 0.5);  /* Halbtransparentes Rot */
    color: hsla(240, 100%, 50%, 0.8);           /* Leicht transparentes Blau */
}

Farbharmonien erstellen mit HSL

HSL macht es einfach, harmonische Farbpaletten zu erstellen:

/* Basis-Farbe: Blau */
.primary {
    background-color: hsl(240, 100%, 50%);
}

/* Hellere Version (Lightness erhöhen) */
.primary-light {
    background-color: hsl(240, 100%, 70%);
}

/* Dunklere Version (Lightness verringern) */
.primary-dark {
    background-color: hsl(240, 100%, 30%);
}

/* Gedämpfte Version (Saturation verringern) */
.primary-muted {
    background-color: hsl(240, 50%, 50%);
}

Moderne Syntax: rgb() für rgba()

Moderne Browser erlauben rgba() ohne "a":

/* Alt */
background-color: rgba(255, 0, 0, 0.5);

/* Neu (gleicher Effekt) */
background-color: rgb(255 0 0 / 0.5);

/* Funktioniert auch mit hsl */
background-color: hsl(0 100% 50% / 0.5);

CSS-Variablen für Farben

Best Practice: Farben als Variablen definieren:

:root {
    --primary-color: #007BFF;
    --secondary-color: #6C757D;
    --success-color: #28A745;
    --danger-color: #DC3545;
    --text-color: #333333;
    --bg-color: #FFFFFF;
}

.button-primary {
    background-color: var(--primary-color);
    color: white;
}

.button-danger {
    background-color: var(--danger-color);
    color: white;
}

Vorteile:

• ✅ Einfach Farben ändern (nur an einer Stelle)
• ✅ Konsistentes Design
• ✅ Wartbar

Wann welches Format?

Meine Empfehlung:

• Solide Farben: Hex (#007BFF)
• Transparente Farben: RGBA (rgba(0, 123, 255, 0.5))
• Farbvariationen: HSL (hsl(210, 100%, 50%))

Wichtige Farb-Eigenschaften

.element {
    /* Textfarbe */
    color: #333;

    /* Hintergrundfarbe */
    background-color: #f5f5f5;

    /* Rahmenfarbe */
    border-color: #ddd;

    /* Schatten-Farbe */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Text-Schatten */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

Farb-Tools & Ressourcen

Online Color Picker:

• Google "color picker" → Direkt im Browser
• coolors.co → Farbpaletten generieren
• htmlcolorcodes.com → Hex-Codes finden

Konverter:

Hex → RGB: #FF0000 → rgb(255, 0, 0)
RGB → Hex: rgb(255, 0, 0) → #FF0000

Best Practices

✅ DO:

1. Konsistente Farben (max. 3-4 Hauptfarben)
2. Kontrast beachten (Text muss lesbar sein)
3. CSS-Variablen für Farben nutzen
4. RGBA für Overlays (z.B. Modals)
5. HSL für Variationen (hell/dunkel)

❌ DON'T:

1. Zu viele Farben (wirkt unruhig)
2. Schlechter Kontrast (Accessibility!)
3. Farbnamen in Produktion
4. Inline-Styles für Farben

Barrierefreiheit (Accessibility)

Kontrast-Verhältnis beachten:

/* ❌ SCHLECHT: Zu wenig Kontrast */
.text {
    color: #aaa;
    background-color: #fff;
}

/* ✅ GUT: Genug Kontrast */
.text {
    color: #333;
    background-color: #fff;
}

Tool: WebAIM Contrast Checker (online)

Mindest-Kontrast:

• Normaler Text: 4.5:1
• Großer Text: 3:1

:root {
    /* Basis */
    --primary: hsl(220, 90%, 50%);
    /* Varianten durch Lightness ändern */
    --primary-light: hsl(220, 90%, 70%);
    --primary-dark: hsl(220, 90%, 30%);
    /* Muted durch Saturation ändern */
    --primary-muted: hsl(220, 40%, 50%);
}

.button {
    color: blue;
}

.button svg {
    fill: currentColor;  /* SVG nimmt Textfarbe */
}

.button::before {
    background: currentColor;  /* Icon nimmt Textfarbe */
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.5);  /* 50% schwarzes Overlay */
}

.highlight {
    background: rgba(255, 255, 0, 0.2);  /* Subtiles Gelb */
}

/* Mit CSS Variables kombinieren */
:root {
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(255, 255, 255, 0.9);
}

/* ❌ Zu wenig Kontrast (nur 2.5:1) */
.bad {
    color: #aaa;
    background: #fff;
}

/* ✅ Guter Kontrast (7:1) */
.good {
    color: #333;
    background: #fff;
}

/* Tool: WebAIM Contrast Checker */
/* Minimum: 4.5:1 für normalen Text */
/* Minimum: 3:1 für großen Text (18px+) */

Übungsaufgaben

Aufgabe 1: Farbpalette

Erstelle eine Farbpalette mit:

• Primärfarbe in Hex
• 3 RGBA-Varianten mit verschiedener Transparenz
• Dunkle und helle Version mit HSL

Aufgabe 2: Button-Varianten

Style 3 Buttons:

• Primary (blau, #007BFF)
• Success (grün, mit HSL)
• Danger (rot, mit RGBA für Hover-Effekt)

Aufgabe 3: Dark Mode

Erstelle CSS-Variablen für:

• Light Mode (helle Farben)
• Dark Mode (dunkle Farben)
• Wechsel zwischen beiden

Nächste Schritte

Du kennst jetzt:

• ✅ Alle Farbformate (Hex, RGB, HSL)
• ✅ Transparenz mit RGBA/HSLA
• ✅ CSS-Variablen für Farben
• ✅ Barrierefreiheit bei Farben

Als Nächstes lernst du:

• Text & Schrift stylen
• Backgrounds & Gradients
• Box Model

Weiter so! 🚀