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 und liefert das dunklere Hex samt RGB- und HSL-Aufschlüsselung. Null Prozent behalten die Originalfarbe; hundert Prozent ergeben Schwarz.

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 Betrag durch hundert.

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 bleibt stets im Bereich und erfindet nie eine negative Helligkeit.

Eingabevertrag: Hex-Farben und der Betrag 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 Betrag, 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 Betrag null, um zu normalisieren und Kurz-Hex ohne Tonänderung zu erweitern, oder Betrag hundert, wenn Sie einen echten Schwarzanker brauchen, der aus demselben Codepfad wie teilweise Verdunkelungen stammt.

Für schnelle Proben oder ganze Paletten

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.