Midnight Dreams
#002233
Soft midnight blue with smoky, low-saturation calm
About Midnight Dreams
Midnight Dreams reads like a deep, inked blue that stays a touch more present than a true near-black, but without drifting toward the velvety midtone of Oceanic Noir. Compared to Midnight Mirage, it's less "navy-adjacent" and more condensed, so it feels tighter and more controlled in large UI blocks.
I use Midnight Dreams when I want header bars and side navigation to feel grounded, not softened. It's a strong fit for dashboards and finance apps, especially in places where you need dark surfaces that won't look flatter beside gradients. In darker media playlists, ticketing consoles, and command center screens, the blue undertone stays consistent and avoids the absence-first vibe you'd get from Black Box.
Pair it with clean cool off-whites and restrained blue-cyan highlights. If you stack it next to very dark teals, double-check your border contrast so the layout doesn't collapse into one continuous slab.
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.