Generator
Dark mode palette generator
Create dark-mode color palettes with readable contrast for dashboards, apps, and developer tools — then export CSS, Tailwind, or JSON.
How to build a good dark palette
- Start with a near-black background (not pure #000) and a slightly lighter surface for cards.
- Use off-white text (around #E5E7EB), not pure white, to reduce glare.
- Lift accent colors slightly — saturated colors look darker on black.
- Keep body text at 4.5:1 contrast or better against the background.
Try it
Generate a palette, switch to darker shades with the shade ramp, and preview it live. Browse curated dark mode palettes for a head start.
Check pairings with the contrast checker or browse ready-made collections.
Frequently asked questions
What background color should a dark theme use?
A very dark grey (e.g. #0F172A or #111827) usually reads better than pure black — it reduces harsh contrast and shows elevation with lighter surfaces.
Is white text okay on dark backgrounds?
Slightly off-white (e.g. #E5E7EB) is gentler than pure white and still meets contrast targets, reducing eye strain.