Dark Mode Palette Generator
Generate a dark theme from a light palette by inverting lightness in OKLCH rather than the colour itself, with elevation surfaces, contrast checks and the CSS custom properties for both themes.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Inverting the colours is not converting the theme
Applying a filter that inverts every colour produces a dark interface where the brand hue has become its complement, photographs are negatives and nothing looks intentional. A dark theme is a different set of colours chosen for a dark surface, not the light theme reversed. What actually transfers is the relationship: which surfaces sit above which, and which text is primary against secondary. Preserving those relationships while choosing new values is the whole exercise.
Pure black and pure white are both wrong
White text on pure black produces halation, where the light glyphs appear to smear into the dark background, which is tiring to read and worse for people with astigmatism. Established dark themes use a very dark grey around 18 percent OKLCH lightness for the base surface, which is the familiar #121212, and an off-white for text rather than pure white. The reduced extreme also leaves room to show elevation, which pure black does not, since nothing can sit below it.
Elevation is lightness, not shadow
On a light theme, a raised surface is indicated by a shadow. On a dark theme shadows are nearly invisible, so raised surfaces are indicated by making them lighter instead. Each level of elevation is a step up in lightness, which means a dark theme needs a ladder of surface colours where a light theme needed only one or two. Generating that ladder is most of the work, and it is what makes a dark theme feel finished rather than flat.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why not just invert the colours?
Because inversion turns the brand hue into its complement and photographs into negatives. A dark theme is a different set of colours chosen for a dark surface; what transfers is the relationship between surfaces and text, not the values.
Why avoid pure black backgrounds?
White text on pure black produces halation, where the glyphs appear to smear, which is tiring and notably worse for readers with astigmatism. It also leaves nowhere to show elevation, since no surface can sit below pure black.
How is elevation shown in dark mode?
By lightness rather than shadow. Shadows are nearly invisible on a dark surface, so raised elements are made lighter instead. A dark theme therefore needs a ladder of surface colours where a light theme needed one or two.
Should saturated colours carry over unchanged?
No. A colour that reads well on white is frequently too dark and too saturated on a dark surface. Raising lightness and reducing chroma keeps it recognisable while making it legible, which is what this generates.
How do I implement both themes?
Define both as CSS custom properties and switch with a class or a media query. Using prefers-color-scheme alone respects the system setting; adding an explicit toggle lets people override it, and most implementations want both.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Paste your light theme palette to generate a dark theme that actually works.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.