Hover-Effekte, Schattenkanten, abgestufte Buttons, Hintergrundflaechen: In fast jedem Interface brauchst du nicht nur eine Farbe, sondern hellere und dunklere Varianten davon. Eine Farbe gezielt um einen Prozentsatz aufzuhellen oder abzudunkeln ist deshalb eine Kerntechnik im Webdesign. Dieser Ratgeber erklaert die Begriffe, die Mechanik dahinter und wie du konsistente Abstufungen erzeugst.
Tints und Shades: die Grundbegriffe
In der Farblehre gibt es klare Begriffe fuer das, was beim Aufhellen und Abdunkeln passiert:
- Tint (Aufhellung): Du mischst Weiss zur Ausgangsfarbe. Das Ergebnis ist heller und oft etwas blasser.
- Shade (Abdunklung): Du mischst Schwarz hinzu. Die Farbe wird dunkler und satter.
- Tone: Beigemischtes Grau, das die Farbe entsaettigt, ohne sie nur heller oder dunkler zu machen.
Wenn man von "Farbe um 20 Prozent aufhellen" spricht, ist in der Regel ein Tint gemeint: Die Farbe wird zu 20 Prozent in Richtung Weiss verschoben. Beim Abdunkeln um 20 Prozent entsprechend in Richtung Schwarz.
Wie das technisch funktioniert
Es gibt zwei gaengige Wege, eine Farbe aufzuhellen oder abzudunkeln. Beim RGB-Mischverfahren wird jeder der drei Kanaele (Rot, Gruen, Blau) anteilig in Richtung 255 (Weiss) oder 0 (Schwarz) verschoben. Aufhellen um 20 Prozent bedeutet zum Beispiel, jeden Kanal um 20 Prozent der Distanz zu 255 anzuheben.
Der zweite, oft elegantere Weg fuehrt ueber HSL (Hue, Saturation, Lightness). Hier veraenderst du einfach den Lightness-Wert: mehr Helligkeit hellt auf, weniger dunkelt ab, waehrend der Farbton (Hue) erhalten bleibt. Das fuehrt meist zu natuerlicheren Abstufungen. Statt diese Umrechnungen manuell zu machen, gibst du deinen Hex-Wert und den gewuenschten Prozentsatz in den Farbe Aufhellen Abdunkeln ein und erhaeltst die neue Farbe direkt als Hex-Code.
Warum konsistente Abstufungen so wichtig sind
Professionelle Designsysteme arbeiten nicht mit zufaellig gewaehlten Farben, sondern mit klaren Skalen: eine Primaerfarbe und davon abgeleitet jeweils mehrere hellere und dunklere Stufen, oft in Schritten von 10 oder 20 Prozent. Das sorgt fuer ein einheitliches Erscheinungsbild ueber die gesamte Oberflaeche.
Typische Einsatzgebiete fuer abgeleitete Farben:
- Hover- und Active-Zustaende: Buttons werden beim Ueberfahren meist leicht abgedunkelt.
- Rahmen und Schatten: eine etwas dunklere Variante der Fuellfarbe wirkt harmonischer als reines Schwarz.
- Hintergrundflaechen: stark aufgehellte Tints als dezenter Hintergrund fuer Karten oder Hinweise.
- Dark- und Light-Mode-Anpassungen: dieselbe Markenfarbe in passender Helligkeit fuer beide Modi.
Tipps fuer harmonische Ergebnisse
Ein paar Faustregeln helfen, dass deine Abstufungen nicht ausgewaschen wirken: Aendere die Helligkeit in moderaten Schritten, grosse Spruenge lassen Farben schnell grau oder pastellig aussehen. Achte beim Aufhellen darauf, dass Text auf der hellen Variante noch ausreichend Kontrast hat. Und halte dich innerhalb eines Projekts an feste Prozentstufen, statt jede Variante neu zu erfinden.
Wenn du gleich eine komplette Reihe von Abstufungen brauchst, ist der Farbpalette Generator der richtige Begleiter, der aus einer Basisfarbe eine ganze Palette ableitet. Den Kontrast deiner aufgehellten oder abgedunkelten Farben pruefst du anschliessend mit dem Farbkontrast Checker. Alle Farb- und Design-Tools findest du gebuendelt unter kotsch.tech/webtools.
Fazit
Farben aufzuhellen und abzudunkeln ist mehr als ein Schoenheitsdetail, es ist die Grundlage konsistenter Designsysteme. Ob ueber RGB oder ueber den Lightness-Wert in HSL: Mit einem klaren Prozentwert erzeugst du reproduzierbare Tints und Shades, die deine Oberflaeche stimmig wirken lassen. Halte dich an feste Stufen und pruefe den Kontrast, dann passt das Ergebnis sowohl optisch als auch in puncto Barrierefreiheit.