Praktisches Farbtool

shadcn Farbthema-Generator

Mappe eine Palette auf shadcn CSS Variablen für Background, Foreground, Primary, Muted, Accent und Destructive.

Im Haupttool öffnenZurück zum Tool
EnglishItalianoEspañolFrançaisDeutsch

Was diese Seite bietet

  • Nutze Shades für semantische CSS Variablen.
  • Trenne Neutrals und Brand Farben für konsistente Komponenten.
  • Prüfe Primary/Destructive Foreground Kontrast.

Gut für

  • React Apps
  • Component Libraries
  • CSS Variablen

So nutzt du es

Paletten GeneratorErstelle zugängliche Farbpaletten, prüfe WCAG-Kontrast, extrahiere Bildfarben und exportiere CSS, Tailwind, SCSS, JSON, SVG und PNG.WCAG CheckPrüfe Text- und Hintergrundkontraste nach WCAG AA und AAA, teste echte Farbpaare und wähle lesbare Kombinationen.Bild ExtraktorExtrahiere dominante Farben aus PNG-, JPG- oder WebP-Bildern lokal im Browser und erstelle exportierbare Paletten.
Kann ich das mit dem Hauptgenerator nutzen?

Ja. Starte hier, öffne das Chromoforge Tool mit derselben Basisfarbe und exportiere die Palette.

Welche Variablen erwartet ein shadcn-Theme?

Die Paare background und foreground, dann card, popover, primary, secondary, muted, accent und destructive mit jeweils eigenem Foreground, dazu border, input und ring. Alle Komponenten der Bibliothek lesen diese Namen, ein vollständiger Satz hält helles und dunkles Theme synchron.

Warum stehen shadcn-Werte ohne Farbfunktion?

Die Standardkonfiguration speichert nackte Kanalwerte, damit Tailwind den Alphakanal zusammensetzen kann, etwa hsl(var(--primary) / 0.5). Ein vollständiger hsl()- oder oklch()-String in der Variablen bricht die Opacity-Utilities. Neuere Versionen der Bibliothek akzeptieren auch vollständige Farbwerte: folge der im Projekt bereits genutzten Konvention.