Farbpaletten-Generator — harmonische Paletten, frei oder aus einem Foto
Drück die Leertaste für eine neue Palette, fixiere die Farben, die dir gefallen, wähle eine Harmonie oder hol dir die Palette aus einem Foto. Export als CSS, Tailwind, SCSS, JSON oder PNG.
Klicke auf ein Farbfeld, um es auszuwählen, auf das Schloss, um es beim Generieren zu behalten, auf den Stift, um eine neue Farbe zu wählen, und auf den Code, um ihn zu kopieren.
| HEX | RGB | HSL | |
|---|---|---|---|
| #264653 | rgb(38, 70, 83) | hsl(197, 37%, 24%) | |
| #2a9d8f | rgb(42, 157, 143) | hsl(173, 58%, 39%) | |
| #e9c46a | rgb(233, 196, 106) | hsl(43, 74%, 66%) | |
| #f4a261 | rgb(244, 162, 97) | hsl(27, 87%, 67%) | |
| #e76f51 | rgb(231, 111, 81) | hsl(12, 76%, 61%) |
:root {
--color-1: #264653;
--color-2: #2a9d8f;
--color-3: #e9c46a;
--color-4: #f4a261;
--color-5: #e76f51;
}
Palette aus einem Bild
Lade ein Foto hoch, um seine dominanten Farben in die nicht gesperrten Farbfelder zu übernehmen, und klicke dann irgendwo ins Bild, um ein exaktes Pixel in das ausgewählte Farbfeld (Farbe 1) zu übernehmen. Das Bild bleibt auf deinem Gerät.
Paletten werden in deinem Browser erzeugt, und hochgeladene Bilder verlassen dein Gerät nie. Alle kostenlosen Tools ansehen.
Ein Problem gefunden oder etwas, das besser sein könnte? Wir lesen jede Nachricht und beheben Fehler schnell.
Dieser kostenlose Farbpaletten-Generator stellt 2 bis 10 Farben zusammen, die miteinander harmonieren. Drück die Leertaste (oder „Generieren“) für eine neue Palette, fixiere die Farbfelder, die du behalten willst, und generiere weiter, bis der Rest passt. Wähle eine Harmonie wie analog, komplementär oder triadisch, oder lade ein Foto hoch und übernimm seine dominanten Farben direkt in die Palette. Jedes Farbfeld zeigt seine HEX-, RGB- und HSL-Werte sowie die Textfarbe, Schwarz oder Weiß, die darauf lesbar bleibt.
Die meisten Generatoren drehen den Farbton in HSL. Das ergibt Paletten, in denen das Gelb grell leuchtet und das Blau absäuft, denn die HSL-Helligkeit hat nichts damit zu tun, wie hell eine Farbe wirkt. Dieser hier berechnet Harmonien in OKLCH, einem wahrnehmungsbasierten Farbraum, in dem gleiche Helligkeit auch gleich hell aussieht, und verteilt dann die Helligkeit so, dass jede Palette dunkle, mittlere und helle Töne hat, die du tatsächlich für Text, Hintergründe und Akzente nutzen kannst. Ob eine Palette zu deiner Marke passt, kann er dir nicht sagen. Das bleibt deine Entscheidung, und der unten verlinkte Kontrast-Checker zeigt dir, welche Paare lesbar sind.
So funktioniert’s
- Drück die Leertaste oder die Schaltfläche „Generieren“, um eine Palette zu erstellen. Mit − und + wählst du zwischen 2 und 10 Farben.
- Wähle eine Harmonie aus dem Menü. „Zufällig“ liefert abwechslungsreiche, aber ausgewogene Sets; die anderen folgen klassischen Farbkreis-Regeln.
- Klicke auf das Schloss bei jedem Farbfeld, das dir gefällt, und generiere weiter: Fixierte Farben bleiben, und die Harmonie wird um die erste fixierte Farbe herum neu aufgebaut.
- Klicke auf den Stift, um eine Farbe von Hand zu wählen, oder gib im Editor unter der Leiste einen HEX-Wert ein. Um von einem Foto auszugehen, lade es unter „Palette aus einem Bild“ hoch und klicke ins Bild, um exakte Pixel aufzunehmen.
- Exportiere die Palette als CSS-Variablen, Tailwind-Konfiguration, SCSS oder JSON, lade ein PNG herunter oder kopiere den Teilen-Link.
Häufige Fragen
Wie erstelle ich eine Farbpalette?
Drück auf dieser Seite die Leertaste. Jeder Druck erzeugt eine neue Palette nach der gewählten Harmonie. Sieht eine Farbe richtig aus, fixiere sie mit dem Schloss und drück weiter: Nur die nicht fixierten Farbfelder ändern sich, und die neuen Farben werden so gewählt, dass sie mit der fixierten harmonieren. Fünf Farben sind ein guter Standard für eine Website: eine dunkle für Text, eine helle für Hintergründe, eine Primär-, eine Sekundär- und eine Akzentfarbe.
Was sind Komplementär-, analoge und triadische Farben?
Das sind Positionen auf dem Farbkreis. Komplementärfarben liegen einander gegenüber (180 Grad auseinander) und ergeben den stärksten Kontrast. Analoge Farben sind Nachbarn, etwa 30 Grad auseinander, und wirken ruhig und stimmig. Triadische Farben sind drei Farbtöne im Abstand von 120 Grad; geteilt komplementär nutzt einen Grundton plus die beiden Töne links und rechts von seinem Gegenüber (150 und 210 Grad); tetradisch oder quadratisch nutzt vier Töne im Abstand von 90 Grad. Monochrom behält einen Farbton bei und variiert Helligkeit und Sättigung.
Kann ich eine Farbpalette aus einem Bild erstellen?
Ja. Lade unter „Palette aus einem Bild“ ein Foto hoch. Das Tool verkleinert es auf höchstens 200 Pixel, was Rauschen herausmittelt, und gruppiert die Pixel per k-Means-Clustering im OKLab-Farbraum – das Ergebnis spiegelt also die Farben wider, die du siehst, statt bloßer Pixelzahlen. Die größten Cluster füllen deine nicht fixierten Farbfelder, und der Anteil des Bildes, den jede Farbe abdeckt, wird angezeigt. Klicke an eine beliebige Stelle im Bild, um genau ein Pixel in das ausgewählte Farbfeld zu übernehmen. Das Bild verlässt deinen Browser nie.
Wie nutze ich eine Palette in CSS oder Tailwind?
Wähle den Export als CSS-Variablen und füge den :root-Block in dein Stylesheet ein; dann nutzt du die Farben als var(--color-1) und so weiter. Der Tailwind-Export ist ein theme.extend.colors-Block, der palette-1 bis palette-N hinzufügt, sodass du bg-palette-1 oder text-palette-3 schreiben kannst. Benenne die Variablen nach ihrer Rolle um (primary, surface, text), sobald du entschieden hast, wofür jede Farbe da ist; Namen wie color-3 überleben kein Redesign.
Warum nutzt dieser Generator OKLCH statt HSL?
Weil die HSL-Helligkeit nicht der wahrgenommenen Helligkeit entspricht. In HSL haben reines Gelb und reines Blau beide 50 Prozent Helligkeit, doch Gelb wirkt etwa so hell wie ein helles Grau und Blau fast schwarz. Dreht man den Farbton in HSL, entstehen daher Sets mit unausgewogener Helligkeit. OKLCH, definiert in CSS Color Level 4 und von allen aktuellen Browsern unterstützt, trennt Helligkeit, Chroma und Farbton, sodass die wahrgenommene Helligkeit beim Drehen des Farbtons gleich bleibt. Farben außerhalb des sRGB-Bereichs werden durch Senken des Chromas zurückgeholt, Farbton und Helligkeit bleiben erhalten.
Kann ich eine Palette teilen oder speichern?
Kopiere den Teilen-Link: Er enthält die Farben in der Adresse (zum Beispiel ?colors=264653-2a9d8f-e9c46a), sodass jeder, der ihn öffnet, dieselbe Palette sieht, und du kannst ihn als Lesezeichen speichern. Auf einem Server wird nichts gespeichert. Du kannst auch ein PNG der Farbfelder mit ihren HEX- und RGB-Werten für ein Moodboard oder eine E-Mail an Kunden herunterladen.
Aus einer Palette ein nutzbares UI-Farbsystem machen
Eine Palette aus fünf hübschen Farben ist noch kein Designsystem. Eine Website braucht Rollen: eine Textfarbe mit mindestens 4,5:1 Kontrast zum Hintergrund, einen Hintergrund und eine leicht abweichende Fläche für Karten, eine Primärfarbe für Buttons und Links und einen sparsam eingesetzten Akzent. Die 60-30-10-Regel aus der Innenarchitektur ist ein vernünftiger Ausgangspunkt: etwa 60 Prozent neutraler Hintergrund, 30 Prozent Sekundärfarbe, 10 Prozent Akzent.
• Text: die dunkelste Farbe oder ein Fast-Schwarz, leicht in deinem Primärton eingefärbt. Reines #000 auf reinem #fff ist härter als nötig.
• Hintergrund und Fläche: die hellste oder die zwei hellsten Farben. Viele generierte Paletten enthalten eine; falls nicht, fixiere deine Primärfarbe und wechsle zu „Monochrom“, um helle Abstufungen davon zu erhalten.
• Primärfarbe: die Farbe, die „Klick mich“ sagt. Prüfe, ob weißer oder schwarzer Text darauf 4,5:1 erreicht (die lesbare Textfarbe auf jedem Farbfeld ist ein schneller erster Check, der Kontrast-Checker der richtige).
• Akzent: die gesättigtste Farbe, für Hervorhebungen und Badges, nicht für große Flächen.
Erzeuge dann hellere und dunklere Abstufungen der Primärfarbe (heller für Hover-Hintergründe, dunkler für gedrückte Zustände), statt neue Farbtöne einzuführen. Fixierst du die Primärfarbe und wechselst zu „Monochrom“ mit 7 bis 10 Farben, bekommst du genau diese Abstufung.
Harmonie-Modi und wann sie funktionieren
• Analog: benachbarte Farbtöne. Ruhig, natürlich, schwer falsch zu machen. Gut für Content-Websites, Wellness- und Food-Marken. Braucht ein kontrastierendes Neutral für Text.
• Monochrom: ein Farbton, viele Helligkeitsstufen. Die sicherste Wahl für Dashboards und Apps, in denen Farbe Daten unterstützen und nicht mit ihnen konkurrieren soll.
• Komplementär: zwei gegenüberliegende Farbtöne. Maximaler Kontrast und viel Energie; nutze einen als Hauptfarbe und den anderen nur für Calls-to-Action, sonst sieht es aus wie ein Sporttrikot.
• Geteilt komplementär: ein Farbton plus die beiden neben seinem Gegenüber. Fast so lebendig wie komplementär, aber mit weniger Spannung; ein guter Standard für Marketing-Websites.
• Triadisch und tetradisch: drei oder vier gleichmäßig verteilte Farbtöne. Verspielt und bunt, passend für Kinderprodukte, Spiele und Illustration. Lass einen Farbton dominieren und halte die anderen klein.
• Zufällig (angenehm): Die Farbtöne wandern von Farbfeld zu Farbfeld um 20 bis 70 Grad, die Helligkeit ist über das Set verteilt. Gut zum Erkunden, bevor du dich auf eine Regel festlegst.
So funktioniert die Farbextraktion aus einem Bild
Das hochgeladene Bild wird auf ein Canvas gezeichnet, das an der langen Seite höchstens 200 Pixel misst. Das Verkleinern mittelt benachbarte Pixel und entfernt so JPEG-Rauschen und feine Texturen, die sonst Dutzende fast identischer Farben erzeugen würden. Vollständig transparente Pixel werden ignoriert.
Die übrigen Pixel werden in OKLab umgerechnet und per k-Means-Clustering gruppiert, wobei k die Anzahl der Farbfelder ist. Die Startzentren werden nach einer festen Regel gewählt (das Pixel, das der Durchschnittsfarbe des Bildes am nächsten liegt, dann wiederholt das Pixel, das von allen bisherigen Zentren am weitesten entfernt ist). So liefert dasselbe Bild immer dieselbe Palette, und kleine, aber markante Bereiche wie eine rote Jacke in einer grünen Landschaft gehen nicht verloren. Der Durchschnitt jedes Clusters wird zu einem Farbfeld, sortiert danach, wie viel des Bildes er abdeckt.
Die Extraktion findet die Farben, die vorhanden sind – nicht unbedingt die, mit denen du gestalten würdest. Fotos werden von gedämpften Mitteltönen dominiert, fixiere also die ein oder zwei Farben, die das Bild ausmachen, und generiere den Rest, oder klicke ins Bild, um ein bestimmtes Highlight aufzunehmen.
Ähnliche kostenlose Tools
- Kontrast-Checker — Prüfe Text- und Hintergrundfarben nach WCAG 2.x AA und AAA, sieh den APCA-Lc-Wert und erhalte die nächstgelegene Farbe, die besteht.
- Farbwähler & Konverter — Nimm eine beliebige Farbe von irgendwo auf deinem Bildschirm auf oder rechne sofort zwischen HEX, RGB und HSL um.
- CSS-Gradient-Generator — Erstelle lineare, radiale und konische Farbverläufe mit verschiebbaren Farbstopps, Winkelrad und Vorlagen. Kopiere das CSS oder eine Tailwind-Klasse.
- Box-Shadow-Generator — Gestalte mehrschichtige box-shadow- und text-shadow-Effekte mit Live-Vorschau und Vorlagen für Elevation, Neumorphismus und Glow, und kopiere das CSS.