Farbpaletten-Generator

Farbpaletten auf fünf verschiedene Arten generieren

Dieser Farbpaletten-Generator ersetzt gleich mehrere separate Werkzeuge. Klicken Sie auf Generieren für eine zufällige Farbpalette, wählen Sie eine Farbharmonie ausgehend von einer Basisfarbe, extrahieren Sie Farben aus einem Bild oder Foto, erweitern Sie einen einzelnen Hex-Code zu einem vollständigen Schema, oder wandeln Sie einen Farbnamen oder ein Wort in eine reproduzierbare Palette um. Stellen Sie die Anzahl auf 3–10 ein, sperren Sie die gewünschten Farben und generieren Sie den Rest neu — ohne Konto und ohne Ihren Browser zu verlassen.

Klicken Sie auf ein beliebiges Farbfeld, um den Wert zu kopieren, wechseln Sie zwischen HEX, RGB und HSL, und ziehen Sie Farbfelder zum Neuanordnen. Drücken Sie Leertaste, um sofort eine neue Palette zu generieren — derselbe Workflow, den Coolors populär gemacht hat, hier kostenlos und ohne Paywall.

Farben aus Bild, Hex-Code oder Name extrahieren

Aus einem Bild: Ziehen Sie ein Foto hinein und das Tool analysiert es auf einem versteckten HTML5-Canvas mit einem Median-Cut-Algorithmus, um die dominanten Farben zu extrahieren — nützlich, um eine Palette an ein Produktfoto, ein Markenbild oder ein Moodboard anzupassen. Das Bild bleibt auf Ihrem Gerät und wird niemals auf einen Server hochgeladen. Coolors berechnet Pro-Abonnenten für diese Funktion; hier ist sie kostenlos.

Aus einem Hex-Code: Fügen Sie eine Markenfarbe ein und behalten Sie sie als Anker, während der Generator analoge, komplementäre und Töne/Schatten-Varianten darum herum erstellt. Aus einem Namen: Tippen Sie ein beliebiges Wort ein und ein deterministischer Hash bildet die Palette, sodass derselbe Name immer dieselben Farben erzeugt — eine zuverlässige Offline-Alternative zu KI-basierten Palettengeneratoren, die bei jedem Aufruf andere Ergebnisse liefern.

Farbharmonien auf Basis echter Farbtheorie

Der Harmonie-Modus wendet Farbtheorie an, indem er den Farbton um das Farbrad dreht. Komplementärfarben liegen 180° voneinander entfernt für starken Kontrast; analoge Farben bleiben innerhalb von ±30° für ein ruhiges, einheitliches Erscheinungsbild; triadisch verwendet drei Farbtöne im 120°-Abstand; tetradisch verwendet vier bei 90°; Split-Komplementär mildert den Kontrast bei 150°/210°; und monochrom behält einen Farbton bei und variiert die Helligkeit in der Palette.

Jede generierte Farbe wird auch mit einer vollständigen Tint- und Shade-Skala von 50 bis 900 geliefert — die helleren und dunkleren Stufen, die für Hover-Zustände, Rahmenfarben und Hintergrundvarianten in einem echten UI-Design-System benötigt werden.

UtiloKit im Vergleich zu Coolors, Adobe Color und Paletton

Coolors ist das beliebteste Palettentools mit einem hervorragenden Sperr-und-Regenerieren-Workflow und einer großen Community. Coolors Pro (4 $/Monat) versteckt Bildextraktion, erweiterten Export und Palettenverlauf hinter einer Paywall. Der native Tailwind-Export ist nicht im kostenlosen Tarif enthalten. Adobe Color bietet gute WCAG-Barrierefreiheitsprüfung und Farbharmonie-Visualisierung, aber das Speichern von Paletten erfordert ein kostenloses Adobe-Konto, und es sind mehr Klicks bis zum Export nötig.

Paletton ist stark in der Farbtheorie, zeigt aber nur vier Harmonietypen und enthält keine Bildextraktion. UtiloKit kombiniert die Stärken aller drei — Coolors-artiges Sperren, Adobe Colors WCAG-Panel, Bildextraktion und Tailwind/SCSS-Export — ohne Konto, ohne Paywall und ohne Werbung im Tool.

Favoriten sperren und weiter iterieren

Gute Paletten entstehen durch Iteration, nicht durch eine einmalige Generierung. Sperren Sie ein Farbfeld, und es bleibt bestehen. Alles Entsperrte wird neu generiert, wenn Sie auf Generieren klicken oder die Leertaste drücken. Behalten Sie die dominante Farbe, die Ihnen gefällt, mischen Sie die Akzente und verfeinern Sie weiter, bis die gesamte Palette stimmt — dann gehen Sie direkt zum Export.

Sie können mehrere Farben gleichzeitig sperren. Sperren Sie die Primärfarbe Ihrer Marke und einen neutralen Hintergrund, dann lassen Sie das Tool Akzente vorschlagen. Sperren Sie diese Akzente, wenn Sie passende gefunden haben, und regenerieren Sie die unterstützenden Töne. Das ahmt nach, wie Designer Paletten manuell erstellen — nur viel schneller.

Export nach CSS, Tailwind, SCSS, JSON, PNG und teilbarem Link

Wenn die Palette fertig ist, exportieren Sie in dem Format, das Ihr Projekt benötigt. CSS erzeugt einen :root-Block mit benutzerdefinierten Eigenschaften. Tailwind erzeugt ein theme.extend.colors-Objekt zum Einfügen in tailwind.config.js. SCSS erzeugt $Variablen-Deklarationen, kompatibel mit Sass. JSON listet jede Farbe in HEX, RGB und HSL für JavaScript oder Design-Token-Pipelines. Laden Sie ein PNG-Farbmuster für ein Markendokument oder eine Präsentation herunter. Kopieren Sie einen teilbaren Link, der die Palette in der URL codiert, damit ein Teammitglied genau das sieht, was Sie sehen.

Eingebaute WCAG-Kontrastprüfung

Eine Palette ist erst fertig, wenn der Text darauf lesbar ist. Das Kontrast-Panel zeigt das WCAG-Kontrastverhältnis jeder Farbe gegenüber weißem und schwarzem Text mit AA- und AAA-Bestanden/Nicht-bestanden-Badges. WCAG 2.1 AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text. AAA erfordert 7:1 für normalen Text. Die meisten Palette-Tools überspringen diesen Schritt oder verstecken ihn hinter einem Premium-Tarif — hier ist er integriert und läuft in Echtzeit, während Sie Farbfelder generieren oder ändern.

Keine Anmeldung, kein Upload, nichts verlässt Ihren Browser. Jede Paletten-Operation — zufällige Generierung, Bildextraktion, Harmonieberechnung, Kontrastprüfung und Export — läuft in lokalem JavaScript. Setzen Sie ein Lesezeichen für diesen kostenlosen Farbpaletten-Generator für Webdesign, Markenidentität, Illustration, Präsentationen und saisonale oder Hochzeitspaletten.