Grafiken / Farbe

Farbpaletten-Generator: Harmonische Farbschemata mit einem Klick

Erstelle Farbpaletten nach der Farbenlehre: analog, komplementär, triadisch, gespalten-komplementär, monochrom oder zufällig – mit drei bis acht Farben. Sperre die Farben, die dir gefallen, und generiere den Rest neu. Prüfe den Kontrast jeder Farbe zu Weiß und exportiere die Palette als CSS-Variablen, Tailwind-Konfiguration, JSON, Hex-Codes oder PNG.

Farbpaletten-Generator: Harmonische Farbschemata mit einem Klick: Jede Palette beginnt mit einem Grundfarbton – wenn vorhanden, aus einer gesperrten Farbe. Die übrigen Farbtöne werden nach der gewählten Regel angeordnet: in 30°-Schritten bei analogen Farben, als Gegenfarbe bei komplementären Farben, in 120°-Schritten bei triadischen Farben, jeweils 150° auf beiden Seiten bei gespalten-komplementären Farben oder als ein Farbton von dunkel bis hell bei monochromen Farben. Helligkeit und Sättigung variieren, sodass die Palette helle, mittlere und dunkle Farben enthält. Für jede Farbe wird außerdem das WCAG-Kontrastverhältnis zu Weiß angezeigt. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
Werkbank für FarbpalettenLokale Verarbeitung

Läuft vollständig in deinem Browser

Oder drücke die Leertaste. Sperre die Farben, die du behalten möchtest.

#64A6F52.5:1 auf Weiß
#382B9D10.5:1 auf Weiß
#772BB77.5:1 auf Weiß
#BE4BBA4.3:1 auf Weiß
#E0367B4.2:1 auf Weiß
:root {
  --color-1: #64a6f5;
  --color-2: #382b9d;
  --color-3: #772bb7;
  --color-4: #be4bba;
  --color-5: #e0367b;
}

Eine Palette verwenden

Eine verbreitete Aufteilung sind etwa 60 % für eine neutrale Farbe, 30 % für eine zweite und 10 % für eine Akzentfarbe. So wird die kräftigste Farbe sparsam für Schaltflächen und Hervorhebungen eingesetzt.

Kontrast

4,5:1 ist das WCAG-AA-Minimum für normalen Text und 3:1 für großen Text; 7:1 erfüllt AAA.

So benutzt du es

  1. Wähle eine Harmonie und die Anzahl der Farben.
  2. Klicke auf „Generieren“ oder drücke die Leertaste, bis dir die Palette gefällt. Sperre Farben, die du behalten möchtest.
  3. Kopiere die Palette als Code oder lade sie als PNG herunter.

Datenschutz & Einschränkungen

Alles wird in deinem Browser generiert.

Ähnliche Tools

Palette-ExtraktorCSS-FarbverlaufTailwind-Farben

Häufige Fragen

Wie behalte ich eine Farbe, die mir gefällt?

Klicke bei der Farbe auf das Sperrsymbol. Gesperrte Farben bleiben unverändert. Die erste gesperrte Farbe legt außerdem den Grundfarbton fest, um den die übrigen Farben aufgebaut werden.

Kann ich meine Markenfarbe verwenden?

Ja. Klicke auf ein Farbfeld, um es auf eine beliebige Farbe zu setzen, sperre es und generiere die übrigen Farben darum herum.

Ist der Text auf der Palette lesbar?

Jedes Farbfeld zeigt sein Kontrastverhältnis zu Weiß. WCAG verlangt für normalen Text mindestens 4.5:1. Bei einer Farbe unter diesem Wert sollte dunkler Text verwendet werden.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig