Farbe online abdunkeln

HEX-, RGB- oder HSL-Farben prozentual abdunkeln. Farbtöne vergleichen und Werte als HEX, RGB, HSL, CSS-Variable oder color-mix() kopieren.

Ausgangsfarbe

HEX, rgb(59, 130, 246) oder hsl(217, 91%, 60%) eingeben.

Methode zum Abdunkeln

Der gewählte Anteil wird mit Schwarz gemischt. 0 % behält die Ausgangsfarbe, 100 % ergibt Schwarz.

Abdunkeln um: 20%

Abgedunkelt

Original

#3B82F6

Abgedunkelt (20%)

#2F68C5

HEX

#2F68C5

RGB

rgb(47, 104, 197)

HSL

hsl(217, 61%, 48%)

CSS-Ausgabe

CSS variable

--color-darkened: #2F68C5;

color-mix()

color-mix(in srgb, #3B82F6 80%, black)

Skala dunklerer Farbtöne

Kontrastvorschau

Hintergrund der Vorschau

Beispieltext

5.37:1

Erfüllt WCAG AA für normalen Text. Minimale Abdunklung für AA: 12 %

Eine Farbe abdunkeln, ohne zu raten

Eine dunklere Farbe macht Zustandswechsel deutlich, ohne die ursprüngliche Palette zu verlassen. Mit diesem Farb-Abdunkler verwandeln Sie einen HEX-, RGB- oder HSL-Wert in brauchbare UI-Zustände und kopieren genau den Wert oder CSS-Code, den Sie benötigen.

Nützliche UI-Zustände aus einer Ausgangsfarbe erstellen

Statt jeden Farbton nach Augenmaß auszuwählen, beginnen Sie mit derselben Marken- oder Interface-Farbe und erzeugen kontrolliert dunklere Varianten. So bleiben Buttons, Links, Badges, Rahmen und Diagramme visuell verbunden, während Interaktionszustände leichter erkennbar werden.

Erstellen Sie eine 10 % bis 20 % dunklere Hover-Farbe für Buttons und Links.
Wählen Sie einen deutlich stärkeren Aktiv- oder Gedrückt-Zustand, ohne die Farbfamilie zu wechseln.
Leiten Sie dunklere Rahmen, Schatten, Diagrammreihen und Dark-Mode-Akzente aus derselben Ausgangsfarbe ab.

Die passende Abdunklungsmethode für Ihr Designziel wählen

Mit Schwarz mischen ist die Standardmethode und besonders nachvollziehbar für Prozentanpassungen: Bei 20 % enthält das Ergebnis 20 % Schwarz. HSL-Helligkeit verringern eignet sich, wenn der ursprüngliche Farbton und die Sättigung wichtiger sind als eine buchstäbliche Schwarz-Mischung. Vergleichen Sie beide Ergebnisse, bevor Sie einen Design-Token festlegen.

Verwenden Sie Mit Schwarz mischen für eine direkte, konsistente Abdunklung und kopierbares CSS color-mix().
Verwenden Sie HSL-Helligkeit verringern für eine farbtonorientierte Skala in einer Palette oder Datenvisualisierung.
Nutzen Sie die Skala dunklerer Farbtöne, um mehrere Kandidaten direkt zu vergleichen.

Lesbarkeit vor der Veröffentlichung prüfen

Eine dunklere Farbe macht Text nicht automatisch lesbar. Geben Sie den vorgesehenen Hintergrund in die Kontrastvorschau ein, um Kontrastverhältnis und WCAG-AA-Status für normalen Text zu sehen. Wenn ein dunklerer Wert AA erreicht, zeigt das Tool den niedrigsten verfügbaren Abdunklungswert an. Nutzen Sie ihn als Ausgangspunkt und prüfen Sie die fertige Komponente im Kontext.

Kopieren Sie HEX, RGB oder HSL für Design-Tools und Komponenten-Styles.
Kopieren Sie eine CSS-Custom-Property für einen wiederverwendbaren Design-Token.
Alle Berechnungen erfolgen im Browser; kein Farbwert wird hochgeladen.

So funktioniert Farbe online abdunkeln

So funktioniert die Berechnung zum Abdunkeln einer Farbe

Geben Sie eine HEX-, RGB- oder HSL-Farbe ein und wählen Sie einen Wert zwischen 0 % und 100 %. Das Tool normalisiert die Eingabe, berechnet die dunklere Farbe sofort und zeigt das Ergebnis als HEX, RGB und HSL an. So verwenden Sie das Format, das Ihr Workflow benötigt.

Zwei Wege, eine Farbe abzudunkeln

Mit Schwarz mischen: Der gewählte Schwarzanteil wird in die Ausgangsfarbe gemischt. Bei 0 % bleibt das Ergebnis unverändert, bei 100 % ist es schwarz. Für diese Methode steht außerdem ein kopierbarer color-mix()-Ausdruck bereit.
HSL-Helligkeit verringern: Der gewählte Wert in Prozentpunkten wird von der HSL-Helligkeit abgezogen; Farbton und Sättigung bleiben erhalten. Das eignet sich für eine visuell zusammenhängende Farbskala.

Vergleichen, prüfen und kopieren

Mit der Skala dunklerer Farbtöne vergleichen Sie gängige Anpassungen, ohne den Regler wiederholt zu bewegen. Fügen Sie einen Hintergrund zur Kontrastvorschau hinzu, um WCAG AA für normalen Text zu prüfen. Danach kopieren Sie einen direkt nutzbaren HEX-, RGB-, HSL-, CSS-Variablen- oder color-mix()-Wert. Jeder Schritt läuft lokal in Ihrem Browser.

So verwenden Sie Farbe online abdunkeln

Ausgangsfarbe eingeben

HEX-, RGB- oder HSL-Wert einfügen oder die native Farbauswahl verwenden.

Anteil und Methode wählen

Prozentwert festlegen und mit Schwarz mischen oder die HSL-Helligkeit verringern.

Nutzbaren Wert kopieren

Ergebnis, Farbskala, Kontrastvorschau oder CSS-Snippet verwenden.

Anwendungsbeispiel

Eine 20-prozentige Schwarzmischung erzeugt ein dunkleres, CSS-fertiges Himmelblau.

Eingabe

Basis: #38BDF8 | Methode: Mit Schwarz mischen | Abdunkeln: 20 %

Ausgabe

#2D97C6

Häufig gestellte Fragen

Wie kann ich eine HEX-Farbe online abdunkeln?

Fügen Sie eine 3- oder 6-stellige HEX-Farbe ein, wählen Sie einen Prozentwert und kopieren Sie das dunklere HEX-Ergebnis. Das Ergebnis aktualisiert sich bei jeder Änderung von Farbe, Methode oder Prozentwert.

Wie dunkelt man eine Farbe mit CSS ab?

Verwenden Sie die CSS-Ausgabe des Tools. Bei Mit Schwarz mischen können Sie eine CSS-Variable oder einen color-mix()-Ausdruck kopieren; alternativ kopieren Sie den berechneten HEX-, RGB- oder HSL-Wert.

Was bedeutet prozentuales Abdunkeln?

Bei der Standardmethode wird der gewählte Prozentwert mit Schwarz gemischt: 0 % behält die Ausgangsfarbe, 100 % ergibt Schwarz. Im HSL-Modus wird derselbe Wert stattdessen von der Helligkeit abgezogen.

Was ist der Unterschied zwischen Schwarz mischen und HSL-Helligkeit verringern?

Mit Schwarz mischen erzeugt eine relativ dunklere Variante der Ausgangsfarbe. HSL-Helligkeit verringern bewahrt Farbton und Sättigung und eignet sich für eine konsistente Farbfamilie.

Kann ich RGB- oder HSL-Farben abdunkeln?

Ja. Geben Sie rgb(r, g, b) oder hsl(h, s%, l%) ebenso wie HEX-Werte ein. Das Tool normalisiert die Eingabe und liefert kopierbare Ergebnisse als HEX, RGB und HSL.

Welche Farbformate kann ich umwandeln und kopieren?

Die Eingabe unterstützt HEX, RGB und HSL. Die dunklere Farbe lässt sich als HEX, RGB, HSL, CSS-Variable oder bei der Schwarz-Mischmethode als CSS color-mix() kopieren.

Wie erstelle ich eine dunklere Hover-Farbe?

Beginnen Sie mit der Farbe Ihres Buttons oder Links und testen Sie 10 % bis 20 % Abdunklung. Vergleichen Sie Ausgangs- und Ergebnisfarbe und kopieren Sie den Wert in Ihre :hover-Regel.

Kann ich eine dunklere Farbpalette oder Farbskala erstellen?

Ja. Die Farbskala erzeugt mehrere zunehmend dunklere Optionen aus einer Ausgangsfarbe. So finden Sie Hover-, Aktiv-, Rahmen- oder Schattenfarben ohne erneute Eingabe.

Hilft dieses Tool, eine Farbe mit WCAG-AA-Kontrast zu finden?

Geben Sie eine Vorschau-Hintergrundfarbe ein, um Kontrastverhältnis und WCAG-AA-Status für normalen Text zu sehen. Das Tool zeigt auch den niedrigsten verfügbaren Abdunklungswert, der AA auf diesem Hintergrund erreicht.

Werden meine Farbwerte hochgeladen oder gespeichert?

Nein. Das Verarbeiten, Abdunkeln, Erzeugen der Farbstufen und Prüfen des Kontrasts erfolgt lokal in Ihrem Browser.