Kostenloses Browser-Tool - kein Upload - kein Konto

Verwandle eine Farbe in ein nutzbares Designsystem.

Wähle eine Basisfarbe, generiere harmonische UI-Paletten, prüfe WCAG-Kontrast, extrahiere Farben aus Bildern und exportiere produktionsreife Tokens.

Tool öffnen
EnglishItalianoEspañolFrançaisDeutsch

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.

#E24B4A

Farbseh-Vorschau

Annähernde 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

Verhältnis
--
Lesbarer Interface-Text

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 Markenboards.
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.
WCAG-KontrastprüferPrüfe, ob Text- und Hintergrundfarben die WCAG-Kontrastverhältnisse AA und AAA erfüllen.Tailwind-FarbgeneratorErstelle eine Tailwind-Skala 50-950 aus einer Markenfarbe.CSS-Farbvariablen-GeneratorGeneriere CSS Custom Properties und Design Tokens aus einer Farbpalette.Bildfarben-ExtraktorExtrahiere dominante Farben aus Bildern lokal im Browser.CSS-VerlaufsgeneratorErstelle lineare, radiale und konische CSS-Verläufe aus einer Palette.Zugängliche FarbpaletteEntwirf Paletten, die Interface-Text lesbar und WCAG-freundlich halten.Brand Farbpalette GeneratorErstelle eine Markenpalette aus Logo oder Primary Farbe und exportiere CSS Variablen und Design Tokens.Chart Farbpalette GeneratorGeneriere unterscheidbare Chart Farben für Dashboards und Datenvisualisierung mit Kontrastcheck.Farbenblindheit SimulatorPrüfe Paletten für Deuteranopie, Protanopie und Tritanopie, bevor riskante Kombinationen live gehen.Farbkonverter HEX, RGB, HSL und OKLCHKonvertiere Farben zwischen HEX, RGB, HSL und OKLCH und kopiere Werte für CSS und Dokumentation.Farbharmonie GeneratorGeneriere komplementäre, analoge, triadische, split, tetradische und monochromatische Farbharmonien.Farbpaletten-GeneratorGeneriere harmonische Farbpaletten aus einer Basisfarbe mit komplementären, analogen, triadischen und monochromatischen Regeln.Farbschattierungen GeneratorGeneriere eine 50-950 Skala aus einer Basisfarbe für UI Flächen, Borders, Hover und Dark Mode.Dark Mode Farbpalette GeneratorErstelle Dark Mode Paletten mit lesbarem Text, Muted Flächen, Borders und zugänglichen Akzenten.Design-Token-GeneratorErstelle Farb Design Tokens aus einer Palette und exportiere CSS Variablen, SCSS Maps, JSON und Tailwind Werte.shadcn Farbthema-GeneratorMappe eine Palette auf shadcn CSS Variablen für Background, Foreground, Primary, Muted, Accent und Destructive.Website Farbschema GeneratorErstelle ein Website Farbschema mit Primary, Neutral und Accent Farben für Hero, Buttons, Cards und Formulare.


So erstellst du eine zugängliche Farbpalette
Starte mit einer Markenfarbe, wähle eine Harmonie, prüfe Textkontrast und exportiere Tokens.
Komplementär oder analog?
Komplementäre Paletten nutzen gegenüberliegende Farben und geben starken Kontrast. Analoge nutzen benachbarte Farbtöne, wirken ruhiger und passen zu dichten Oberflächen.
Warum ist Kontrast wichtig?
Text mit wenig Kontrast sieht im Mockup gut aus und wird auf dem Bildschirm der Nutzer unlesbar. Für Fließtext mindestens WCAG AA anpeilen, also 4,5:1.
Klappt das mit Tailwind?
Ja. Der Tailwind-Export liefert die Skala der Primärfarbe von 50 bis 950, dazu die Akzentfarbe, wenn vorhanden.
Werden Bilder hochgeladen?
Nein. Die Farbextraktion nutzt Canvas im Browser. Keine Datei verlässt das Gerät.