Midnight Blue color palette
Five blues that never get light. #001F3F and #003366 are deep navies, #004080 a darker cobalt, and #003DB3 and #0055CC are royal blues with a little more brightness. It's formal and trustworthy, the reason navy shows up in so many bank and law firm logos. Since every shade is dark, plan on white text and maybe a single warm accent. Banks and law firms are the classic users.
Midnight Blue palette in use
Start with #001F3F as the main background and #003366 or #004080 for cards and the nav bar. #0055CC and #003DB3 suit buttons and active tabs, with white for all text.
This pair measures 16.56:1, so it works for body text too. The button uses #0055CC with white text.
ButtonGood for
- Banking app
- Law firm website
- University brochure
- Corporate annual report
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 Blue palette as code
CSS variables
:root {
--midnight-blue-1: #001F3F;
--midnight-blue-2: #003366;
--midnight-blue-3: #004080;
--midnight-blue-4: #003DB3;
--midnight-blue-5: #0055CC;
}Tailwind v4
@theme {
--color-midnight-blue-1: #001F3F;
--color-midnight-blue-2: #003366;
--color-midnight-blue-3: #004080;
--color-midnight-blue-4: #003DB3;
--color-midnight-blue-5: #0055CC;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'midnight-blue': {
100: '#001F3F',
200: '#003366',
300: '#004080',
400: '#003DB3',
500: '#0055CC',
},SCSS
$midnight-blue-1: #001F3F;
$midnight-blue-2: #003366;
$midnight-blue-3: #004080;
$midnight-blue-4: #003DB3;
$midnight-blue-5: #0055CC;JSON
["#001F3F","#003366","#004080","#003DB3","#0055CC"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.