Midnight Blue Color Code
Midnight Blue·#191970
Midnight Blue is a dark CSS named blue at #191970 that feels more cinematic, cooler, and slightly more chromatic than Navy. Use it when you need a near-night anchor for dark themes, dashboards, hero backdrops, and interface shells that should feel deep without collapsing fully into black.
Tonal Scale
Contrast Checks
White text on this color
Buttons, badges, and filled actions.
Dark text on this color
Large headings and selective UI.
This color on light surface
Links, borders, and icons on light UI.
Professional Reference
Accessibility Matrix
White text on this color
White text placed on the current color.
Dark text on this color
Dark text or headings on the current color.
This color on light surface
Use this color for links, strokes, or icons on light UI.
This color on dark surface
Use this color inside dark shells for strokes, tags, or icons.
Where It Works
- Dashboards, immersive shells, hero backdrops, and code-like surfaces.
- Dramatic dark structure with visible blue identity.
- Pairs with white, silver-gray, and electric or royal blue.
Reference Notes
Midnight Blue is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product and interface reference work.
Trust-building blues for enterprise and SaaS.
Related Colors
Palette Starting Points
Implementation Snippets
:root {
--color-midnight-blue: #191970;
--color-midnight-blue-rgb: 25 25 112;
}class="bg-[#191970] text-white"
class="hover:bg-[#121251] ring-1 ring-[#191970]"{
"midnightBlue": "#191970",
"midnightBlueRgb": [25, 25, 112],
"midnightBlueHsl": [240, 64, 27]
}