Night Owl
#5d7b89
Deeper blue-gray for night-mode panels and alerts
About Night Owl
Night Owl looks like the blue you get after the lights dim, a deep, slightly slate-leaning tone that still reads clean on a screen. Compared with Citadel, it has more weight and a cooler edge, so it feels more settled than balanced. And unlike Beach View, which stays airy and soft, Night Owl holds its saturation and doesn't fade into the background.
I use it for dense UI where you need structure without going to near-black: sidebar headers, table strip fills, and active states in dashboards and media players. It also shows up in healthcare record layouts where section bands need to feel anchored but not clinical. Night Owl works especially well when the surrounding surface is pale and you want a clearer boundary than Horizon can offer, since Horizon's gray tilt can read a bit more muted.
Quick pairing note: give it brighter, higher-contrast text or it can feel heavy next to softer blues like Beach View.
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.