Farbpaletten-Generator

Funktionen

Komplementärfarben

Analoge Farben

Triadisches Schema

Geteiltes Komplementär

Als CSS-Variablen exportieren

Anleitung

1. Grundfarbe und Harmonieschema wählen — die Arbeitsfläche füllt sich mit einer Palette.

2. Leertaste (oder Mischen) für Varianten. Beim Überfahren einer Spalte lassen sich Farben kopieren, bearbeiten, als Helligkeitsstufen aufklappen oder gegen das Mischen sperren.

3. Die Arbeitsfläche (Weiß / Grau / Dunkel / Schachbrett) umschalten, um die Palette vor verschiedenen Umgebungen zu prüfen — dann als CSS, Tailwind, JSON, SVG oder PNG exportieren.

Über dieses Werkzeug

Gute Paletten sind selten zufällig: Die meisten folgen Beziehungen auf dem Farbkreis. Ausgehend von einer Grundfarbe erstellt dieser Generator sechsfarbige Paletten mit klassischen Harmonien – analog (benachbarte Farbtöne für ruhige Designs), monochrom (ein Farbton in verschiedenen Helligkeiten), komplementär (gegenüberliegende Farbtöne für starken Kontrast), geteilt komplementär, triadisch und tetradisch. Jede Spalte zeigt ihren Wert und einen ungefähren Farbnamen; Sie können sie kopieren, bearbeiten, eine Leiter hellerer und dunklerer Abstufungen öffnen oder sie sperren, damit sie beim Neumischen der übrigen Farben stehen bleibt. Prüfen Sie die Palette vor weißem, grauem, dunklem oder transparentem Hintergrund und exportieren Sie sie als CSS-Variablen, Tailwind-Farbkonfiguration, JSON, SVG oder PNG-Farbmusterblatt.

Häufig gestellte Fragen

Was unterscheidet die Harmonie-Schemata?

Analog verwendet benachbarte Farbtöne, monochrom behält einen Farbton und variiert die Helligkeit, komplementär kombiniert gegenüberliegende Farbtöne, geteilt komplementär nutzt die beiden Farbtöne neben der Komplementärfarbe, triadisch verteilt drei Farbtöne im Abstand von 120° und tetradisch vier im Abstand von 90°.

Welches Schema eignet sich am besten für eine Website?

Analoge oder monochrome Paletten sind für Oberflächen am einfachsten, weil sie ruhig wirken. Komplementäre und triadische Schemata liefern starke Akzente – ein bewährter Ansatz ist daher eine dominante Farbe, eine unterstützende Farbe und ein kleiner Anteil der Komplementärfarbe für Handlungsaufforderungen.

Wie funktionieren gesperrte Farben?

Eine gesperrte Spalte behält genau diese Farbe, wenn Sie Leertaste oder Mischen drücken, um Varianten zu erzeugen. Das ist nützlich, wenn eine Markenfarbe feststeht und Sie herausfinden möchten, was dazu passt.

Sind die erzeugten Paletten barrierefrei?

Harmonie garantiert keinen lesbaren Kontrast. Bevor Sie zwei Palettenfarben für Text und Hintergrund verwenden, prüfen Sie das Paar mit einem Kontrastprüfer nach WCAG AA (4,5:1 für Fließtext).

In welche Formate kann ich exportieren?

CSS Custom Properties, ein Tailwind-Snippet für theme.extend.colors, ein JSON-Array mit HEX-Werten, eine SVG-Datei mit den Farbfeldern und ein PNG mit 1500 × 900 Pixeln, auf dem die Werte in jede Spalte gedruckt sind.

Funktionen

Anleitung

Über dieses Werkzeug

Häufig gestellte Fragen

Verwandte Werkzeuge