Farben
verwalten
Wähle eine Basisfarbe im Kreis, stelle die Helligkeit ein und erzeuge daraus harmonische Paletten mit Vorschauseiten.
So benutzt du den Farbkreis
Dieser Generator hilft dir, eine stimmige Farbpalette für eine Webseite zu finden – ohne Design-Vorwissen. Starte mit einer Farbe, wähle eine Paletten-Logik und prüfe unten die Vorschau.
Klicke in den Kreis. Außen ist die Farbe kräftiger, näher zur Mitte wird sie ruhiger und grauer.
Der Regler unter dem Kreis macht die Farbe dunkler oder heller. Für Webseiten sind mittlere Werte meist am besten lesbar.
Analog wirkt ruhig, Komplementär kontrastreich, Triadisch lebendig und Monochrom besonders sauber.
Nutze die kleinen Beispielseiten, um zu sehen, ob die Farben als Hintergrund, Button und Akzent funktionieren.
Wichtig: Für echte Webseiten zählt nicht nur Schönheit, sondern auch Lesbarkeit. Heller Text braucht dunklen Hintergrund – dunkler Text braucht hellen Hintergrund.
Beispiele aus dem Farbkreis
Die Karten entstehen automatisch aus derselben Farblogik. Klicke auf einzelne Farbfelder, um den HEX-Wert zu kopieren.
Farbschema aus deinem Bild
Lade ein Bild hoch, wähle die gewünschte Anzahl an Farben und erhalte eine Website-Palette mit Grundfarbe, Sekundärfarbe, Akzentfarbe, Hintergrund und Textfarbe.
Vorgeschlagene Website-Farben
Lade ein Bild hoch, um die Palette zu berechnen.
Website-Vorschau
Eine klare visuelle Richtung für deine Webseite
Die dominanten Bildfarben werden in ein nutzbares Interface-System übersetzt: Hintergrund, Text, Primäraktion, Sekundärflächen und Akzente.
Für Navigation, Buttons und markante Elemente.
Für Karten, Flächen und visuelle Abwechslung.
Für CTAs, Links und kleine Highlights.
CSS Variablen
.dein-bereich {
--color-bg: #f6f7f9;
--color-text: #172033;
--color-primary: #3b82f6;
--color-secondary: #dbeafe;
--color-accent: #f59e0b;
}