𝗙𝗿𝗲𝗲𝗧𝗼𝗼𝗹 DEV

Farbpaletten-Generator

Erstelle harmonische Farbpaletten online. Generiere zufällige oder thematische Farben, sperre deine Favoriten, sieh dir Farbskalen an, überprüfe Kontrast und Farbenblindheitssimulation und exportiere in CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL oder OKLCH.

Klicke auf eine Palette, um sie im Editor zu öffnen

Farbe bearbeiten

Über dieses Tool

Erstelle harmonische Farbpaletten in Sekunden. Durchsuche die Galerie automatisch generierter Paletten oder öffne den Editor, um Variationen zu erstellen, Lieblingsfarben zu sperren, die Anzahl der Farben anzupassen und für deine Projekte zu exportieren. Farben werden im perzeptuellen Okhsl-Farbraum berechnet, der Töne visuell ausgewogen hält und häufige Verzerrungen des traditionellen HSL vermeidet.

Hauptfunktionen

Generiere zufällige oder thematische Paletten — Pastell, Lebhaft, Dunkel, Vintage und Erde
Sperre Lieblingsfarben, generiere neue Variationen und passe die Palettengröße an
Sieh perzeptuelle Farbskalen, überprüfe WCAG-Kontrast und simuliere Farbenblindheit
Exportiere in HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON oder Tailwind und teile per Link

Häufige Anwendungen

  • Neue Paletten und Kombinationen für Interfaces und Design Systems entdecken, mit perzeptuell ausgewogenen und einsatzbereiten Tönen
  • Farbschemata für Präsentationen, Beiträge und Marketingmaterialien mit visueller Harmonie festlegen
  • Farbwerte in HEX, RGB, HSL oder OKLCH direkt ins CSS kopieren, ohne Farben manuell berechnen zu müssen
  • Verschiedene Farbharmonien (analog, monochrom, komplementär, triadisch, tetradisch) bei Interface-Redesigns vor der Fertigstellung testen
  • Kontrastzugänglichkeit prüfen und visualisieren, wie die Palette von farbenblinden Menschen wahrgenommen wird

Anleitung

1

Galerie durchsuchen

Die Seite öffnet sich mit mehreren automatisch generierten Paletten. Wähle zwischen dem zufälligen und thematischen Modus, drücke die Leertaste, um neue Optionen zu generieren, oder klicke auf 'Mehr laden', um die Galerie zu erweitern.

2

Im Editor öffnen

Klicke auf eine Palette, um sie im Editor zu öffnen. Sperre die Farben, die du behalten möchtest, und generiere erneut, um nur die anderen zu variieren.

3

Anpassen und exportieren

Passe die Anzahl der Farben an, sieh dir Farbskalen an, überprüfe Kontrast und Farbenblindheit, und exportiere dann im benötigten Format oder teile per Link.

Technische Hinweise

Einige Details helfen zu verstehen, wie Farben generiert werden und warum sie ausgewogen bleiben:

Farben werden im Okhsl-Raum generiert, der perzeptuell gleichmäßig ist: Die Variation der Helligkeit erzeugt visuell gleichmäßige Stufen, im Gegensatz zu HSL, wo derselbe Helligkeitswert bei Gelb heller erscheint als bei Blau
Ein Klick auf 'Farbskala anzeigen' einer Farbe erzeugt eine Rampe von 50 bis 900, wobei Farbton und Sättigung fixiert bleiben und nur die perzeptuelle Helligkeit variiert — bereit für Design-System-Skalen und als CSS oder Tailwind kopierbar
Die Kontrastprüfung verwendet das WCAG-Verhältnis zwischen der Farbe und dem lesbaren Text darauf; das AA-Abzeichen zeigt ein Verhältnis von mindestens 4,5:1 an
Die Farbenblindheitssimulation ist eine Annäherung zur schnellen Überprüfung und ersetzt keine Tests mit echten Nutzern

Häufige Fragen

Wie erstelle ich eine Farbpalette?

Die Seite öffnet sich bereits mit mehreren automatisch generierten Paletten. Drücke die Leertaste (oder den Button Neue generieren), um mehr zu erstellen, oder wähle ein Thema wie Pastell oder Dunkel. Ein Klick auf eine Palette öffnet den Editor, um Farben zu sperren und nach Belieben anzupassen.

Was ist der Unterschied zwischen dem zufälligen und dem thematischen Modus?

Im zufälligen Modus können Farben von jedem Punkt des Spektrums stammen. Im thematischen Modus ist die Generierung auf ein bestimmtes Erscheinungsbild ausgerichtet — Pastell verwendet helle und sanfte Farben, Dunkel verwendet Töne mit geringer Helligkeit, Vintage verwendet gealterte und entsättigte Töne und so weiter.

Was ist der Okhsl-Farbraum und warum ist er wichtig?

Okhsl ist ein perzeptuell gleichmäßiges Farbmodell. In der Praxis bedeutet dies, dass das Anpassen der Helligkeit einer Farbe Veränderungen erzeugt, die das Auge als gleichmäßige Stufen wahrnimmt, was zu ausgewogeneren Paletten und Tönen als beim traditionellen HSL führt — besonders beim Vergleich sehr unterschiedlicher Farben wie Gelb und Blau.

Wie speichere oder teile ich eine Palette?

Im Editor kopiert der Button Teilen einen Link mit den in der URL kodierten Farben. Wer diesen Link öffnet, sieht genau dieselbe Palette im Editor. Du kannst die Farben auch als CSS, SCSS, JSON, Tailwind oder als HEX-Liste exportieren.

Siehe auch