Midnight color palette
Five shades that all live after dark: black #0A0A0A, two ink navies, a deep blue #0F3460 and a muted violet, #533483. The differences are subtle, so the palette is about layering surfaces, and you'll bring in an off-white or light accent for anything people need to read. It feels quiet and expensive. It suits crypto dashboards and personal portfolios that want a night-mode look.
Midnight palette in use
#0A0A0A is the base layer, with #1C1C2E and #16213E for cards and sidebars and #0F3460 for active rows. #533483 suits buttons and selected states, with off-white for all text.
This pair measures 19.79:1, so it works for body text too. The button uses #533483 with white text.
ButtonGood for
- Dark-mode app
- Crypto dashboard
- Personal portfolio
- Late-night radio show
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Midnight palette as code
CSS variables
:root {
--midnight-1: #0A0A0A;
--midnight-2: #1C1C2E;
--midnight-3: #16213E;
--midnight-4: #0F3460;
--midnight-5: #533483;
}Tailwind v4
@theme {
--color-midnight-1: #0A0A0A;
--color-midnight-2: #1C1C2E;
--color-midnight-3: #16213E;
--color-midnight-4: #0F3460;
--color-midnight-5: #533483;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'midnight': {
100: '#0A0A0A',
200: '#1C1C2E',
300: '#16213E',
400: '#0F3460',
500: '#533483',
},SCSS
$midnight-1: #0A0A0A;
$midnight-2: #1C1C2E;
$midnight-3: #16213E;
$midnight-4: #0F3460;
$midnight-5: #533483;JSON
["#0A0A0A","#1C1C2E","#16213E","#0F3460","#533483"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.