Skip to main content

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Geprüft von · Zuletzt geprüft

CSS Variables
:root {
  --palette-1: #24c6eb;
  --palette-2: #2494eb;
  --palette-3: #2563eb;
  --palette-4: #2431eb;
  --palette-5: #4824eb;
}

So nutzt du den Farbpaletten-Generator

  1. Grundfarbe wählen - den Farbpicker verwenden, einen Hex-Code einfügen oder auf "Zufällig" klicken.
  2. Harmonie-Modus wählen - komplementär, analog, triadisch, tetradisch, Split-Komplementär oder monochrom.
  3. Generierte Palette prüfen - Farbfelder aktualisieren sich live. Auf ein Farbfeld klicken, um dessen Hex-Wert in die Zwischenablage zu kopieren.
  4. In CSS exportieren - "CSS-Variablen exportieren" klicken, um die Palette als :root-Custom-Properties zum Einfügen in dein Stylesheet zu kopieren.

Über Farbharmonie

Farbharmonie ist die Gruppe von Kombinationen, die das menschliche Auge als ausgewogen und angenehm wahrnimmt. Die Grundlage ist das Farbrad - eine 360-Grad-Anordnung von Farbtönen, die Isaac Newton 1666 erstmals vorschlug. Modernes digitales Design referenziert normalerweise das HSL-Modell (Hue/Saturation/Lightness), bei dem der Farbton der Winkel auf dem Rad, die Sättigung die Intensität und die Helligkeit von Schwarz bis Weiß reicht. HSL ist intuitiver als Hex oder RGB, wenn du eine Farbe in ihrer Beziehung zu anderen verschieben möchtest, ohne ihre Identität zu verlieren.

Jeder Harmonie-Modus ist eine mathematische Beziehung auf dem Rad. Komplementäre Farben liegen 180° auseinander (Rot/Grün, Blau/Orange) und erzeugen den höchsten Kontrast. Analoge Paletten nehmen drei bis fünf Farbtöne innerhalb von ±30° voneinander (z. B. Türkis, Blau, Lila) für ein kohärentes, spannungsarmes Gefühl. Triadische Paletten (120° auseinander) bieten Lebhaftigkeit bei gleichzeitiger Balance. Tetradische (90°-Rechteck) bietet vier-Farbton-Reichtum, benötigt aber eine klare "dominierende" Farbe, um Chaos zu vermeiden. Split-Komplementär tauscht einen Arm eines komplementären Paars gegen die zwei Farbtöne, die es flankieren, aus und behält Kontrast bei, während der Zusammenprall abgemildert wird. Monochrom verschiebt nur Helligkeit und Sättigung eines einzigen Farbtons - die ruhigste, kultivierteste Option.

Harmonie ist ein Ausgangspunkt, keine Regel. Eine funktionierende UI-Palette verwendet typischerweise eine dominierende Farbe (60 %), eine Sekundärfarbe (30 %) und einen Akzent (10 %) - das klassische "60-30-10"-Verhältnis - unabhängig davon, welche Harmonie-Mathematik sie erzeugt hat.

Beispiele

  • Komplementär-Beispiel: Basis #2563eb (Blau) → Komplement #eb8d25 (Warmes Orange). Blau für 70 % der Oberflächen, Orange nur für Action-Schaltflächen verwenden.
  • Analog-Beispiel: Basis #14b8a6 (Türkis) → #14b892, #14b6b8, #14a0b8, #1493b8. Perfekt für ruhige Dashboard-UIs.
  • Triadisch-Beispiel: Basis #ef4444 (Rot) → #44ef44 (Grün), #4444ef (Blau). Verspielte Palette, üblich in Illustration und Kinderprodukten.
  • Monochrom-Beispiel: Basis #6366f1 (Indigo) → 5 Helligkeitsstufen von #e0e1fd bis #2a2c74 - das Rückgrat der meisten Utility-first-Design-Systeme.

Tipps und Anwendungsfalle

  • Kontrast für Barrierefreiheit prüfen - Text und UI-Icons sollten den WCAG-2.1-AA-Kontrast erfüllen (4,5:1 für Fließtext, 3:1 für großen Text oder Icons). Komplementäre Paletten scheitern oft bei der Lesbarkeit, wenn sie für Text verwendet werden.
  • Warme vs. kalte Balance - das Mischen einer warmen und einer kalten Farbe verankert eine Palette emotional. Alle-warmen Paletten wirken energetisch aber beklemmend; alle-kalten wirken sauber aber steril.
  • Markenpaletten beginnen normalerweise mit einer einzigen Heldenfarbe, erweitern sie in eine monochrome Rampe (50-900 Schattierungen) und fügen 1-2 Akzente aus einer triadischen oder komplementären Beziehung hinzu.
  • Datenvisualisierung bevorzugt analoge oder tetradische Paletten - klar unterscheidbare Farbtöne, ohne dass eine Farbe "besser" oder "schlechter" impliziert.
  • Kulturelle Assoziationen variieren: Rot signalisiert Glück in China und Gefahr in westlichen UIs; Weiß ist Braut im Westen, Trauer in Teilen Ostasiens. Die Zielgruppe berücksichtigen.

Farbskala-Generator: 9-stufige Rampen aus einem einzigen Hex

Ein Farbpaletten-Generator und ein Farbskala-Generator lösen leicht unterschiedliche Probleme. Eine Palette richtet eine kleine Gruppe harmonischer Farbtöne ein (normalerweise 3-6 Farben) für die Komposition. Eine Farbskala - auch Farbrampe, Tonrampe oder Tailwind-artige "50-900"-Leiter genannt - nimmt einen Hex-Wert und erzeugt 9-11 nach Helligkeit sortierte Schattierungen desselben Farbtons. Moderne Design-Systeme liefern beide: die Palette definiert die Beziehungen zwischen Farben, und die Skala verwandelt jede Palettenfarbe in einen verwendbaren Satz von Tokens für Text, Hintergründe, Rahmen und Hover-Zustände. Wenn du den monochromen Modus oben wählst, gibt dieses Tool die Skala für deinen Basis-Hex-Wert aus; die anderen Harmonie-Modi geben eine Palette aus.

Tailwind-Farbpaletten-Generator und Design-System-Arbeitsablauf

Wenn du ein Tailwind-basiertes Design-System aufbaust oder erweiterst, sieht der typische Arbeitsablauf so aus: einen Markenfarbton mit dem Farbpicker wählen, den Hex-Wert in diesen Generator im monochromen Modus eingeben, um eine 50-900-Helligkeitsrampe zu erzeugen, dann CSS-Variablen exportieren und unter theme.extend.colors in tailwind.config.ts einfügen. Denselben Durchgang für jede Palettenfarbe wiederholen (Primärfarbe, Sekundärfarbe, Akzent, Neutral) und du hast ein kohärentes Token-Set bereit für Komponenten. Diese Seite deckt somit die Arbeitsabläufe "Tailwind-Farbpaletten-Generator", "Tailwind-Palette-Generator" und "Design-System-Farbpalette" in einem einzigen Tool ab, ohne etwas an einen Server zu senden.

Farbpalette Generator - online erstellen

Dieser Farbpalette Generator erzeugt harmonische Farbpaletten aus einer einzigen Grundfarbe. Gib einen Hex-Wert ein oder wähle eine Farbe mit dem Color Picker, und das Tool berechnet passende Farbtöne nach klassischen Harmonielehren: komplementär, analog, triadisch, tetradisch, Split-Complementary und monochrom. Du kannst die erzeugte Farbpalette direkt als CSS-Variablen exportieren und in dein Projekt einfügen - besonders praktisch für Design-Systeme, Branding und Datenvisualisierung. Die ganze Berechnung läuft im Browser, es werden keine Daten an einen Server geschickt, und der Farbpaletten Generator ist kostenlos sowie ohne Anmeldung nutzbar.

Häufig gestellte Fragen

Was ist Farbharmonie?

Farbharmonie ist eine Reihe von Kombinationen, die das menschliche Sehsystem als ausgewogen wahrnimmt. Sie nutzt mathematische Beziehungen auf dem Farbrad - komplementär (180°), triadisch (120°), analog (±30°), tetradisch (90°) und monochrom (gleicher Farbton, variierte Helligkeit). Harmonische Paletten reduzieren visuelle Reibung, helfen, Hierarchien natürlich entstehen zu lassen, und halten das Auge des Betrachters auch bei längerer Exposition bequem. Die Regeln entstammen der Malereitheorie des 18. Jahrhunderts und lassen sich gut auf digitale Oberflächen übertragen.

Wie viele Farben erzeugt jeder Modus?

Komplementär erzeugt 2 Farben, Split-Komplementär 3 (Basis plus zwei Farben neben dem Komplement), triadisch 3 (120° auseinander), tetradisch 4 (90°-Rechteck), analog 5 (eng beieinander) und monochrom 5 Helligkeitsvarianten desselben Farbtons. Je nachdem, wie viel Vielfalt benötigt wird wählen - weniger Farben wirken "designter", mehr Farben wirken verspielt, sind aber schwieriger ausgewogen zu halten.

Welche Harmonie soll ich für eine Marke wählen?

Für die meisten Marken mit einer analogen oder monochromen Palette um eine einzige Heldenfarbe beginnen - das hält die Marke erkennbar und das Design kohärent. Eine komplementäre Akzentfarbe für Call-to-Action-Elemente hinzufügen. Triadische und tetradische Paletten funktionieren für verspielte Konsumentenmarken (Kinderprodukte, Unterhaltung, Essenslieferung), aber selten für B2B oder Unternehmensarbeit, wo Vertrauen und Klarheit wichtiger sind als Lebendigkeit.

Wie prüfe ich, ob eine Palette zugänglich ist?

Jedes Vordergrund-Hintergrund-Paar durch einen WCAG-Kontrast-Prüfer laufen lassen. Fließtext benötigt ein Verhältnis von 4,5:1; großer Text (18pt+) und UI-Komponenten benötigen 3:1. Komplementäre Paare bei voller Sättigung bestehen normalerweise, aber analoge und monochrome Paletten erfordern oft, eine Farbe in Richtung sehr hell oder sehr dunkel zu drücken. Niemals allein auf Farbton verlassen, um Bedeutung zu vermitteln - farbenblinde Benutzer (etwa 8 % der Männer) werden es verpassen.

Kann ich die Palette exportieren?

Ja. "CSS-Variablen exportieren" klicken, um die Palette als CSS-Custom- Properties innerhalb eines <code>:root</code>-Selektors zu kopieren - direkt in dein Stylesheet einfügen und mit <code>var(--color-1)</code> referenzieren. Einzelne Hex-Werte kannst du auch kopieren, indem du auf ein Farbfeld klickst. Für Figma, Sketch oder Adobe-Tools die Hex-Werte manuell in den Vollfarben-Picker einfügen.

Welches Farbformat wird verwendet?

Alle Farbfelder werden im 6-stelligen Hex-Format angezeigt und kopiert (z. B. <code>#2563eb</code>). Hex ist universell über HTML, CSS, Design-Tools und Bild-Editoren hinweg. Um in RGB (<code>rgb(37, 99, 235)</code>) oder HSL (<code>hsl(217, 82%, 53%)</code>) zu konvertieren, einen dedizierten Farbkonverter verwenden - HSL ist besonders nützlich, wenn Farbtöne programmatisch gedreht oder Helligkeitsrampen erstellt werden sollen.

Was ist die 60-30-10-Regel?

Die 60-30-10-Regel ist eine Proportionsrichtlinie aus dem Innendesign, die von UI-Designern übernommen wurde: 60 % des sichtbaren Bereichs verwendet die dominierende Farbe (oft eine neutrale oder die Marken-Basis), 30 % verwendet eine Sekundärfarbe, die sie ergänzt, und 10 % verwendet einen markanten Akzent für Call-to-Actions oder Hervorhebungen. Sie gilt unabhängig davon, welche Harmonie-Mathematik die Palette generiert hat, und verhindert das "Alles schreit"-Problem.

Werden meine Daten an einen Server gesendet?

Nein. Alle Palettengeneration, Harmonie-Mathematik und Hex-zu-HSL-zu-RGB- Konvertierung laufen vollständig im Browser mit JavaScript. Nichts über deine Grundfarbe, exportiertes CSS oder Zwischenablage-Aktivität wird hochgeladen oder protokolliert. Das Tool kann offline verwendet werden, sobald die Seite geladen ist.

Ist das ein Farbskala-Generator, Hex-Farbpaletten-Generator oder Farbmuster-Generator?

Alle davon, je nachdem, welchen Modus du wählst. Der monochrome Modus wirkt als Farbskala-Generator (9-11 tonale Schattierungen eines Farbtons, wie Tailwinds 50-900-Rampen). Die Paletten-Modi (komplementär, analog, triadisch, tetradisch, Split-Komplementär) wirken als Hex-Farbpaletten- Generator. Und weil jede Ausgabe aus einem einzigen Basis-Hex stammt, passt das Tool zu den Anwendungsfällen "Farbmuster-Generator" und "Farbpalette aus einer Farbe erstellen". CSS-Variablen exportieren, um das Ergebnis direkt in ein Design-System einzubinden.

Ist das ein Farbpalette Generator auf Deutsch?

Ja. Dieser Farbpalette Generator erstellt harmonische Farbpaletten aus einer Ausgangsfarbe mithilfe der klassischen Harmonieregeln. Du kannst einen Hex-Wert eingeben oder eine Farbe per Picker wählen und bekommst eine Farbpalette zurück, die du als CSS Custom Properties exportierst. Das Werkzeug ist kostenlos, läuft vollständig im Browser und benötigt weder Anmeldung noch Installation - ideal für Web-Design, Branding und UI-Prototyping.

Kann ich das als Tailwind-Farbpaletten-Generator nutzen?

Ja. Den monochromen Modus mit deinem Marken-Hex-Wert wählen; das Tool erzeugt eine 9-11-stufige Rampe, die sauber auf Tailwinds 50-100-200-300-400-500-600-700-800-900-Schlüssel abbildet (und optionale 950). "CSS-Variablen exportieren" klicken, dann die Werte unter <code>theme.extend.colors</code> in <code>tailwind.config.ts</code> unter deinem Farbnamen einfügen. Pro Palettenfarbe wiederholen - normalerweise eine Primärfarbe, eine Sekundärfarbe, einen Akzent plus ein neutrales Grau. Das Ergebnis ist ein vollständig typisiertes, IntelliSense-bereites Tailwind-Farbset.

Wie baue ich ein Dunkelmodus-Palettenpaar aus einem Hex auf?

Eine monochrome Rampe vom Marken-Hex generieren, dann die hellsten 50/100/200-Tokens als Hintergrund, Oberfläche und gedämpfte Oberfläche im Hellmodus verwenden, und die dunkelsten 900/800/700-Tokens als Dunkelmodus-Äquivalente. Fließtext verwendet 800/900 im Hellmodus und 50/100 im Dunkelmodus. Rahmen und Trennlinien kommen aus 200/300 (hell) oder 700/800 (dunkel). Dieselbe Markenfarbe sitzt bei 500 für Akzente in beiden Modi, was die Marke erkennbar hält. Die resultierenden Paare gegen WCAG 2.1 AA validieren.

Mehr CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool

CSS Animation Generator

Create CSS keyframe animations with presets and visual preview. Doubles as an animate-CSS generator and keyframe maker.

Open tool