More games at WuGames.ioSponsoredDiscover free browser games — play instantly, no download, no sign-up.Play
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 (out-of-sRGB-gamut results are clamped to sRGB)
  • Surface-aware WCAG contrast: pick your real background token and every color is scored against it (AA / AA-Large / 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. Pick your background token in the light- and dark-surface dropdowns so every color is scored against the real surface it sits on
  7. Copy the CSS block and drop it into your stylesheet — failing pairs are annotated as audit comments

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 the surface (background) color you select for each theme, then labels them: Fail (<3), AA Lg (≥3, large text only), AA · AAA Lg (≥4.5, passes AA for body text and AAA for large text), AAA (≥7, passes AAA for body text). Body text needs at least 4.5:1 and large text at least 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.

Use the two 'surface (background)' dropdowns above the pairs table. Earlier versions of this tool measured every color against a fixed white (#FFFFFF) or near-black (#121212), which is not how accessibility is actually evaluated — text passes or fails against the surface it actually sits on. Now you pick which palette color is your background token for the light theme and for the dark theme, and every other color's WCAG ratio is recomputed against that real surface. The selected surface is shown as '— surface —' rather than scored against itself. The thresholds applied are 4.5:1 for normal body text (AA) and 3:1 for large text (AA Large, 18pt/24px or 14pt/18.5px bold). Failing pairs are also annotated as comments in the exported CSS so your design tokens ship with their audit attached.

This tool uses the WCAG 2.1 contrast-ratio formula (relative luminance, the 4.5:1 / 3:1 thresholds) because it is the current legally referenced standard (EN 301 549, ADA, Section 508). APCA (Accessible Perceptual Contrast Algorithm) is the candidate metric for the emerging WCAG 3 and models perceived lightness contrast far better — especially for dark backgrounds, where WCAG 2.1 is known to be too lenient on light text over dark and too strict on dark text over light. APCA is not yet normative, so ship to WCAG 2.1 today, but if a dark-theme pair barely passes 2.1, treat it as borderline and verify perceptually.

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