Dark Color Palettes
Explore dark color palettes with semantic roles, accessible contrast, live interface previews, and CSS-ready HEX values.
background#0B1120
surface#111827
secondary#334155
primary#7C3AED
accent#F59E0B
muted#94A3B8
text#F8FAFC
How the colors relate
Near-black background and elevated navy surfaces create depth, while violet and amber distinguish action from emphasis without relying on brightness alone.
Where to use each role
Use the darkest tone for the page, the lighter navy for panels, off-white for text, violet for primary actions, and amber for rare highlights.
A useful variation
Cool the surface toward charcoal for an editorial look or replace amber with cyan for a more technical product direction.
Related directions
Frequently asked questions
Should a dark palette use pure black?
Not necessarily. A slightly tinted near-black often leaves more room for elevation, borders, and comfortable text contrast than pure black.