Sprache:Deutsch
Dein Farblabor

Eine Farbe.Deine nächste Palette.

Finde Farben, die zusammenpassen. Probiere sie aus, prüfe den Kontrast und mach sie zu deinen.

Vorlagen und letzte Farben
Aus einem Bild

Kostenlos. Alles in deinem Browser. Fertige Farbpaletten

Generierte Palette

Klicke auf eine Farbe, um den HEX-Wert zu kopieren. Die Tonleiter hilft bei Buttons, Zuständen, Karten und UI-Flächen.

Gespeicherte Paletten bleiben auf diesem Gerät.

Palettenansicht

Nur die Ansicht ändert sich. Farben und Exporte bleiben gleich.

Gestalte deine eigene Palette

Sperre Farben, die bleiben sollen. Bearbeite oder verschiebe die anderen. Die Leertaste erzeugt bei sichtbarer Palette neue Farben; Eingaben und fokussierte Schaltflächen bleiben unverändert bedienbar.

Farben und Reihenfolge werden beim Kopieren des Freigabelinks übernommen.

shadcn/uiTailwind v4 · v3

Tonleiter

Die Chroma-Reduktion erhält Helligkeit und Farbton vor der HEX-Rundung. Original bewahrt bisherige Paletten und Links.

Fertige Farbpaletten

Wähle ein Beispiel, um alle seine Farben im Generator zu öffnen. Bearbeite, vergleiche und speichere deine eigene Version.

Dashboards
Helles Dashboard7 FarbenPalette öffnen Dunkles Dashboard7 FarbenPalette öffnen Kategoriale Diagramme7 FarbenPalette öffnen
Pastellfarben
Pfirsich und Lavendel6 FarbenPalette öffnen Sanfter Garten6 FarbenPalette öffnen Himmel und Rosa6 FarbenPalette öffnen
Blautöne
Produktblau5 FarbenPalette öffnen Marineblau und Sand5 FarbenPalette öffnen Nachtblau5 FarbenPalette öffnen

Die Beispiele sind Ausgangspunkte. Prüfe die tatsächlichen Text- und Hintergrundpaare vor der Verwendung.

Farbinspektor

Sieh die Basisfarbe in praktischen Formaten. Kopiere HEX, RGB, HSL und OKLCH für Implementierung und Dokumentation.

#E24B4A
Transparenz zusammensetzen

Füge RGBA, HSLA, OKLCH mit Alpha oder HEX mit Alpha ein. Wähle einen einfarbigen Hintergrund und übernimm die resultierende deckende Farbe.

Resultierender deckender HEX-Wert

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
Kontrast anpassen

Der Vorschlag passt die Helligkeit an und reduziert bei Bedarf die Chroma. Das fertige HEX-Paar wird ohne Rundung des Verhältnisses geprüft. Prüfe Aussehen und Textgröße.

Beste Kombinationen

Automatische Prüfungen mit Weiß, Schwarz und Palettenfarben.

Kontrastmatrix der Farbstufen · 13 × 13

Zeilen sind Hintergründe, Spalten Textfarben. Enthalten sind elf Stufen, Weiß und Schwarz. Mit Pfeiltasten navigieren und ein Paar zur Prüfung auswählen.

Ein Paar auswählen, um das Verhältnis anzuzeigen und im manuellen Prüfer zu verwenden.

AA: 4,5:1 normal / 3:1 groß. AAA: 7:1 normal / 4,5:1 groß. Diese Bewertungen gelten für dieses Paar und diese Textgröße.

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.
Vorschau der aktuellen Palettenkarte
Dieselbe Karte wie im PNG- oder SVG-Download · 1200 × 630


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 den als Original markierten Farbton als Markenfarbe. Seine Stufe hängt von der Eingabefarbe ab; wähle Hover- und Aktivzustände anhand des Kontrasts, statt 500/600/700 vorauszusetzen.
  • 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.