Midnight Mirage
#001f3f
Deep midnight navy with velvety, inked contrast
About Midnight Mirage
On a dark canvas, Midnight Mirage reads like a navy that refuses to collapse into near-black. It's noticeably lighter than Oceanic Noir and less ink-deep than Beyond the Stars, so it keeps its blue identity even in dense UI. The undertone stays strictly blue, with a calm, velvety presence rather than the cooler, cleaner lean of Midnight Ocean.
The one you reach for when you want header bars, side-nav chrome, and primary button fills to feel anchored without turning heavy. It works great in dashboards and finance apps where you need consistent navigation and status chips that don't drift toward icy highlights or murky midtones. I also like it for logistics control panels and trading portals because it holds character across gradients without going flat.
Pair it with crisp off-whites for text and restrained cyans for active states. If you stack it next to multiple deep blues, it's the shade that stays legible, but you still want clear spacing and thin borders so the UI doesn't feel monochrome.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.