Farbpaletten-Generator

Wählen Sie eine Grundfarbe, und wir schlagen Ihnen nach den Regeln der Farbenlehre passende Farben vor – dazu eine vollständige Skala heller und dunkler Abstufungen (50 bis 950) für Ihre Website oder App.

Grundfarbe

Passende Farben

Farbabstufungen

Klicken Sie auf eine Farbe, um ihren HEX-Code zu kopieren. Der Punkt ● markiert die Stufe, zu der Ihre Grundfarbe passt.

Farbharmonien

Farbharmonien beruhen auf der Position der Farben im Farbkreis. Komplementär nutzt die gegenüberliegende Farbe (180°) für maximalen Kontrast; analog die Nachbarfarben (±30° und ±60°), die ruhig und natürlich wirken; triadisch drei Farben im Abstand von 120°; geteilt komplementär die beiden Nachbarn der Gegenfarbe, leichter auszubalancieren; und tetradisch vier Farben im Abstand von 90°. Monochrom behält den Farbton und variiert die Helligkeit.

Eine klassische Faustregel ist 60-30-10: eine dominante Farbe für 60 % des Designs, eine Sekundärfarbe für 30 % und eine Akzentfarbe für die restlichen 10 %.

Farbabstufungen 50-950

Designsysteme wie Tailwind CSS, Material oder Bootstrap verwenden für jede Farbe eine Skala von 50 (fast Weiß) bis 950 (fast Schwarz): helle Stufen für Hintergründe, mittlere für Schaltflächen und Links, dunkle für Text und aktive Zustände.

Wir berechnen die Palette im Farbraum OKLCH, der wahrnehmungsgleichmäßig ist: Beim Drehen des Farbtons oder Ändern der Helligkeit behalten die Farben dieselbe wahrgenommene Helligkeit – anders als bei HSL, wo ein Gelb und ein Blau mit gleicher „Helligkeit“ sehr unterschiedlich wirken.