Wie erzeuge ich hellere und dunklere Varianten einer Farbe?
Aufhellungs- und Abdunklungs-Generator - Tints (mit Weiß gemischt) links, Basis in der Mitte, Shades (mit Schwarz gemischt) rechts.
OKLCH-Interpolation erhält den Farbton beim Mischen - Blau wird heller/dunkler, aber liest sich immer noch als Blau, nicht als Grau.
Klasse für Hover-/Active-Zustände, Button-Varianten, Dark-Mode-Paare. Alles lokal.
So nutzt du das Tool
- Wähl eine Basisfarbe (HEX, nativer Picker, Bildschirm-Pipette).
- Wähl die Stufenanzahl: 3 (subtil), 5 (ausgewogen), 7 (detailliert), 10 (Tailwind-ähnliche Rampe).
- Rechts: Tints (mit Weiß) → Basis ★ → Shades (mit Schwarz). Klick zum HEX-Kopieren.
- Darunter: CSS-Variablen fertig zum Einsetzen in `:root`.
- Tipp: 10-Stufen-Ausgabe → sehr nah an Tailwind 100/200/.../900 deiner Markenfarbe.
Wann das hilfreich ist
Wo sich Tints und Shades lohnen - typische Nutzungen:
- Hover-/Active-Zustände - Basis-Button + Tint für Hover (heller) + Shade für Active (dunkler).
- Ghost- / Outline-Buttons - Tint-300 als Hintergrund, Basis als Border, Shade-700 als Text.
- Dark Mode - Shade-700 und Shade-800 sind Kandidaten für Dark-Mode-Hintergründe.
- Disabled-Zustand - Tint-200 als "ausgegrauter" Button.
- Karten mit Elevation - Tint-100 als Kartenhintergrund auf weißem Body.
- Brand-Konsistenz - wenn die Markenfarbe #ef4444 für einen Header zu grell ist, nimm Shade-300 als ausgewogenere Alternative.
- Schulung - sieh, wie "Blau 50% pur" in OKLCH wahrnehmungsmäßig 50% wirkt, in HSL aber nicht - genau deshalb wirken unsere Tints/Shades gleichmäßig verteilt.
Fragen und Antworten
Tint = Originalfarbe + Weiß (hellere Version). Shade = Originalfarbe + Schwarz (dunklere Version). Anders als "Tone" (Original + Grau), den wir nicht erzeugen, weil er selten benutzt wird.