Colors
Dark Mode Palette Builder
Used by developers, writers, and creators worldwide.
A dark mode palette builder produces a complete, ready-to-use set of dark UI colors built around a single accent hue. Give it an accent hue and it returns layered surfaces from the deepest page background up through raised cards and modals, plus a muted secondary text tone, a bright primary text tone, and two accent shades for buttons and links. The surfaces share a faint tint of your accent hue rather than pure grey, which is what makes professional dark themes feel cohesive instead of flat. Designers and developers use it to bootstrap a dark theme, define elevation layers, or fill in dark-mode design tokens without hand-tuning a dozen near-black greys. Every value is a paste-ready hex code that maps cleanly onto CSS custom properties for background, surface, text, and accent. Start from the darkest surface and step up as elements rise toward the viewer.
Read the complete guide — 4 min read
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Set your accent hue from 0 to 360.
- Click Generate to build the dark palette.
- Map surfaces to background, card, and modal layers.
- Use the accent shades for buttons and links.
Use Cases
- •Bootstrapping a dark theme for a web app
- •Defining elevation layers for cards and modals
- •Filling in dark-mode design tokens
- •Choosing accent colors for dark buttons and links
- •Building a cohesive near-black surface ramp
Tips
- →Use the darkest surface as the page background.
- →Step up surfaces as elements rise in elevation.
- →Reserve the bright text tone for headings and key copy.
- →Check accent-on-surface contrast before shipping.
FAQ
why tint the surfaces instead of using grey
Pure grey surfaces can look dull and disconnected from your brand. A faint tint of the accent hue across the surfaces unifies the theme and reads as intentional, which is how polished dark modes are built.
how are the surfaces ordered
They run from the deepest page background through progressively lighter surfaces for raised elements like cards and modals. Use the darkest as the base and lighter surfaces as components rise in elevation.
will the text colors be readable
The light text tones are tuned to sit well above the dark surfaces for comfortable reading, but always confirm body text reaches WCAG AA 4.5:1 against the specific surface you place it on.
You might also like
Popular tools from other categories that share themes with this one.