Color Palette Generator

Komplementäre, analoge, triadische und tetradische Farbpaletten aus einer beliebigen Basisfarbe generieren

Beispiel ausprobieren

Basisfarbe

Farbschema

Generierte Palette

Was ist eine Farbpalette?

Eine Farbpalette ist eine festgelegte Auswahl von Farben, die in einem Design harmonisch zusammenwirken. Wenn man eine einzelne Basisfarbe für eine Marke, eine Website oder eine Illustration wählt, benötigt man Begleitfarben, die gut dazu passen. Die Farbpaletten-Generierung automatisiert diese Auswahl, indem sie Regeln der Farbtheorie anwendet — konkret die geometrischen Beziehungen auf dem HSL-Farbkreis.

Der HSL-Farbkreis (Hue, Saturation, Lightness) ordnet Farbtöne auf einem 360-Grad-Kreis an. Rot liegt bei 0 Grad, Grün bei 120 Grad und Blau bei 240 Grad. Jedes Farbharmonie-Schema funktioniert, indem es Farbtöne in bestimmten Winkelabständen zur Basisfarbe auswählt. Ein komplementäres Paar verwendet beispielsweise zwei Farben, die 180 Grad voneinander entfernt sind. Ein analoges Set wählt Farben innerhalb von 30 Grad auf beiden Seiten. Diese geometrischen Regeln erzeugen ausgewogene Kombinationen, weil die gewählten Farbtöne gleichmäßig über den Farbkreis verteilt sind, anstatt sich in einem Bereich zu häufen.

Dieses Tool nimmt einen beliebigen Hex-Farbwert als Eingabe, wandelt ihn in HSL um, dreht den Farbton um die durch das gewählte Schema definierten Winkel und konvertiert die Ergebnisse zurück in Hex. Es unterstützt sechs Schemata: komplementär, analog, triadisch, split-komplementär, tetradisch und monochromatisch. Jedes Schema erzeugt zwischen 2 und 5 Ausgabefarben.

Warum diesen Color Palette Generator verwenden?

Farben durch Ausprobieren aufeinander abzustimmen ist langsam und inkonsistent. Ein Paletten-Generator wendet Farbtheorie-Regeln sofort an und liefert mathematisch ausgewogene Ergebnisse aus jedem Ausgangspunkt.

Sofortige Paletten-Generierung
Basisfarbe und Schema auswählen — die Palette erscheint sofort. Kein Formular, kein Ladevorgang. Die Ausgabe aktualisiert sich in Echtzeit, wenn die Basisfarbe geändert wird.
🎨
Sechs Harmonieschemata
Wählbar sind komplementär, analog, triadisch, split-komplementär, tetradisch oder monochromatisch. Jedes Schema erzeugt einen anderen visuellen Effekt — von kontrastreichen Paaren bis hin zu subtilen einfarbigen Verläufen.
🔒
Verarbeitung im Browser
Die gesamte Farb-Mathematik läuft im Browser. Es werden keine Farbdaten an einen Server übertragen. Das Tool funktioniert offline, sobald die Seite geladen ist.
📋
Export per Klick
Einzelne Hex-Werte oder die gesamte Palette per Klick kopieren und direkt in CSS, Figma, eine Tailwind-Config oder jedes andere Design-Tool einfügen, das Hex-Werte akzeptiert.

Anwendungsfälle für den Color Palette Generator

UI-Theme-Erstellung
Frontend-Entwickler, die eine neue App aufbauen, können mit einer Markenfarbe starten und eine vollständige Palette für primäre, sekundäre und Akzenttoken generieren. Triadische oder tetradische Schemata liefern genug Vielfalt für Buttons, Links, Hinweise und Hintergründe.
Design-System-Farb-Token
Design-System-Entwickler verwenden monochromatische Paletten, um eine Helligkeitsskala für einen einzelnen Marken-Farbton zu generieren und jeden Schritt einem benannten Token zuzuordnen (z. B. blau-100 bis blau-900).
Datenvisualisierung
Datenentwickler und Analysten benötigen klar unterscheidbare Farben für Diagrammreihen, die sich nicht beißen. Eine analoge oder triadische Palette bietet genug Abstand für 3–6 Reihen und hält das Diagramm visuell kohärent.
Marketing-Landingpages
Designer, die Kampagnenseiten erstellen, gehen von der primären Markenfarbe aus und nutzen ein split-komplementäres Schema, um Akzentfarben für CTA-Buttons und hervorgehobene Bereiche zu finden, ohne mit dem Logo zu kollidieren.
Barrierefreiheit und Kontrast
QA-Engineers, die WCAG-Konformität prüfen, kombinieren generierte Palettenfarben und testen sie mit einem Kontrast-Checker. Ein komplementäres oder split-komplementäres Schema erzeugt oft Paare mit hohem Luminanzkontrast.
Farbtheorie lernen
Designstudierende können alle sechs Schemata auf dieselbe Basisfarbe anwenden und sehen, wie jede Geometrie die Farbtöne auf dem Farbkreis verteilt. Die visuelle Ausgabe macht die abstrakten Winkel greifbar.

Vergleich der Farbharmonie-Schemata

Jedes Harmonie-Schema wählt Farben anhand von Farbton-Rotationswinkeln zur Basisfarbe auf dem HSL-Farbkreis aus. Die folgende Tabelle listet jedes Schema, die Anzahl der erzeugten Farben, die Rotationswinkel und den Designkontext auf, in dem es am besten funktioniert.

SchemaFarbenFarbtonwinkelEignet sich für
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

Wie die HSL-Farbkreisrotation funktioniert

Die gesamte Paletten-Generierung in diesem Tool basiert auf dem HSL-Farbmodell. Die drei Achsen zu verstehen hilft dabei vorherzusagen, wie eine Basisfarbe unter jedem Schema transformiert wird.

Farbton (0–360)
Die Position auf dem Farbkreis in Grad. 0 ist Rot, 60 ist Gelb, 120 ist Grün, 180 ist Cyan, 240 ist Blau, 300 ist Magenta. Paletten-Schemata drehen diesen Wert, während Sättigung und Helligkeit konstant bleiben.
Sättigung (0–100 %)
Wie leuchtend die Farbe ist. 100 % bedeutet vollständig gesättigt; 0 % ist ein Grauton. Paletten-Schemata behalten die Sättigung der Basisfarbe bei, sodass alle generierten Farben die gleiche Intensität haben.
Helligkeit (0–100 %)
Wie hell die Farbe ist. 0 % ist Schwarz, 50 % ist der reine Farbton, 100 % ist Weiß. Monochromatische Schemata variieren die Helligkeit, um eine Tonabstufung zu erzeugen; alle anderen Schemata halten die Helligkeit konstant.

Code-Beispiele

Farbpaletten programmatisch generieren mithilfe von HSL-Konvertierung und Farbtonrotation.

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

Häufig gestellte Fragen

Was ist der Unterschied zwischen komplementär und split-komplementär?
Komplementär verwendet zwei Farben, die exakt 180 Grad voneinander entfernt sind, und erzeugt maximalen Farbtonkontrast. Split-komplementär ersetzt den direkten Gegenpol durch zwei Farben bei 150 und 210 Grad zur Basisfarbe — das liefert starken Kontrast mit weniger visueller Spannung. Split-komplementär ist im UI-Design leichter einzusetzen, weil keine der Akzentfarben direkt der Basisfarbe entgegenwirkt.
Wie viele Farben sollte eine UI-Palette haben?
Die meisten Design-Systeme verwenden 3–5 Kern-Farbtöne: einen primären, einen sekundären, einen neutralen und ein bis zwei Akzente. Jeder Kern-Farbton erhält dann eine Helligkeitsskala (100 bis 900). Mit einem triadischen oder tetradischen Schema die Kern-Farbtöne ermitteln und anschließend für jeden monochromatische Skalen generieren.
Kann ich diese Paletten mit Tailwind CSS verwenden?
Ja. Die Hex-Werte kopieren und im colors-Objekt in der tailwind.config.js oder tailwind.config.ts eintragen. Für eine monochromatische Skala jeden Farbton einem nummerierten Schlüssel (50, 100, 200 usw.) zuordnen, um Tailwinds Namenskonvention einzuhalten.
Warum wirken manche generierten Farben stumpf oder trüb?
Wenn die Basisfarbe eine niedrige Sättigung oder extreme Helligkeit hat (sehr nah an 0 % oder 100 %), wirken die rotierten Farbtöne ebenfalls gedämpft. Der Generator übernimmt die Sättigungs- und Helligkeitswerte der Basisfarbe. Für lebhafte Paletten eine Basisfarbe mit einer Sättigung über 50 % und einer Helligkeit zwischen 30 % und 70 % wählen.
Was ist der Unterschied zwischen HSL und HSV/HSB?
HSL und HSV verwenden beide den Farbton als Kreisachse, definieren Helligkeit aber unterschiedlich. In HSL entspricht Helligkeit 50 % dem reinen Farbton und 100 % Weiß. In HSV (auch HSB genannt) entspricht Wert 100 % dem reinen Farbton, und Weiß lässt sich nur durch Reduzierung der Sättigung erreichen. Die meisten Paletten-Generatoren verwenden HSL, weil dessen Helligkeitsachse intuitiver damit übereinstimmt, wie wir Farbhelligkeit wahrnehmen.
Welchen Zusammenhang haben Farbharmonie-Schemata und Barrierefreiheit?
Farbharmonie und WCAG-Kontrast sind separate Anforderungen. Ein komplementäres Paar hat maximalen Farbtonkontrast, garantiert aber keinen ausreichenden Luminanzkontrast für die Lesbarkeit von Text. Nach dem Generieren einer Palette jedes Vordergrund/Hintergrund-Paar gegen WCAG AA (4,5:1 für normalen Text) testen. Farben mit ähnlicher Helligkeit scheitern unabhängig von ihrer Farbtonbeziehung.
Ist HSL identisch mit der CSS-Funktion hsl()?
Ja. Die CSS-Funktion hsl() nimmt drei Argumente: den Farbton in Grad (0–360), die Sättigung als Prozentsatz und die Helligkeit als Prozentsatz. CSS Color Level 4 akzeptiert auch einen durch Schrägstrich getrennten Alpha-Wert: hsl(240 60% 50% / 0.8). Das von diesem Generator verwendete HSL-Modell entspricht exakt der CSS-Spezifikation — Farbton-, Sättigungs- und Helligkeitswerte können daher direkt in Stylesheets eingefügt werden.