Nocturne Blue
#37525f
Deep nocturne blue with softer, warm slates
About Nocturne Blue
Nocturne Blue looks like the blue you get after the screen has warmed up a little, not the sharp night blues that feel icy on first load. It's deep, but it doesn't feel compressed like Dark Secret. It also doesn't go flat and absorbent like Great Void. This shade keeps a smoother, more open glow, with a cooler undertone that stays controlled rather than turning slate-gray.
I use it in dashboards and finance apps where the UI needs a calm primary surface and reliable hierarchy. Think dark-mode section headers, active tab backgrounds, and chart panels that have to sit behind dense data without stealing focus. Compared to Night Edition, it's more settled and less "backlit," so it feels sturdier for navigation bars and persistent panels. the one you reach for when you want blue presence without the heavy punch.
If your surrounding grays are very neutral, pair Nocturne Blue with slightly cooler text or thin dividers so it doesn't drift toward muddier contrast at small sizes.
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.