palette Farbton-Skalen-Generator (Tints & Shades) star

Wie die Skala aufgebaut wird

Die Farbtheorie definiert drei Möglichkeiten, einen Grundton im HSL-Modell systematisch zu verändern: Tint (Mischung Richtung Weiß, Anheben der Lightness — die Farbe wirkt blasser), Shade (Mischung Richtung Schwarz, Absenken der Lightness — die Farbe wirkt dunkler und satter) und Tone (Mischung Richtung Grau, Reduzieren der Saturation bei annähernd gleichbleibender Lightness — die Farbe wirkt gedämpft oder „staubig"). Dieser Generator erzeugt die Tint/Shade-Hälfte dieses Trios: Ausgehend von Ihrer Grundfarbe verschiebt er die Lightness für die helleren Stufen Richtung Weiß und für die dunkleren Stufen Richtung Schwarz und erzeugt so die zehnstufige 50-900-Skala, die Design-Systeme wie Tailwind und Material verwenden, wobei die ursprüngliche Markenfarbe um Stufe 500 verankert ist.

Ein konkretes Beispiel: Ausgehend von einem Blau um hsl(217, 91%, 60%) landet Stufe 50 nahe bei hsl(217, 91%, 97%) — fast weiß, nur noch ein Hauch des Farbtons bleibt übrig — während Stufe 900 nahe bei hsl(217, 60%, 20%) landet — sehr dunkel, mit komprimierter Sättigung, während sich die Farbe dem Schwarz nähert. Jede Stufe erhält sowohl einen Hex-Code als auch eine einsatzbereite CSS-Variable; ein Klick auf ein Farbmuster kopiert es.

Der praktische Nutzen, eine vollständige Skala zu erzeugen statt eine Handvoll Töne nach Augenmaß auszuwählen, liegt in der Konsistenz: Jede Stufe wird aus demselben Grundton mit derselben Mischregel abgeleitet, sodass ein Kartenrand bei Stufe 200 und ein Hover-Zustand bei Stufe 100 immer zur selben Farbfamilie zu gehören scheinen — auch Monate später, wenn ein anderer Designer oder eine andere Komponente eine neue Nuance derselben Markenfarbe benötigt.

Wichtig zu wissen

• Tint, Shade und Tone sind nicht dieselbe Operation: Dieses Tool führt nur Tint und Shade aus — Änderungen der Lightness. Ein echter Tone reduziert die Saturation bei annähernd fixierter Lightness und erzeugt so eine gedämpfte Version der Farbe statt einer helleren oder dunkleren; diese separate Manipulation wendet dieser Generator nicht an.
• Wo jede Stufe verwendet wird: 50-100 für Seitenhintergründe und Hover-Flächen, 200-300 für Rahmen und Trennlinien, 500-600 für Buttons und Links (die Markenfarbe selbst), 700-900 für Fließtext auf hellem Hintergrund.
• Kontrast ist nicht automatisch: Das Kombinieren einer Stufe ≥700 mit einer Stufe ≤100 besteht meist den WCAG-AA-Kontrast, aber „meist" ist nicht „immer" — überprüfen Sie das genaue Paar, das Sie ausliefern möchten, mit einem dedizierten Kontrastprüfer.
• Nicht identisch mit Tailwinds eigenen Paletten: Tailwinds integrierte Farben sind bewusst pro Farbton von Hand abgestimmt, während dieser Generator auf jede Eingabe eine einzige, konsistente Mischformel anwendet — vorhersehbar für individuelle Markenfarben, nah genug für reale Oberflächen.
• Der Dark Mode kehrt die Skala meist um: Ein Hintergrund, der im Light Mode Stufe 50 verwendet, entspricht im Dark Mode oft etwas nahe Stufe 900, und umgekehrt — die vollständige Skala im Voraus zu erzeugen bedeutet, dass beide Themes bereits abgedeckt sind.