HueOdyssey
Open navigation
English
Palette field guide

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.