Tint-, Tone- & Shade-Generator
Erzeugen Sie zehn hellere Tints, zehn dunklere Shades und zehn grau-gemischte Tones aus jeder Basisfarbe. Klick auf eine Kachel kopiert ihren Hex-Wert.
Tints, Tones und Shades — wo liegt der Unterschied?
Alle drei sind Ableitungen einer Grundfarbe, ziehen sie aber in unterschiedliche Richtungen. Ein Tint ist die Grundfarbe, gemischt mit Weiß, und ergibt eine hellere, weichere Variante — denk an Pastell. Ein Shade ist die Grundfarbe gemischt mit Schwarz und liefert eine dunklere, dramatischere Variante. Ein Tone ist die Grundfarbe gemischt mit Grau, was Sättigung und Intensität senkt, ohne sich heller oder dunkler festzulegen — ideal für gedämpfte, sophistizierte Paletten. Zusammen bilden sie ein vollständiges Vokabular für monochromatische Skalen.
So nutzen Sie diesen Generator
Wähle eine Grundfarbe oder füge einen Hex-Code ein. Die Seite erzeugt zehn gleichmäßig verteilte Tints (Reihen werden heller), zehn Tones (Reihen werden gedämpfter) und zehn Shades (Reihen werden dunkler). Der Prozentsatz auf jedem Feld ist der Mischanteil mit der Zielfarbe (Weiß, Grau oder Schwarz). Klicke auf ein Feld, um seinen Hex-Code zu kopieren — praktisch für eine Design-Token-Tabelle oder eine Tailwind-Konfig.
Skalen bauen, die in der Produktion funktionieren
Liefere nicht alle 30 Farbfelder aus — Designer brauchen diese Granularität selten. Wähle 5–7 gut verteilte Stufen und benenne sie wie eine typografische Skala (50, 100, 200… 900), damit Entwickler vorhersagen können, wo ein neuer Farbslot landen wird. Kombiniere Tints und Shades für Hintergründe und Akzente; greife zu Tones, wenn du gedämpfte UI-Akzente brauchst, die nicht mit der Markenfarbe konkurrieren. Prüfe stets den Kontrast gegen die Oberfläche, auf der du sie nutzen willst — hellere Tints fallen häufig bei WCAG gegen weiße Flächen durch, dunklere Shades gegen schwarze.
Wie jede Variante berechnet wird
Jede Ausgabe ist eine lineare Interpolation im sRGB-Raum: tint(c, t) = mix(c, weiß, t), shade(c, t) = mix(c, schwarz, t), tone(c, t) = mix(c, grau, t), wobei mix(a, b, t) = a·(1−t) + b·t kanalweise angewendet wird. Wir wählen elf gleichmäßig verteilte t-Werte von 1/11 bis 10/11 und lassen die Grundfarbe selbst aus dem Streifen heraus — ihre Position ergibt sich implizit zwischen dem stärksten Tint und dem stärksten Shade.
Wann welches passt
Tints sind die richtige Wahl für Hover-Hintergründe, sanfte Callouts und Pastell-Illustrationen — sie wärmen ein Layout und signalisieren Ruhe. Shades gehören in aktive Zustände, tiefe Header und Akzentbereiche — sie projizieren Schwere und Gewicht. Tones sind die Geheimwaffe für Editorial-Design, Museumsseiten und jede Palette, die maßvoll statt knallig wirken soll; sie schlagen die Brücke zwischen Marke und Neutralität, ohne eine der beiden zu nivellieren.