Night Owl

#5d7b89

Deeper blue-gray for night-mode panels and alerts

Save
Share

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 , it has more weight and a cooler edge, so it feels more settled than balanced. And unlike , 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 can offer, since '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 .

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
4.51:1AAAAA Large

On Gray 100 #f5f5f5

Aa
4.13:1FailAA Large

On Gray 900 #18181b

Aa
3.93:1FailAA Large

On Black #000000

Aa
4.66:1AAAAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Night Owl

Open the generator with this color pre-loaded.

Start creating