Generierte Palette
Klicke auf eine Farbe, um den HEX-Wert zu kopieren. Die Tonleiter hilft bei Buttons, Zustanden, Karten und UI-Flachen.
Tonleiter
Farbinspektor
Sieh die Basisfarbe in praktischen Formaten. Kopiere HEX, RGB, HSL und OKLCH fuer Implementierung und Dokumentation.
Farbseh-Vorschau
Annahernde Simulationen haeufiger Farbsehschwaechen. Diese Vorschauen sind fuer Designchecks gedacht, nicht fuer medizinische Diagnosen.
WCAG-Kontrastpruefer
AA verlangt 4.5:1 fuer normalen Text und 3:1 fuer grossen Text. AAA verlangt 7:1.
Manuelle Pruefung
Beste Kombinationen
Automatische Pruefungen mit Weiss, Schwarz und Palettenfarben.
Tokens exportieren
Kopiere CSS-Variablen, Tailwind-Konfig, SCSS, JSON-Tokens und herunterladbare SVG/PNG-Palettenkarten.
Palettenkarte herunterladen
Exportiere eine teilbare 1200x630-Palettenkarte als PNG oder SVG fuer Doku, Social Previews und Brand Boards.
Lokal im Browser generiert.
Farben aus Bild extrahieren
Lege PNG, JPG oder WebP ab. Das Bild wird lokal im Browser verarbeitet.
Verlaufsgenerator
Erstelle CSS-Verlaufe aus der aktuellen Palette.
UI-Vorschau
Ein kleines Interface-Mockup, um zu pruefen, ob die Palette in realem Kontext funktioniert.
Produktions-Checkliste
Eine kurze Checkliste fuer den Einsatz der Palette auf einer echten Website.
- Nutze Ton 500 als Hauptmarkenfarbe und 600/700 fuer Hover und aktive Zustande.
- Nutze 50/100-Toene fuer Flachen, keine gesattigten Farben hinter Absatzen.
- Pruefe Fliesstext vor dem Launch mit mindestens 4.5:1.
- Teste wichtige UI-Zustande: Hover, deaktiviert, Erfolg, Warnung und Fehler.
- Halte nur einen starken Akzent, damit das System konsistent bleibt.
Farbtools und Guides
Fokussierte Seiten fuer Kontrast, Tailwind-Paletten, CSS-Variablen, Bildextraktion und Verlaufe.
So erstellst du eine zugangliche Farbpalette
Starte mit einer Markenfarbe, wahle eine Harmonie, pruefe Textkontrast und exportiere Tokens.