Farbpaletten-Generator
Geh von deiner Markenfarbe aus und erhalte eine vollständige, wahrnehmungsgleichmäßige Skala von 50 bis 950 für dein Designsystem – samt harmonischer Kombinationen. Die Originalfarbe bleibt in ihrer passenden Stufe exakt erhalten.
Zu 100 % in deinem Browser verarbeitet
Wie kann ich das prüfen?
Deine Dateien werden nie hochgeladen: Sie werden auf deinem Gerät verarbeitet. Prüfe es selbst: Lade die Seite, schalte das WLAN aus, und das Tool funktioniert weiter. Oder öffne die Entwicklertools des Browsers (F12), Reiter „Netzwerk“, und sieh, dass keine Datei dein Gerät verlässt.
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Gib deine Basisfarbe in beliebigem Format ein oder klicke auf „Zufällig“.
- 2Benenne die Palette (z. B. „brand“ oder „primary“).
- 3Wähle eine Harmonie, um passende Farben zu sehen.
- 4Exportiere die Skala als CSS-Variablen, Tailwind, SCSS oder JSON oder klicke auf einen Ton, um ihn zu kopieren.
Anwendungsfälle
- Die Farbskala eines Designsystems oder Tailwind-CSS-Themes erstellen.
- Hover-Zustände, sanfte Hintergründe und Rahmen aus einer Markenfarbe ableiten.
- Passende Sekundär- und Akzentfarben finden.
- Eine Palette per Link mit dem Team teilen.
Häufig gestellte Fragen
Warum wird die Skala in OKLCH statt HSL berechnet?
In HSL wirken Gelb und Blau mit gleicher „Helligkeit“ sehr unterschiedlich. OKLCH ist wahrnehmungsbasiert: Jede Stufe hat unabhängig vom Farbton dieselbe sichtbare Helligkeit – wie die Paletten von Tailwind CSS v4.
Was bedeuten die Zahlen 50 bis 950?
Die Konvention moderner Designsysteme: 50 ist der hellste Ton (Hintergründe), 500–600 sind meist die Hauptfarben (Buttons), 900–950 die dunkelsten (Text).
Erscheint meine Originalfarbe in der Palette?
Ja. Sie wird exakt in die Stufe mit der ähnlichsten Helligkeit gesetzt (mit Punkt markiert), die übrigen Töne werden mit demselben Farbton darum herum erzeugt.
Wie nutze ich die Palette in Tailwind CSS?
Mit Tailwind v4 fügst du den @theme-Block in dein CSS ein; mit Tailwind v3 ergänzt du das Objekt unter theme.extend.colors in tailwind.config.js. Danach nutzt du Klassen wie bg-brand-500 oder text-brand-900.