BYTETOOLS

Dark Mode Palette Generator

Map a light-theme palette to its dark counterpart by inverting OKLCH lightness within bounds you set, then re-check every pairing for 4.5:1 contrast.

10
Darkest a token may become
94
Lightest a token may become
85
Saturated colours glare on dark surfaces
7
Tokens
10–94%
Lightness range
5
Below 4.5:1 on surface

Light token → dark token

TokenLightDarkOKLCH lightness
--surface#ffffff#030303100% → 10%
--surface-raised#f8fafc#03030498% → 10%
--border#e2e8f0#02030693% → 10%
--text-muted#64748b#48556755% → 45%
--text#0f172a#b1bbd221% → 79%
--accent#3b82f6#003a9062% → 38%
--danger#ef4444#79000e64% → 36%

Re-check a surface and text pairing

Pick a text token and a surface token to see both themes side by side with their contrast ratios.

CSS custom properties for both themes

:root {
  --surface: #ffffff;
  --surface-raised: #f8fafc;
  --border: #e2e8f0;
  --text-muted: #64748b;
  --text: #0f172a;
  --accent: #3b82f6;
  --danger: #ef4444;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #030303;
    --surface-raised: #030304;
    --border: #020306;
    --text-muted: #485567;
    --text: #b1bbd2;
    --accent: #003a90;
    --danger: #79000e;
  }
}

/* Or drive it from a class instead of the media query */
.dark {
  --surface: #030303;
  --surface-raised: #030304;
  --border: #020306;
  --text-muted: #485567;
  --text: #b1bbd2;
  --accent: #003a90;
  --danger: #79000e;
}

What is the Dark Mode Palette Generator?

Inverting a theme by flipping every colour in RGB produces the classic bad dark mode: glowing saturated accents, surfaces that are pure black, and text that has quietly stopped meeting contrast.

  • OKLCH lightness inversion with hue preserved exactly
  • Adjustable lightness floor and ceiling to avoid pure black and pure white
  • Chroma damping so accents do not glare on dark surfaces
  • Side-by-side light and dark preview with live contrast ratios
  • Warns when a dark pairing falls below 4.5:1
  • Outputs both a prefers-color-scheme block and a .dark class

How to use the Dark Mode Palette Generator

  1. 1

    Paste your light-theme tokens, one per line as --name: #hex, or just a list of hex values.

  2. 2

    Set the lightness floor and ceiling to bound how dark and how light tokens may become.

  3. 3

    Adjust chroma damping until the accents stop glowing against the dark surfaces.

  4. 4

    Pick a text token and a surface token to see both themes previewed with their contrast ratios.

  5. 5

    Copy the generated CSS custom properties for the media query and the .dark class.

About the Dark Mode Palette Generator

Inverting a theme by flipping every colour in RGB produces the classic bad dark mode: glowing saturated accents, surfaces that are pure black, and text that has quietly stopped meeting contrast. This tool inverts in OKLCH instead, where lightness is the only thing that flips and hue is left completely alone.

Two bounds keep the result usable. A lightness floor stops surfaces bottoming out at pure black, which is what causes halation around text, and a ceiling stops light text becoming a pure white that glares. A chroma damping control pulls saturated accents back, because the same accent that looks confident on white looks radioactive on charcoal.

Once the mapping is done you can pick any text and surface token and see both themes rendered side by side with their contrast ratios, so a pairing that quietly drops below 4.5:1 in dark mode gets caught here rather than in review. Output is CSS custom properties for both themes, and everything runs locally in your browser.

Frequently asked questions

Why shouldn't dark mode use pure black backgrounds?

Pure black next to white text produces halation — the text appears to bleed at the edges, which is tiring to read and noticeably worse for people with astigmatism. A very dark grey around 8 to 12% lightness reads far more comfortably, which is why the floor control exists.

How do I convert a light theme to dark mode?

Invert lightness, keep hue, and reduce chroma. Do not invert the RGB channels, which flips hue as well and turns your blue brand colour orange. Then re-check every text-and-surface pairing, because contrast that passed in light mode often fails after inversion.

Why do saturated colors look wrong in dark mode?

A bright saturated colour against a dark surface has a much larger luminance jump than the same colour against white, so it appears to vibrate or glow. Pulling chroma back 10 to 20% usually settles it without losing the colour's identity.

Should dark mode text be pure white?

Usually not. Pure white on a dark surface is the highest-contrast option but often uncomfortably harsh for long reading. Something around 90% lightness keeps the ratio well above 4.5:1 while being easier on the eye, which is what the ceiling control is for.

Does inverting lightness preserve my brand colors?

It preserves the hue exactly, so the colour family survives. The perceived identity does shift, though — a dark navy becoming a pale blue is the same hue but a very different feeling. Review accents by eye rather than trusting the inversion blindly.

Related tools