Navy Blue Color

About navy blue

#000080 is the CSS named color navy, one of the original 16 HTML colors: blue at 128 with no red or green. It is named after the dark blue of naval uniforms.

In CSS, navy is marginally darker than darkblue (#00008B). Many modern “navy” brand colors are softer, adding a little red and green — midnightblue (#191970) or custom values such as #1F2A44 give that more muted look.

#000080 is the value of the CSS named color navy, defined in the CSS Color specification and identical in every browser.

Other colors called navy blue

• Dark blue (CSS) #00008BVery slightly lighter.Copy
• Midnight blue (CSS) #191970A softer, less saturated navy.Copy

Navy Blue shades and tints

Shades mix navy blue with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with navy blue

Color harmonies based on the hue of #000080: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Navy Blue contrast and readability

On a navy blue background, white text reads best (16.00:1). Here is how navy blue works as a text color:

Navy is a classic alternative to black for text, headers and footers: it has very high contrast with white and pairs well with white, gold, coral and light gray.

Using navy blue in CSS and HTML

:root {
  --color-navy-blue: #000080;
}

.highlight {
  background-color: var(--color-navy-blue);
}

.banner {
  background-color: navy;
  color: #ffffff;
}

.label {
  color: #000080;
  border: 2px solid rgb(0, 0, 128);
}

<p style="background-color: #000080; color: #FFFFFF;">
  Navy Blue background
</p>