Farbpaletten-Visualizer
Sieh dir eine Palette oder Markenfarbe auf einer kompletten Website an, mit echten Schriften, Live-Kontrastprüfung und hellem und dunklem Modus.
So siehst du Farben auf einer echten Oberfläche
- Starte mit einer Palette, zum Beispiel indem du sie aus dem Generator öffnest, oder wechsle zu Aus Markenfarbe und wähle eine einzelne Farbe.
- Wähle eine Vorschauvorlage: Landingpage, Dashboard, Mobile App oder Artikel, und wechsle zwischen hellem und dunklem Modus.
- Klicke auf eine Rolle wie Hintergrund oder Primär, um ihr eine andere Farbe aus der Palette zu geben, oder klicke auf Rollen mischen, um eine andere Zuordnung auszuprobieren. Wähle ein Schriftpaar oder mische die Schriften.
- Prüfe die Live-Kontrastliste und wende bei jedem durchgefallenen Paar Korrigieren an. Kopiere dann die Rollen als CSS-Variablen, Tailwind v4 oder shadcn/ui-Tokens, oder kopiere den Link, um die Vorschau zu teilen.
Das kannst du damit machen
Vier Vorschauvorlagen
Sieh deine Farben auf einer Landingpage, einem Dashboard, einem Screen einer mobilen App und einem Artikellayout.
Rollen zuordnen
Lege fest, welche Palettenfarbe der Hintergrund, der Text, die Hauptaktion und die übrigen Oberflächenrollen ist, und setze jede Änderung zurück.
Echte Schriften
Kombiniere Schriften für Überschriften und Fließtext aus einer integrierten Liste und sieh sie in der Vorschau, mit einer Schriftgrößenskala.
Live-Kontrastprüfung
Wichtige Paare aus Text und Hintergrund werden beim Bearbeiten geprüft, mit einer Korrektur per Klick für Paare, die durchfallen.
Heller und dunkler Modus
Schalte die gesamte Vorschau zwischen hell und dunkel um, um beide Versionen deiner Farben zu sehen.
Exportieren und teilen
Kopiere die Rollen als CSS-Variablen, Tailwind v4 oder shadcn/ui-Tokens, oder kopiere einen Link, der dieselbe Vorschau öffnet.
Häufige Fragen
Wie sehe ich mir eine Farbpalette auf einer Website an?
Öffne den Visualizer mit deiner Palette, wähle eine Vorlage wie eine Landingpage oder ein Dashboard und sieh die Farben auf einem kompletten Layout. Wechsle zwischen hellem und dunklem Modus und ändere, welche Farbe welche Rolle übernimmt.
Warum eine Palette auf einem echten Layout ansehen?
Farbfelder verbergen Probleme. Auf einer Seite siehst du, wie sich eine Farbe als Button, Link, Fließtext oder Kartenhintergrund verhält und ob der Text darauf lesbar bleibt.
Kann ich statt einer Palette meine eigene Markenfarbe nutzen?
Ja. Wähle Aus Markenfarbe, gib einen Hex-Code ein, und der Visualizer leitet die Oberflächenrollen aus dieser einen Farbe ab.
Prüft der Visualizer die Barrierefreiheit?
Ja. Er listet den Kontrast der wichtigsten Paare aus Text und Hintergrund auf, markiert die durchgefallenen und bietet Korrigieren an, um die Farbe für dieses Paar anzupassen.
Wie exportiere ich die Farben?
Kopiere im Bereich Teilen und exportieren die Rollen als CSS-Variablen, als Tailwind-v4-Theme oder als shadcn/ui-Tokens, oder kopiere den Link zur Vorschau.