Farbe aufhellen und abdunkeln
Farbe heller oder dunkler machen: Prozentwert wählen, Skala in beide Richtungen sehen und Werte wie in Sass, HSL oder OKLCH kopieren.
Farbe aufhellen und abdunkeln verändert die Helligkeit einer Farbe um einen wählbaren Prozentwert. Drei Methoden stehen zur Wahl: HSL wie lighten() und darken() in Sass, OKLCH für gleichmäßig wahrgenommene Schritte und Mischen mit Weiß oder Schwarz. Dazu gibt es eine Skala von −50 bis +50 Prozent und den passenden modernen CSS-Ausdruck.
Heller als CSS-Ausdruck
oklch(from #2563eb calc(l + 0.15) c h)
Dunkler als CSS-Ausdruck
oklch(from #2563eb calc(l - 0.15) c h)
Skala von −50 bis +50 %
Klick auf eine Stufe kopiert den HEX-Wert.
Drei Wege zur helleren Farbe
| Methode | Rechnung | Wirkung |
|---|---|---|
| HSL | Helligkeit L plus x Prozentpunkte | Wie Sass, teils ungleichmäßig |
| OKLCH | Wahrgenommene Helligkeit plus x | Gleichmäßig, Farbton bleibt |
| Mischen | x Prozent Weiß bzw. Schwarz dazu | Weicher, weniger gesättigt |
Eine komplette Skala von 50 bis 950 erzeugt der Tailwind-Farbgenerator, Hover- und Active-Töne als Variablen der CSS-Farbvariablen-Generator.
Häufige Fragen
Welche Methode ist die richtige?
OKLCH liefert die gleichmäßigsten Ergebnisse, weil die Helligkeit der Wahrnehmung entspricht und der Farbton erhalten bleibt. HSL entspricht lighten() und darken() aus Sass und älteren Werkzeugen. Mischen mit Weiß oder Schwarz wirkt pudriger bzw. gedeckter, wie Tönen mit Farbe.
Warum wird Gelb beim Abdunkeln bräunlich?
Dunkles Gelb nehmen wir als Braun oder Oliv wahr. Das ist keine Fehlberechnung, sondern Wahrnehmung. OKLCH hält den Farbton am besten stabil.
Kann CSS Farben selbst aufhellen?
Ja. Mit relativer Farbsyntax wie oklch(from #2563eb calc(l + 0.15) c h) oder mit color-mix() berechnet der Browser die Variante selbst, auch auf Basis von CSS-Variablen. Beides wird von aktuellen Browsern unterstützt.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.