In diesem Artikel
Was sind Schattierungen, Tönungen und Farbtöne?
Eine Schattierung (Shade) entsteht, indem eine Farbe mit Schwarz gemischt und dadurch dunkler wird. Eine Tönung (Tint) entsteht durch das Mischen mit Weiß, wodurch die Farbe heller wird. Ein Farbton (Tone) entsteht durch das Mischen mit Grau, was die Farbe entsättigt. Zusammen erzeugen diese drei Operationen aus einer einzigen Grundfarbe eine vollständige Palette.
Den Unterschied zwischen Schattierungen, Tönungen und Farbtönen zu verstehen, ist grundlegend für die Farblehre. Designer nutzen diese Variationen, um in Benutzeroberflächen Tiefe, Hierarchie und visuellen Kontrast zu schaffen, während sie die Harmonie wahren, indem sie jede Farbe vom selben Grundton ableiten.
So funktioniert die Schattierungserzeugung
Ein Farbschattierungs-Generator nimmt eine Grundfarbe (wie #3b82f6) und erzeugt daraus eine Reihe hellerer und dunklerer Varianten, indem er den Helligkeitswert im HSL-Farbraum verändert.
- HSL-Manipulation — der Generator passt den L-Wert (Lightness/Helligkeit) an, während er H (Hue/Farbton) und S (Saturation/Sättigung) konstant hält, und erzeugt so perzeptuell gleichmäßige Abstufungen
- Stufenberechnung — der Bereich vom hellsten bis zum dunkelsten Wert wird in gleichmäßig verteilte Intervalle unterteilt (typischerweise 10 bis 20 Stufen) für einen weichen Verlauf
- Farbmischung — für natürlichere Ergebnisse nutzen manche Generatoren eine echte Farbmischung (Vermengung mit Weiß/Schwarz/Grau) statt einer einfachen Helligkeitsanpassung
Kostenlos testen – keine Registrierung erforderlich
Farbschattierungen erzeugen →Wann Sie die Schattierungserzeugung verwenden sollten
Farbschattierungspaletten sind unverzichtbar, um aus einer einzigen Markenfarbe stimmige, professionelle Designs zu schaffen.
- Designsysteme — erzeugen Sie aus der Primärfarbe Ihrer Marke eine vollständige Farbskala (50 bis 950) zur Verwendung in allen UI-Komponenten
- UI-Theming — erstellen Sie mit helleren und dunkleren Varianten der Grundfarbe Hover-, Aktiv-, Fokus- und Deaktiviert-Zustände für Schaltflächen und interaktive Elemente
- Barrierefreier Kontrast — testen und wählen Sie Farbkombinationen, die die WCAG-Kontrastverhältnisse erfüllen, indem Sie aus einem vollständigen Spektrum an Schattierungen und Tönungen auswählen
Häufig gestellte Fragen
Was ist der Unterschied zwischen einer Schattierung und einer Tönung?
Eine Schattierung ist eine mit Schwarz gemischte Farbe (dunkler), während eine Tönung eine mit Weiß gemischte Farbe (heller) ist. Marineblau ist zum Beispiel eine Schattierung von Blau, während Babyblau eine Tönung von Blau ist. Beide behalten denselben Farbton bei, unterscheiden sich aber in der Helligkeit.
Wie viele Schattierungen sollte ein Designsystem haben?
Die meisten Designsysteme verwenden 10 Stufen (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) nach der Konvention von Tailwind CSS. Die Grundfarbe liegt typischerweise bei 500, mit Tönungen darüber und Schattierungen darunter. Das bietet genügend Abstufung für UI-Zustände, Text und Hintergründe.
Kann ich aus Schattierungen barrierefreie Farbkombinationen erzeugen?
Ja. Indem Sie eine vollständige Schattierungspalette erzeugen, können Sie Paare gegen die WCAG-Kontrastanforderungen testen. In der Regel sorgt eine dunkle Schattierung (700–900) auf einer hellen Tönung (50–200) oder umgekehrt für ausreichenden Kontrast, damit Text gut lesbar bleibt.