Farbtöne und Schattierungen
Der Tints-and-Shades-Generator erstellt hellere Abstufungen (mit Weiß gemischt) und dunklere Abstufungen (mit Schwarz gemischt) jeder Grundfarbe in 5, 10 oder 20 Stufen – mit Ausgabe als CSS-Variablen.
Über dieses Tool
Der Tints-and-Shades-Generator erstellt hellere Abstufungen (mit Weiß gemischt) und dunklere Abstufungen (mit Schwarz gemischt) jeder Grundfarbe in 5, 10 oder 20 Stufen – mit Ausgabe als CSS-Variablen.
So funktioniert’s
- Wähle eine Grundfarbe.
- Wähle 5, 10 oder 20 Stufen.
- Klicke auf ein Farbfeld, um seinen Hex-Wert zu kopieren.
- Klicke auf „Als CSS-Variablen kopieren“, um die ganze Skala zu exportieren.
Gut zu wissen
- Ein Tint ist eine mit Weiß gemischte Farbe, ein Shade eine mit Schwarz gemischte Farbe.
- Der Generator mischt in gleichen RGB-Schritten, sodass sich die Farbe mit jeder Stufe um denselben Betrag ändert.
- Designsysteme wie Tailwind nutzen eine Skala von 50–900, die aus Tints und Shades jeder Markenfarbe besteht.
- Prüfe den Kontrast bei Textfarben aus einer Skala, denn mittlere Stufen fallen auf Weiß oft bei WCAG AA durch.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Was ist der Unterschied zwischen einem Tint und einem Shade?
Ein Tint hellt eine Farbe durch Zugabe von Weiß auf, ein Shade dunkelt sie durch Zugabe von Schwarz ab. Ein Tone fügt Grau hinzu.
Wie viele Abstufungen sollte eine Farbe im Designsystem haben?
Üblich sind etwa 10 Stufen, zum Beispiel 50, 100 … 900 in Tailwind. Das bietet genug Spielraum für Hintergründe, Rahmen, Text und Hover-Zustände.
Wie verwende ich die Skala in CSS?
Kopiere die Skala als Custom Properties und referenziere sie mit var(--color-name), zum Beispiel für Hintergründe, Rahmen oder Hover-Zustände.
Warum wirken manche Tints verwaschen?
Das Mischen mit Weiß senkt die Sättigung und erhöht gleichzeitig die Helligkeit. Für kräftigere helle Varianten passe die Sättigung separat in HSL an.