Dark-Mode-Farbadapter

Wandeln Sie jede Hellmodus-Palette sofort in Dark-Mode-Äquivalente um. Wählen Sie aus drei Adaptionsmodi – perzeptuell, invertiert oder verschoben – mit automatischer WCAG-Kontrastdurchsetzung. Export als CSS-Custom-Properties oder Tailwind-Konfiguration. Die gesamte Verarbeitung läuft lokal in Ihrem Browser. Keine Registrierung erforderlich.

Dark Mode Color Adapter

Enter your light-mode color palette and instantly generate dark-mode equivalents with WCAG contrast checks. Export as CSS custom properties or Tailwind config - all processing runs locally in your browser.

Light Mode Palette

ColorHEXName / CSS Variable

Dark Mode Results

→

background

#828282

4.53:1

→

surface

#708599

4.56:1

→

border

#6485af

4.57:1

→

text

#e5e9f0

14.29:1

→

muted

#818ea2

5.24:1

→

primary

#3780f6

4.63:1

→

accent

#9369f7

4.64:1

Adaptation Settings

Adaptation Mode

Dark BG Lightness10%

Background lightness of the dark theme

Saturation Adjust0%

Boost or reduce saturation in dark mode

Min Contrast4.5:1

WCAG AA = 4.5, AAA = 7.0

Export

:root {
  --background: #ffffff;
  --surface: #f8f9fa;
  --border: #e2e8f0;
  --text: #1a202c;
  --muted: #718096;
  --primary: #3b82f6;
  --accent: #8b5cf6;
}

[data-theme="dark"],
.dark {
  --background: #828282;
  --surface: #708599;
  --border: #6485af;
  --text: #e5e9f0;
  --muted: #818ea2;
  --primary: #3780f6;
  --accent: #9369f7;
}

Contrast ratios are calculated against the dark background lightness you set. WCAG AA requires 4.5:1 for normal text. WCAG AAA requires 7:1. Colors that fail the minimum contrast are automatically nudged toward higher lightness until they pass.

Warum unseren Dark-Mode-Farbadapter nutzen?

Sofortige Dark-Mode-Erzeugung: Fügen Sie Ihre Hellmodus-Palette ein und erhalten Sie Dark-Mode-Äquivalente in Echtzeit. Ändern Sie Modus und Einstellungen – alle Farben aktualisieren sich sofort.
Sicher & privat: Alle Farbberechnungen laufen zu 100 % clientseitig in Ihrem Browser. Ihre Palettendaten werden nie an einen Server gesendet, sodass Sie proprietäre Markenfarben sicher anpassen können.
WCAG-Kontrastprüfung: Jede angepasste Farbe wird automatisch gegen den dunklen Hintergrund auf WCAG AA (4,5:1) und AAA (7:1) geprüft. Nicht bestehende Farben werden angepasst, bis sie bestehen.
100 % kostenlos für immer: Völlig kostenlos, ohne Registrierung, Nutzungsgrenzen und Werbung, die die Oberfläche blockiert. Passen Sie beliebig viele Paletten an.

Häufige Anwendungsfälle des Dark-Mode-Farbadapters

Dark Mode zu bestehenden Apps hinzufügen: Wandeln Sie vorhandene Hellmodus-Design-Tokens in Sekunden in Dark-Mode-Äquivalente um. Exportieren Sie sie als CSS-Custom-Properties und fügen Sie sie in Ihr Stylesheet ein.
React- & Next.js-Theming: Erzeugen Sie die Dark-Mode-Farbtokens für Ihre Tailwind-Konfiguration oder Ihr CSS-in-JS-Theme-Objekt. Der Tailwind-Export lässt sich direkt in tailwind.config.js einfügen.
Designsystem-Pflege: Halten Sie Ihre helle und dunkle Palette synchron, während sich Ihr Designsystem weiterentwickelt. Führen Sie den Adapter bei jeder Änderung einer Hellmodus-Farbe erneut aus.
Anpassung von Markenfarben: Passen Sie Markenfarben für Dark-Mode-Oberflächen an, ohne Farbton und Sättigung zu verlieren. Der perzeptuelle Modus hält Mitteltöne und Akzente visuell konsistent.
Barrierefreiheit einhalten: Prüfen Sie, ob alle Dark-Mode-Farben die WCAG-AA-Kontrastanforderungen gegen Ihren dunklen Hintergrund erfüllen. Nicht bestehende Farben werden automatisch angepasst.
CSS-Variablen & Tokens: Exportieren Sie helle und dunkle Palette mit einem Klick als CSS-Custom-Properties. Die Ausgabe verwendet die Selektoren data-theme="dark" und .dark für maximale Kompatibilität.

Was ist ein Dark-Mode-Farbadapter?

Ein Dark-Mode-Farbadapter wandelt eine Hellmodus-Palette in passende Dark-Mode-Äquivalente um, indem er die Helligkeit jeder Farbe im HSL-Raum anpasst. Einfaches Invertieren (100 − L) liefert oft schlechte Ergebnisse – sehr helle Farben werden sehr dunkel und Mitteltöne matschig. Unser Adapter nutzt drei klügere Algorithmen – perzeptuell, invertiert und verschoben –, um visuell konsistente und barrierefreie Dark-Mode-Farben zu erzeugen. Die gesamte Verarbeitung läuft sofort im Browser, ohne Server-Upload.

So funktioniert unser Dark-Mode-Farbadapter

Geben Sie Ihre Hellmodus-Palette ein: Fügen Sie jede Farbe mit Namen (als CSS-Variablenname) und HEX-Wert hinzu. Nutzen Sie die Voreinstellungstasten, um sofort eine Beispielpalette zu laden.
Adaptionseinstellungen wählen: Wählen Sie einen Modus (perzeptuell, invertiert oder verschoben), stellen Sie die Helligkeit des dunklen Hintergrunds ein, passen Sie die Sättigung an und legen Sie das minimale WCAG-Kontrastverhältnis fest. Die Dark-Mode-Farben aktualisieren sich in Echtzeit.
CSS oder Tailwind-Konfiguration exportieren: Kopieren Sie die erzeugten CSS-Custom-Properties (mit :root- und .dark-Selektoren) oder das Tailwind-Snippet direkt in Ihr Projekt.

Die drei Adaptionsmodi

Perzeptueller Modus: Nutzt eine S-Kurven-Zuordnung, die relative Kontrastbeziehungen zwischen Farben bewahrt. Helle Farben (hohes L) werden auf dunklem Grund leicht hell, dunkle Farben (niedriges L) deutlich heller. Der empfohlene Modus für die meisten Designsysteme.
Invertierter Modus: Spiegelt die Helligkeit um 50 % (dunkel = 100 − hell). Einfach und vorhersehbar, kann aber bei Mitteltönen verwaschene Ergebnisse liefern. Am besten für kontrastreiche, minimalistische Paletten.
Verschobener Modus: Verschiebt alle Farben zum hellen Ende des Dark-Mode-Bereichs. Dunkle Farben erhalten einen größeren Schub als helle. Gut für Paletten mit vielen dunklen Tönen.
Kontrastdurchsetzung: Nach der Adaption wird jede Farbe mit der WCAG-Kontrastformel gegen den dunklen Hintergrund geprüft. Farben unter dem Mindestverhältnis werden so lange in Richtung höherer Helligkeit verschoben, bis sie bestehen.

Häufig gestellte Fragen

Ein Dark-Mode-Farbadapter wandelt eine Hellmodus-Palette in Dark-Mode-Äquivalente um, indem er die HSL-Helligkeit anpasst, den WCAG-Kontrast prüft und Farben, die nicht bestehen, automatisch korrigiert. Unser Adapter läuft vollständig in Ihrem Browser.

Eine einfache Helligkeitsinversion liefert oft schlechte Ergebnisse – sehr helle Farben werden sehr dunkel und Mitteltöne werden matschig. Die Modi perzeptuell und verschoben nutzen klügere Algorithmen, die die visuelle Hierarchie bewahren.

Jede angepasste Farbe wird mit der WCAG-2.1-Kontrastformel gegen den dunklen Hintergrund geprüft. Farben unter dem Mindestverhältnis werden automatisch so lange in Richtung höherer Helligkeit verschoben, bis sie bestehen.

Ja. Alle Berechnungen laufen zu 100 % clientseitig. Es werden niemals Farbdaten an einen Server gesendet.

Fügen Sie die CSS-Ausgabe in Ihr Stylesheet ein. Der :root-Block definiert Hellmodus-Farben, der .dark-Block Dunkelmodus-Farben. Schalten Sie die Klasse dark am Wurzelelement um, um das Theme zu wechseln.

Führen Sie das Tailwind-Konfigurationssnippet in den Abschnitt theme.extend.colors Ihrer tailwind.config.js ein. Die Farben referenzieren CSS-Custom-Properties und wechseln automatisch mit der Klasse dark.

Ja. 100 % kostenlos, keine Registrierung, keine Nutzungsgrenzen. Passen Sie beliebig viele Paletten an.