Color Tools ColorGenerator Tools GeneratorConverter Tools Converter

Dark Mode Pair Generator

Paste a light-mode HEX palette and get the matching dark-mode colors via OKLCH lightness inversion. WCAG contrast checks and CSS variables export.

Paste HEX colors separated by newlines, commas or spaces. 3-digit shorthand (#fff) is supported.

What is the Dark Mode Pair Generator?

A perceptually accurate tool that converts any light-mode color palette into its dark-mode counterpart. Rather than naively flipping HEX values, it works in OKLCH — the perceptually uniform color space that powers modern CSS — inverting only the lightness component while preserving hue. This keeps brand colors recognizable in dark mode while still giving them the muted, calmer appearance users expect from a dark theme. Each pair is checked against WCAG contrast guidelines so you can ship accessible UIs.

Key Features

  • OKLCH-based lightness inversion preserves hue and brand identity
  • Per-color WCAG contrast ratio against #FFFFFF and #121212 backgrounds (AA / AAA badges)
  • Adjustable desaturation, lightness floor and ceiling for fine control
  • Side-by-side light and dark preview swatches
  • Exports as drop-in CSS variables for :root, [data-bs-theme="dark"] and prefers-color-scheme
  • Accepts 3- and 6-digit HEX in any whitespace-, comma- or newline-separated format
  • 100% browser-side — your palette never leaves your device
Dark Mode Pair Generator — Paste a light-mode HEX palette and get the matching dark-mode colors via OKLCH lightness inversion. WCAG contrast checks
Dark Mode Pair Generator

How to Use

  1. Paste your light-mode HEX colors into the palette box (one per line works best)
  2. Optionally adjust desaturation if dark colors look too saturated
  3. Tune the lightness floor to keep dark backgrounds from going pure black
  4. Tune the lightness ceiling to keep light text from going pure white (reduces eye strain)
  5. Click Generate Dark Pair to see swatches, WCAG contrast scores and the CSS variables export
  6. Copy the CSS block and drop it into your stylesheet — your dark theme is ready

Frequently Asked Questions

HSL is a 1970s convenience color space — pleasant for pickers but perceptually wrong. A bright yellow at HSL 60 50 50 looks far brighter than a deep blue at HSL 240 50 50, so naively inverting lightness in HSL gives uneven results: pale yellows turn into dim mustard while pale blues stay bright. OKLCH (designed by Björn Ottosson in 2020 and now native to CSS) is perceptually uniform: equal lightness values look equally bright across all hues. Inverting L in OKLCH gives a balanced, accessible dark theme without per-color tweaking.

Dark themes intentionally desaturate colors because vivid saturation against a dark background is visually fatiguing — your eye pupils widen in low-light environments, amplifying chromatic aberration and bleeding. iOS, macOS and Material Design all reduce chroma in their dark palettes by roughly 10-30%. The default 15% desaturation here matches those guidelines. If your dark colors feel TOO washed out, reduce the slider toward 0%; if they feel too vibrant, push it toward 50%.

Floor sets the darkest lightness any dark-mode color can reach. A floor of 12% prevents your darkest colors from snapping to pure black (#000), which Apple's Human Interface Guidelines explicitly discourage because pure-black backgrounds make halos and ghosting around text more visible on OLED. Ceiling caps how light a dark-mode color can be, typically 92-95%, so your 'white' text becomes a soft off-white instead of #FFFFFF — that reduces contrast harshness and eye strain during long reading sessions.

The tool computes WCAG 2.1 contrast ratios for each pair against typical light (#FFFFFF) and dark (#121212) backgrounds and labels them: Fail (<3), AA Large (≥3), AA (≥4.5), AAA (≥7). Body text needs at least AA (4.5:1) and large text at least AA Large (3:1). If you see Fail badges, the color is meant as a decorative or large-display color, not body text — pair it with the nearest AA-passing tone for text usage.

Solid colors only. For gradients, run each stop color through the tool individually and reassemble in your CSS. The OKLCH gradient interpolation in modern CSS (linear-gradient(in oklch, ...)) will give a perceptually smooth result with the converted stops, much smoother than the default sRGB-space gradient that tends to muddy out in the middle.

The CSS export uses standard CSS variables which work natively in Tailwind v3+ via the @theme directive, in SCSS via @use 'sass:meta', and in plain CSS in any modern browser (Chrome 49+, Safari 9.1+, Firefox 31+). For React Native or Flutter, copy the HEX values from the swatch table and define them in your own constant file. The variable naming pattern (--color-1, --color-2, ...) is intentionally generic so you can rename them to match your design tokens (--brand-primary, --bg-surface, etc.) before pasting.

color-scheme tells the browser which built-in form controls and scrollbars to use — it does NOT modify your palette. color-mix() blends two colors but cannot intelligently invert lightness while keeping hue. This tool gives you concrete HEX values you ship as design tokens, which means you control exactly what users see and can audit accessibility ahead of time. The output is also compatible with screenshot-based design QA, theme switchers and server-rendered HTML emails — all places where dynamic CSS functions wouldn't help.
See also
Color ToolsCOLOR TOOLS31
WuToolsWUTOOLS