Eine einzelne Farbe reicht selten aus, um ein stimmiges Interface zu bauen. Buttons brauchen einen dunkleren Hover-Zustand, Hintergruende eine sehr helle Variante, deaktivierte Elemente etwas Gedaempftes. Damit das nicht beliebig wirkt, leitet man alle diese Toene systematisch aus einer einzigen Basisfarbe ab. Das Ergebnis ist eine Farbskala aus aufeinander abgestimmten Abstufungen. Dieser Artikel erklaert, wie solche Abstufungen entstehen und wie du sie sauber erzeugst.
Tints, Shades und Tones: die drei Grundbegriffe
In der Farbenlehre gibt es drei klassische Wege, eine Farbe zu veraendern, ohne ihren Charakter zu verlieren:
- Tint (Aufhellung): Die Farbe wird mit Weiss gemischt. Es entstehen hellere, sanftere Varianten – ideal fuer Hintergruende und Flaechen.
- Shade (Abdunklung): Die Farbe wird mit Schwarz gemischt. Es entstehen tiefere, kraeftigere Varianten – ideal fuer Text, Rahmen und Hover-Zustaende.
- Tone (Daempfung): Die Farbe wird mit Grau gemischt. Die Saettigung sinkt, der Ton wirkt ruhiger und weniger grell.
Streng genommen meint „Shades“ nur die dunklen Varianten. Umgangssprachlich und in den meisten Tools steht der Begriff aber fuer die gesamte Reihe von sehr hell bis sehr dunkel.
Warum HSL der Schluessel ist
Im klassischen RGB- oder Hex-Format ist Aufhellen und Abdunkeln muehsam, weil sich drei Kanaele gleichzeitig aendern. Viel intuitiver ist der HSL-Farbraum mit den drei Werten Hue (Farbton, 0–360 Grad), Saturation (Saettigung, 0–100 %) und Lightness (Helligkeit, 0–100 %).
Der Trick fuer eine saubere Skala: Du behaeltst Hue weitgehend bei und variierst vor allem die Lightness. Eine Reihe wie 95 %, 85 %, 70 %, 55 %, 40 %, 25 % an Helligkeit ergibt eine harmonische Treppe von fast Weiss bis fast Schwarz im selben Farbton. Genau diese Logik nutzt der Color Shades Generator: Du gibst eine Basisfarbe ein und erhaeltst sofort die hellere und dunklere Staffel als fertige Hex-Werte zum Kopieren.
Worauf eine gute Skala achten muss
Nicht jede mechanisch berechnete Abstufung sieht gut aus. Drei Punkte machen den Unterschied:
- Gleichmaessige Schritte: Die Abstaende zwischen den Stufen sollten visuell konstant wirken. Da das Auge Helligkeit nicht linear wahrnimmt, fuehlen sich an den Enden oft etwas kleinere Schritte natuerlicher an.
- Hue-Drift bewusst einsetzen: Profis verschieben den Farbton leicht mit. Sehr helle Toene driften oft Richtung Gelb, sehr dunkle Richtung Blau – das wirkt lebendiger als ein rein technisch aufgehellter Ton.
- Kontrast pruefen: Helle Stufen als Hintergrund mit dunklen Stufen als Text muessen ausreichend Kontrast haben. Das ist eine Frage der Barrierefreiheit, nicht nur der Optik.
Vom Generator zur fertigen Design-Variable
In der Praxis nummeriert man die Stufen, angelehnt an gaengige UI-Frameworks: 50 fuer den hellsten, 900 fuer den dunkelsten Ton. So entsteht aus einer Markenfarbe eine komplette Reihe (z. B. brand-50 bis brand-900), die du als CSS-Variablen ablegst. Buttons nutzen dann etwa Stufe 500 als Grundzustand und Stufe 700 beim Hover – ohne dass du jeden Wert von Hand suchen musst.
Wenn du den Farbton lieber direkt ueber die HSL-Regler steuerst, hilft dir der HSL Farb Generator, ein passendes Ausgangsbild zu finden. Geht es dir eher um die Frage, ob Text auf einer bestimmten Stufe noch lesbar ist, gibst du beide Werte in den Farbkontrast Checker ein. Eine ganze Sammlung verwandter Helfer findest du unter kotsch.tech/webtools.
Fazit
Farbabstufungen sind kein Zufall, sondern das Ergebnis systematischer Helligkeits- und Saettigungsschritte rund um eine Basisfarbe. Wer das Prinzip von Tints und Shades im HSL-Raum verstanden hat, baut in Minuten konsistente Paletten. Den rechnerischen Teil nimmt dir ein Generator ab – deine Aufgabe bleibt die gestalterische Entscheidung, welche Stufe wofuer steht.