Hex-Farbe prozentual verdunkeln

Designer, Frontend-Entwickler und Autoren von Designsystemen brauchen ständig dunklere Töne einer Markenfarbe für Hover-Zustände, Ränder, Schatten und barrierefreien Text auf hellen Hintergründen. Ein neues Hex nach Augenmaß zu raten ist langsam und über Werkzeuge hinweg inkonsistent. Diese Fähigkeit nimmt eine Hex-Farbe und einen Verdunkelungsprozentsatz von null bis hundert entgegen, wandelt die Farbe in HSL um, multipliziert die Helligkeit mit eins minus diesem Prozentsatz, begrenzt das Ergebnis bei Schwarz und liefert das dunklere Hex samt RGB- und HSL-Aufschlüsselung. Null Prozent behalten die Originalfarbe; hundert Prozent ergeben Schwarz.

Was prozentuales Abdunkeln bedeutet

Im Web stehen Farben meist als Hex- oder RGB-Wert, doch Helligkeitsstufen lassen sich in HSL leichter steuern: Der Farbton hält die Farbrichtung, die Sättigung die Reinheit, die Helligkeit den Abstand zu Schwarz und Weiß. Prozentuales Abdunkeln verringert nur die Helligkeit und lässt Farbton und Sättigung unverändert, ein Markenblau bleibt also blau, nur tiefer. Gerechnet wird relativ: Die vorhandene Helligkeit wird mit eins minus Prozent durch hundert multipliziert und nie unter null gesetzt. Bei 0 % bleibt die Farbe gleich, bei 50 % halbiert sich die Helligkeit, bei 100 % entsteht reines Schwarz.

Typische Einsätze und häufige Fehler

Viele Designsysteme arbeiten mit einer Grundfarbe und festen Abdunkelungsstufen für Hover, gedrückte Schaltflächen oder Rahmen. Aus #4A90D9 wird bei 20 % so verlässlich #2873C0. Mit 0 % lässt sich eine kurze Schreibweise wie #F0A einfach zu #FF00AA ausschreiben, ohne den Ton zu ändern. Häufige Fehler: Werte unter 0 oder über 100 eingeben, die abgelehnt werden, oder erwarten, dass eine Stufe von 20 % bei jeder Farbe gleich viele Helligkeitspunkte abzieht. Weil relativ gerechnet wird, verlieren helle Farben mehr Punkte als dunkle.

Was prozentuales Verdunkeln in HSL bedeutet

Farben im Web werden oft als Hex oder RGB gespeichert, aber perzeptuelle Tonstufen sind in HSL leichter: der Farbton hält die Tönung, die Sättigung die Reinheit und die Helligkeit, wie nah die Probe an Schwarz oder Weiß liegt. Um einen Prozentsatz zu verdunkeln heißt, die Helligkeit zu senken, während Farbton und Sättigung fest bleiben, sodass ein Markenblau blau bleibt — nur tiefer. Dieses Werkzeug multipliziert die aktuelle Helligkeit mit eins minus Prozent durch hundert und begrenzt das Ergebnis danach so, dass die Helligkeit nie unter null fällt.

Bei null Prozent bleibt die Helligkeit unverändert, sodass die Ausgabe dem normalisierten Eingabe-Hex entspricht. Bei fünfzig Prozent wird die Helligkeit halbiert. Bei hundert Prozent wird die Helligkeit null, und das Ergebnis ist reines Schwarz, unabhängig vom Ausgangsfarbton.

Dieses relative Modell entspricht dem, wie viele Design-Tokens interaktive Zustände skalieren: ein einziges Basis-Token plus ein Verdunkelungsfaktor für Hover oder gedrückt. Die absolute Subtraktion von Helligkeitspunkten kann bei bereits dunklen Farben überschießen; relative Skalierung mit Schwarz-Begrenzung bleibt stets im Bereich und erfindet nie eine negative Helligkeit.

Eingabevertrag: Hex-Farben und der Prozentsatz 0–100

Übergeben Sie color als Hex-Zeichenkette in Kurz- oder Langform: #RGB oder #RRGGBB, mit oder ohne führendes Rautezeichen. Kurzformen werden kanalweise erweitert, sodass #F0A vor der Umrechnung zu #FF00AA wird. Werte wie minus zehn, hunderteins oder nicht numerischer Text werden zurückgewiesen; fehlgeschlagene Validierung wird nicht berechnet.

Bei Erfolg enthält die Antwort original als normalisiertes sechsstelliges Hex in Großbuchstaben, hex als verdunkeltes Ergebnis, den gesendeten numerischen percent-Wert, rgb mit ganzzahligen Kanälen von null bis zweihundertfünfundfünfzig und hsl mit dem Farbton in Grad sowie Sättigung und Helligkeit auf einer Skala von null bis hundert nach dem Verdunkelungsschritt. Die Rundung ist deterministisch, sodass ein erneuter Lauf desselben Paares nicht abweicht.

Verwenden Sie percent null, um zu normalisieren und Kurz-Hex ohne Tonänderung zu erweitern, oder percent hundert, wenn Sie einen echten Schwarzanker brauchen, der aus demselben Codepfad wie teilweise Verdunkelungen stammt — für konsistente Token-Pipelines.

Für ein Farbfeld oder alle Zustände

Für eine einmalige Prüfung — zu bestätigen, dass ein Primärblau sauber für einen Button-Hover verdunkelt, oder dass eine Zwanzig-Prozent-Stufe die Kontrastziele gegen Weiß noch erfüllt — nutzen Sie das kostenlose Browser-Werkzeug auf dieser Seite. Innerhalb der Transformation gibt es keinen Netzaufruf, kein Modell und keine Uhrabhängigkeit, sodass Ergebnisse randsicher und cachefähig sind. Setzen Sie den Endpunkt in eine Figma-Plugin-Brücke, ein Storybook-Add-on, das Zustandsfarben vorschaut, oder einen Serverschritt ein, der Dark-Mode-Flächen aus einer hellen Basispalette materialisiert.

Wenn Sie Formate ohnehin mit einem separaten Farbkonverter umwandeln, behalten Sie diesen für HEX–RGB–HSL-Umläufe; nutzen Sie diesen Verdunkler, wenn die Suchabsicht ausdrücklich ein prozentual dunklerer Ton ist. Kombinieren Sie beide in einer Pipeline, wenn Sie nach dem Verdunkeln einen CMYK-Export brauchen, aber der Verdunkelungsschritt selbst braucht nur Hex hinein und strukturierte Farbe heraus mit Schwarz begrenzt bei hundert Prozent.