Dark Blue

#315b7d

Deeper, muted blue backbone for dense sections

Save
Share

About Dark Blue

Dark Blue is what happens when you push saturation higher and strip away the warmth, it's heavier than Beyond the , more intentional than , 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.

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
7.18:1AAA

On Gray 100 #f5f5f5

Aa
6.59:1AAAAA Large

On Gray 900 #18181b

Aa
2.47:1Fail

On Black #000000

Aa
2.92:1Fail

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.

Create a gradient with Dark Blue

Open the generator with this color pre-loaded.

Start creating