Navy Blue

The darkest everyday blue. Formal, trusted and naval, it works as a softer alternative to black.

Navy Blue, the usual valueBlue
#1F2A44
44 navy blues in the library

Pick any swatch to see its codes, its contrast and the palette it comes from.

01Put it to work

Can you read text on it?
White text looks like thisVery easy to read
Fine for any text, even small print. Contrast 14.3 to 1
Black text looks like thisHard to read
Avoid for text. Use it for shapes and backgrounds instead. Contrast 1.4 to 1

White text reads better here. The contrast number compares how light the text is with how light the colour behind it is. It runs from 1, where the text disappears, to 21, black on white. The web accessibility standard asks for at least 4.5 for normal text and 3 for big headlines.

Pick a swatch above to see it in its own palette, next to the colours it was chosen to sit with.

02Tints and shades

A ramp from 50 to 950 around #1F2A44, in equal perceptual steps, for backgrounds, borders and hover states. Click a step to copy it.

0359 palettes with navy blue

VictorianVictorianUltramarine StudyPaintingAbstract ExpressionismAbstract ExpressionismMusicMusicStudio SessionMusicGlass TowerArchitectureSurrealismSurrealismMagritteSurrealismCubismCubismBlue & WhitePottery / CeramicsEditorial PhotographyEditorial PhotographyNew WaveNew WaveCold IndustrialNew WaveARPANETWeb 1.0ChromecoreChromecoreEarly AppleWeb 2.0 GlossClay DarkNeumorphismDark GlassGlassmorphismVaporwaveVaporwaveLost HighwayVaporwaveRain CityCyberpunkYacht ClubLuxury MinimalCyber MinimalismCyber MinimalismBlueprint UICyber Minimalism

04The styles that use it

Music3Architectural Futurism3Surrealism2New Wave2Vaporwave2Cyber Minimalism2Tech Spec2Gothic Architecture2Mediterranean Architecture2Neo 3D2Bento UI2Victorian1Painting1Abstract Expressionism1Architecture1Cubism1Pottery / Ceramics1Editorial Photography1Web 1.01Chromecore1Web 2.0 Gloss1Neumorphism1Glassmorphism1Cyberpunk1Luxury Minimal1Grunge1Blueprint1Art Deco1Dark Academia1Retrofuturism1Frutiger Aero1Corporate Memphis1Dreamcore1Architectural Postmodernism1Neo-Futurism1Scandinavian Architecture1Vintage 80s1Pixel Art1Neoclassical1Streamline Moderne1

And 10 more, in the palettes above.

05Questions

What is the hex code for navy blue?

Navy Blue is most often given as #1F2A44. There is no single official value (CSS's named navy is #000080); the 44 navy blue swatches in the Omoro library run across the range shown on this page.

What colours go with navy blue?

In the library's palettes, navy blue most often sits beside yellow, red and purple, with grey and white as the neutrals.

Which design styles use navy blue?

Music, Architectural Futurism and Surrealism use it most. 50 styles use it in all.

Goes withYellow 36%Red 24%Purple 17%Pink 14%Green 14%Orange 10%

06More blue shades

Cobalt BlueBaby BlueElectric Blue
Every colour familyAll colors and shades →
All palettes →Browse the styles →