Naval

#41729f

Deeper naval blue for grounded, steady navigation

Save
Share

About Naval

Naval looks like a deep workspace blue you'd find on a ship's chart table, not a sky, not a gray wash. It's cooler and more anchored than the softer, lighter blues, and it carries its saturation without drifting into teal. Compared to , it trades that mid-tone openness for a firmer, weightier presence. Compared to and , it stays darker and more decisive, so it doesn't feel like a background color pretending to be a highlight.

I like it for dashboards and finance apps where key states need to read confident on screens full of numbers. Use it for primary actions, selected filters, and section headers in SaaS admin panels and logistics consoles. It also holds up in print-adjacent UI, like brand bars in investor decks or operational reports.

One quirk: Naval can feel a touch reserved next to warmer blues, so pair it with cleaner, lighter neutrals and slightly brighter secondary accents to keep the interface from going muted.

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
5.08:1AAAAA Large

On Gray 100 #f5f5f5

Aa
4.66:1AAAAA Large

On Gray 900 #18181b

Aa
3.49:1FailAA Large

On Black #000000

Aa
4.13:1FailAA 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 Naval

Open the generator with this color pre-loaded.

Start creating