Farbpaletten-Generator
Harmonische Farbpaletten per Leertaste. Farben sperren, Harmonie wählen, Kontrast prüfen und als CSS exportieren.
Im Editor öffnenTints & Shades
Hellere und dunklere Abstufungen einer Farbe. Export als HEX, RGB, HSL oder CSS-Variablen.
Generator öffnenLäuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.
Mit einem Preset starten
Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.
Worum geht’s?
Tints sind Aufhellungen einer Farbe, Shades sind Abdunklungen. Zusammen ergeben sie eine Abstufung für Hover-Zustände, Hintergründe und Rahmen.
So geht’s
Wähl eine Grundfarbe, leg die Anzahl Aufhellungen und Abdunklungen fest und kopier die Werte als HEX, RGB, HSL oder CSS-Variablen.
Tints & Shades jetzt ausprobierenHäufige Fragen
- Was ist der Unterschied zwischen Tint und Shade?
- Ein Tint entsteht, wenn du eine Farbe mit Weiss mischst, ein Shade, wenn du sie mit Schwarz mischst.
- Welche Methode soll ich wählen?
- Die OKLCH-Methode ändert nur die Helligkeit und behält die Farbigkeit, so bleiben Abstufungen lebendig. Mischen in OKLab wirkt gleichmässig, Mischen in sRGB entspricht klassischen Werkzeugen wie Sass.
- Wie verwende ich die CSS-Variablen?
- Kopier den Block in dein Stylesheet und nutz die Farben mit var(), zum Beispiel var(--primary-tint-2).
Fertige Farbpaletten
Über 30 Paletten nach Stimmung, mit HEX-, RGB- und OKLCH-Werten zum Kopieren.
Zur PalettensammlungPassende Generatoren
Alle Generatoren in Farben
Tailwind-Farbpalette
Aus einer Farbe die elf Tailwind-Stufen 50 bis 950. Export für tailwind.config.js, @theme, OKLCH und HEX.
Im Editor öffnen
Palette aus Bild
Zieh ein Foto hinein und erhalte seine wichtigsten Farben mit Anteil in Prozent. Das Bild bleibt in deinem Browser.
Im Editor öffnen