Color Palette Generator — Free Online Tool

Ein Farbpaletten-Generator verwandelt eine einzelne Basisfarbe in produktionsreife Paletten (komplementär, analog, triadisch, gespalten-komplementär), die Sie direkt in CSS oder JSON einfügen können. SWEDevTools: Prism generiert Paletten mittels OKLCH-Farbtonrotation für wahrnehmungsmäßig gleichmäßigere Stufen als naive HSL-Verschiebungen und unterstützt Ausgabe als HEX-Listen, CSS-Variablen oder strukturiertes JSON — alles lokal in Ihrem Browser.

Features

• OKLCH-basierte Palettengenerierung: Verwendet OKLCH-Farbtonrotation, um die wahrgenommene Helligkeit konsistenter zu halten als einfache HSL-Rotationen.
• Mehrere Palettenstrategien: Generieren Sie komplementäre, analoge, triadische und gespalten-komplementäre Schemata aus einer Basisfarbe.
• Entwicklerfreundliche Ausgaben: Ausgabe als HEX-Werte, CSS-Variablen oder JSON für Design-Token-Pipelines.
• Standardmäßig privat: Läuft lokal im Browser, sodass Markenfarben und Kundenarbeiten Ihr Gerät nie verlassen.

Frequently Asked Questions

Welche Farbformate kann ich einfügen?

Sie können gängige CSS-Farbformate wie #RRGGBB HEX, rgb(), hsl() und viele benannte CSS-Farben einfügen. Das Tool verwendet die erste Zeile als Basisfarbe.

Welche Palettentypen werden generiert?

Komplementär, analog, triadisch und gespalten-komplementär. Sie können einen einzelnen Typ oder alle zusammen generieren.

Kann ich CSS-Variablen für Theming exportieren?

Ja. Wählen Sie die CSS-Variablen-Ausgabe, um einen :root-Block zu generieren, den Sie in Ihre App einfügen und auf Tokens wie --color-base und --color-analogous-1 abbilden können.

Prüft es WCAG-Kontrast automatisch?

Derzeit nicht. Für Barrierefreiheit kombinieren Sie die generierte Palette mit einem Kontrastprüfer und validieren Sie wichtige Vordergrund-/Hintergrundkombinationen (z. B. Text auf Primärfarbe).

Ist OKLCH besser als HSL für Paletten?

Oft ja für UI-Arbeit — OKLCH ist darauf ausgelegt, wahrnehmungsmäßig einheitlich zu sein, sodass Farbtonrotationen tendenziell konsistentere Stufen erzeugen als einfache HSL-Verschiebungen.

Kann ich Tokens für ein Design-System generieren?

Verwenden Sie die JSON-Ausgabe und bilden Sie sie dann auf Ihr Token-Format ab (Style Dictionary, Tailwind-Theme-Farben, CSS-Variablen oder einen benutzerdefinierten Build-Schritt).

Funktioniert es mit mehreren Eingabezeilen?

Dieses Tool generiert eine Palette nur aus der ersten Zeile. Wenn Sie mehrere Markenfarben haben, führen Sie es einmal pro Basisfarbe aus und bewahren Sie die Ausgaben in Ihrem Token-Repository auf.

Werden meine Farben irgendwohin hochgeladen?

Nein. Der Generator läuft vollständig in Ihrem Browser für Datenschutz und Geschwindigkeit.

Was ist mit smalldev.tools passiert?

smalldev.tools ist nicht mehr verfügbar. Prism von SWEDevTools bietet dieselben Entwicklertools und mehr, mit Offline-Unterstützung, Pipeline-Verkettung und völlig kostenloser Nutzung — keine Registrierung erforderlich.

Ist Prism eine gute Alternative zu coolors.co für Farbtools?

Ja. Prism konvertiert Farben und generiert Paletten vollständig offline in Ihrem Browser. Keine Registrierung, keine Werbung, und Sie können Farbtools mit anderen Prism-Werkzeugen in Pipelines verketten.