Colors
Dark Mode Palette Builder
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.
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.
Why tint the surfaces instead of using pure grey?
Subtly tinting dark surfaces toward your accent hue (a hint of blue, for example) makes a dark UI feel cohesive and intentional rather than flat and lifeless, and it helps layered surfaces read as a system. The generator nudges each surface slightly toward the accent so the whole palette feels designed, not just dimmed.
Will the text colors be readable on the dark surfaces?
The palette pairs light, high-contrast text colors with the dark surfaces so body and heading text stay legible, which is the core of accessible dark mode. Contrast still depends on the exact pairing, so for critical text verify the specific text-on-surface combination against the WCAG 4.5:1 ratio in a contrast checker.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.