Dark Blue
#315b7d
Deeper, muted blue backbone for dense sections
About Dark Blue
Dark Blue is what happens when you push saturation higher and strip away the warmth, it's heavier than Beyond the Sea, more intentional than Blue Velvet, the kind of blue that actually sits in the foreground without apology. It's still cool, but it's not trying to be clinical about it. This is the one that looks like you made a choice.
Use it in product dashboards, financial platforms, and healthcare interfaces where you need primary hierarchy that holds its own against white type and light backgrounds. Works well as persistent UI elements, button states, data highlights, anywhere you want presence without the coldness that pure cool blues can bring. It's got enough depth that it reads as intentional, enough saturation that it won't disappear depending on what's around it.
The thing: it's darker and richer than its neighbors, which means it can feel heavier on large surface areas. Test it early at actual size and actual contrast ratios, sometimes that extra saturation reads as more serious than you intended. Pair it with warm neutrals if you want to dial back the intensity; it sits fine next to them without creating the tension cooler blues do.
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.