💡 1. CSS Custom Properties (Variablen)
CSS-Variablen werden mit zwei führenden Bindestrichen (--name) deklariert und typischerweise im globalen Pseudoelement :root registriert. Mit der Funktion var(--name, fallback) greifst du darauf zu:
:root {
/* Globale Design Tokens: */
--primary-color: #3b82f6;
--bg-card: #ffffff;
--text-main: #0f172a;
--radius-md: 12px;
--spacing-lg: 24px;
}
.card {
background-color: var(--bg-card);
color: var(--text-main);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
border: 2px solid var(--primary-color);
}
/* Lokale Überschreibung (Theming): */
.card-dark {
--bg-card: #0f172a;
--text-main: #f8fafc;
}🎨 2. Farbmodelle im Vergleich (HEX, RGB, HSL, OKLCH)
CSS3 und CSS Color 4 bieten unterschiedliche Wege zur Farbdefinition:
| Modell | Syntax-Beispiel | Besonderheit |
|---|---|---|
| HEX | #2563eb (bzw. #2563eb80) |
Kompakt, klassischer Standard |
| RGB / Alpha | rgb(37 99 235 / 0.8) |
Rot, Grün, Blau + Transparenz |
| HSL | hsl(217deg 91% 60%) |
Hue (Farbton), Saturation (Sättigung), Lightness (Helligkeit) |
| OKLCH | oklch(0.65 0.22 255) |
Modernster Farbraum: Wahrnehmungsgleichförmig & leuchtstark auf P3-Displays! |
🚦 Didaktische Analogie: Die Mischpalette & Farbrezeptur
Ohne Variablen: Du musstest eine Farbe an 80 verschiedenen Stellen im Code ändern, wenn das Logo eine neue Nuance bekam.
Mit CSS-Variablen: Du änderst einfach --primary-color an einer einzigen Stelle im :root, und deine gesamte Web-App wechselt synchron das Design!