Generierte Palette
Klicke auf eine Farbe, um den HEX-Wert zu kopieren. Die Tonleiter hilft bei Buttons, Zuständen, Karten und UI-Flächen.
Tonleiter
Farbinspektor
Sieh die Basisfarbe in praktischen Formaten. Kopiere HEX, RGB, HSL und OKLCH für Implementierung und Dokumentation.
Farbseh-Vorschau
Annahernde Simulationen h?ufiger Farbsehschw?chen. Diese Vorschauen sind für Designchecks gedacht, nicht für medizinische Diagnosen.
WCAG-Kontrastprüfer
AA verlangt 4.5:1 für normalen Text und 3:1 für großen Text. AAA verlangt 7:1.
Manuelle Prüfung
Beste Kombinationen
Automatische Prüfungen mit Weiß, 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 für 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-Verläufe aus der aktuellen Palette.
UI-Vorschau
Ein kleines Interface-Mockup, um zu prüfen, ob die Palette in realem Kontext funktioniert.
Produktions-Checkliste
Eine kurze Checkliste für den Einsatz der Palette auf einer echten Website.
- Nutze Ton 500 als Hauptmarkenfarbe und 600/700 für Hover und aktive Zustände.
- Nutze 50/100-Töne für Flächen, keine gesättigten Farben hinter Absätzen.
- Prüfe Fließtext vor dem Launch mit mindestens 4.5:1.
- Teste wichtige UI-Zustände: Hover, deaktiviert, Erfolg, Warnung und Fehler.
- Halte nur einen starken Akzent, damit das System konsistent bleibt.
Farbtools und Guides
Fokussierte Seiten für Kontrast, Tailwind-Paletten, CSS-Variablen, Bildextraktion und Verläufe.
So erstellst du eine zugängliche Farbpalette
Starte mit einer Markenfarbe, wähle eine Harmonie, prüfe Textkontrast und exportiere Tokens.