Farbpaletten-Generator

So verwenden Sie den Farbpaletten-Generator

1. Wählen Sie eine Grundfarbe über das Farbfeld oder geben Sie einen beliebigen Code unter Code der Grundfarbe ein (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), einen CSS-Namen …).
2. Wählen Sie eine Harmonie: Komplementär, Analog, Triadisch, Geteilt komplementär, Tetradisch (Rechteck), Quadrat oder Monochrom.
3. Wählen Sie den Farbkreis: HSL (klassisch) oder OKLCH (wahrnehmungsbasiert). Die Palette aktualisiert sich bei jeder Änderung; Palette erzeugen berechnet sie ebenfalls neu.
4. Kopieren Sie eine einzelne Farbe mit dem Button Kopieren unter ihrem Farbfeld, oder wählen Sie unter Exportieren als ein Format (HEX-Liste, CSS-Variablen, SCSS-Variablen, JSON-Array oder Tailwind-Farben) und nutzen Sie Kopieren oder Herunterladen für die ganze Palette.

Jedes Farbfeld zeigt seinen HEX-Code in Schwarz oder Weiß – je nachdem, was besser kontrastiert – sowie seine Position relativ zur Grundfarbe (zum Beispiel +120°).

Die Farbharmonien

Farbharmonien sind feste Winkel auf dem Farbkreis. Ausgehend vom Farbton Ihrer Grundfarbe dreht das Tool den Farbton weiter und behält Sättigung und Helligkeit der Grundfarbe bei.

• Komplementär (0°, 180°): die gegenüberliegende Farbe. Maximaler Kontrast, ideal für einen Call-to-Action-Button neben der Hauptfarbe einer Marke.
• Analog (−60°, −30°, 0°, +30°, +60°): Nachbarn auf dem Farbkreis. Ruhige, natürliche Kombinationen, die sich gut für Hintergründe und Illustrationen eignen.
• Triadisch (0°, 120°, 240°): drei gleichmäßig verteilte Farbtöne. Lebendig und ausgewogen; meist dominiert eine Farbe, die anderen beiden setzen Akzente.
• Geteilt komplementär (0°, 150°, 210°): die beiden Nachbarn der Komplementärfarbe. Starker Kontrast mit weniger Spannung als ein reines Komplementärpaar.
• Tetradisch (Rechteck) (0°, 60°, 180°, 240°): zwei Komplementärpaare. Reiche Paletten, die eine dominante Farbe brauchen, um stimmig zu bleiben.
• Quadrat (0°, 90°, 180°, 270°): vier gleichmäßig verteilte Farbtöne.
• Monochrom: ein Farbton in fünf Helligkeitsstufen von dunkel bis hell. Ideal für UI-Zustände, Diagramme und dezente Designs.

HSL- oder OKLCH-Farbkreis?

Der Farbkreis HSL (klassisch) ist der traditionelle, den die meisten Designtools und Tutorials verwenden. Sein Nachteil: Gleiche Winkel wirken nicht gleich hell. Gelb bei 60° sieht bei gleicher HSL-Helligkeit viel heller aus als Blau bei 240°.

Der Farbkreis OKLCH (wahrnehmungsbasiert) dreht den Farbton im Farbmodell Oklab, das so angelegt ist, dass die Helligkeit einheitlich wirkt. Paletten auf dieser Basis bestehen aus Farben mit ähnlichem visuellem Gewicht, was bei barrierefreien Kontrasten hilft. Manche gedrehten Farben können außerhalb dessen liegen, was ein Bildschirm darstellen kann; das Tool senkt dann ihre Buntheit leicht, damit sie darstellbar bleiben.

Die exportierte Palette verwenden

CSS-Variablen erzeugen einen :root-Block mit --color-1, --color-2 …, den Sie in ein Stylesheet einfügen. SCSS-Variablen liefern Zeilen wie $color-1: …;, JSON-Array eine Liste von HEX-Strings für Skripte, und Tailwind-Farben ein colors-Objekt mit den Schlüsseln 100, 200, 300 … für Ihre Tailwind-Konfiguration.

Prüfen Sie vor der Veröffentlichung den Textkontrast: Eine Harmonie garantiert angenehme Farbtöne, aber keinen lesbaren Text. Verwenden Sie für Fließtext dunkle oder helle Neutraltöne und reservieren Sie die gesättigten Palettenfarben für Akzente, Buttons und Grafiken.