Online Tool Store
Dark Mode Palette Converter
Convert a light-theme CSS palette into a matching dark-mode palette by inverting lightness while keeping hue and saturation. Runs in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Start with a curated palette
Choose a direction, then fine-tune the variables below.
Paste CSS custom properties or name: #hex pairs. Comments, semicolons, and a :root wrapper are supported.
Light preview
Dark preview
How it works
- Start with a curated preset or paste your light-theme CSS variables.
- Choose a conversion style and compare the light and dark swatches side by side.
- Review the semantic contrast checks, choose an output format, then copy or download the dark variables.
The formula
Convert hex -> HSL Adjust lightness while preserving hue and saturation Convert HSL back -> hex and report the text/background contrast
FAQ
How does the conversion work?
Each color is converted to HSL, then its lightness is adjusted while hue and saturation stay consistent. The balanced style also nudges near-white backgrounds darker and near-black text lighter for a more practical starting point.
What are the palette presets?
Presets are curated light-theme starting points with coordinated background, surface, text, muted, brand, and border colors. Select one to load it into the editor, then adjust any value before converting.
How is accessibility checked?
When your variables use familiar names such as bg, surface, text, muted, and brand, the tool checks several dark-theme combinations and labels each ratio as AAA, AA, large text only, or needs adjustment. This is useful guidance, not a complete accessibility audit.
Can I download the result?
Yes. Choose CSS variables or a complete CSS :root block, then use Download CSS to save the generated dark palette as dark-palette.css.
Will this produce a perfect dark theme automatically?
It provides a consistent first pass, but contrast ratios, brand colors, hover states, and component-specific colors may still need manual refinement.
What input format does it accept?
CSS custom properties (--name: #hex;) or plain name: #hex pairs, one per line. Comments, semicolons, and a :root wrapper are also fine.
Is my palette uploaded anywhere?
No. Parsing, conversion, contrast checking, and copying happen entirely in your browser.
Can I export the dark palette as SCSS or design tokens?
Not directly. You can copy the CSS custom properties, a :root block, or plain name:hex pairs, then adapt them into SCSS variables or a token file for your own design system.
Can I use this with a Tailwind CSS theme?
Yes. Paste your Tailwind color values as name: #hex pairs or CSS custom properties and convert them the same way, then copy the results back into your Tailwind config.
How we compare
| Feature | Online Tool Store | Manual conversion | Design plugins |
|---|---|---|---|
| Curated starting palettes | ✓ | ✗ | Varies |
| Whole palette converted at once | ✓ | One color at a time | ✓ |
| Browser-only workflow | ✓ | ✓ | Requires a design tool |
Use the presets for a fast visual direction, or paste your own CSS variables when you need a faithful project-specific conversion.