--color-primary
Primary
Waldgrün für Kernaktionen.
var(--color-primary)
Primary --color-primary
Palette Preview
Diese Übersicht zeigt dir, wie die Farbvariablen aus global.css auf verschiedenen Komponenten wirken. Nutze sie, um schnell passende Kombinationen zu testen.
Direktes Mapping zu den wichtigsten HSL-Variablen.
--color-primary
Waldgrün für Kernaktionen.
--color-secondary
Warmer Holzton für Sekundärflächen.
--color-muted
Zurückhaltende Typografie und Rahmen.
--color-accent
Kupferfarbene Akzente für Highlights.
--color-forest-light
Helle Waldnuance für Hintergründe.
--color-wood-light
Sanfte Holzmaserung für Karten.
--color-gold
Luxuriöse Akzentfarbe für Buttons.
--color-destructive
Signalfarbe für kritische Aktionen.
Teste, wie die Oberflächenfarben auf Karten oder Overlays wirken.
--color-card
Standardkarten-Hintergrund.
Beispielinhalt
Buttons, Karten oder Overlays erhalten so direkt die richtige Stimmung.
--color-popover
Overlay und Dialoge.
Beispielinhalt
Buttons, Karten oder Overlays erhalten so direkt die richtige Stimmung.
--color-glass-bg
Transparente Panels & Navigation.
Beispielinhalt
Buttons, Karten oder Overlays erhalten so direkt die richtige Stimmung.
Die Gradient-Variablen eignen sich für Hero-Flächen oder Lichtakzente.
--gradient-forest
Hero-Hintergrund oder lange Flächen.
--gradient-gold
Premium Buttons & Badges.
--gradient-overlay
Dunkle Überlagerung für Bilder.
--gradient-glow
Spotlight oder Glüheffekte.
Prüfe, wie sich ganze Sections mit verschiedenen Utilities anfühlen.
--color-background / --color-background-foreground
Primäre Seitenfläche mit höchstem Kontrast.
--color-forest-dark
Tiefe Waldnuance für immersive Hero-Sektionen.
--color-forest-light
Hellere Fläche für Content-Sections mit viel Text.
--color-wood-medium
Natürlicher Holzton für Karten oder Footer.
--color-wood-light
Sanfter Hintergrund mit warmem Charakter.
--color-background-alt / --color-background-alt-foreground
Alternative Grundfläche (ehemals Card Surface).