Dark Color Palette Generator
Deep, low-lightness palettes ideal for dark mode interfaces, premium SaaS and bold editorial design.
CSS variables
:root {
--color-1: #261726;
--color-2: #422433;
--color-3: #5F3030;
--color-4: #3A7E50;
--color-5: #429E9E;
}Tailwind config
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
brand1: "#261726",
brand2: "#422433",
brand3: "#5F3030",
brand4: "#3A7E50",
brand5: "#429E9E",
},
},
},
};About dark color palette generator
Dark palettes are not just "invert the light theme". The interesting design decisions happen at the very low end of the lightness scale — between 5% and 25% — where a tiny shift makes the difference between a comfortable dark surface and a flat, plasticky one. The best dark palettes hold a subtle hue tint (a touch of blue, warm gray, or violet) instead of using pure neutral dark gray, because a tinted dark feels intentional rather than absent.
A working dark palette has at least four surface levels: app background, card surface, elevated surface (modals, popovers) and high-contrast surface (overlays, focused panels). Each step is roughly 4-6 lightness points apart so elevation is visible without shadowing. On OLED panels you can push the app background to true black (#000) for battery savings, but be aware the contrast jump to the next surface gets harsh.
Accent colors in dark mode usually need to be desaturated 10-15% compared to their light-mode siblings — fully saturated colors vibrate uncomfortably against dark backgrounds. Body text should be a near-white tinted slightly toward warm (rgb(229, 231, 235)) instead of pure white, which can feel glaring on long reads.
Frequently asked questions
What makes a good dark palette?+
Avoid pure black for the main background — a slightly tinted dark gray (think #0F172A or #111827) feels intentional rather than empty. Build at least four surface levels for elevation, keep accent saturation moderate, and ensure body text sits above 4.5:1 contrast on the darkest surface where it will appear.
Should I use pure black for dark mode?+
Generally no, except for OLED-first products where pure black saves battery. On LCDs, pure black creates an uncomfortable contrast jump to the next surface. A near-black like #0A0A0F or #111827 reads as "dark" to users while leaving room above for cards and modals.
Why do my dark palette accents look off?+
Fully saturated colors that work in light mode often vibrate against dark backgrounds — your eyes adjust to the dark and amplify saturated wavelengths. Drop saturation by 10-15% and lift lightness slightly. A vivid #FF3366 in light mode may need to become #FF668A in dark mode to feel calm.
Can I use this for dark mode design tokens?+
Yes. Export the palette as CSS variables, then map them to semantic tokens (surface, surface-elevated, on-surface, primary, accent, border-subtle). Keep semantic and palette tokens separate so swapping the palette later doesn't require rewriting components.
How does dark mode affect typography color?+
On dark backgrounds, pure white text (#FFFFFF) feels too sharp on long reads. Drop to a slightly off-white (#E5E7EB or #F3F4F6). For secondary text, do not just lower opacity — that often produces muddy gray. Pick a separate token like #9CA3AF that has been tuned for dark mode.