Navy blue color

Codes

CSS keyword navy resolves to this hex.

• HEX#000080
• RGB0, 0, 128Copy RGB
• HSL240, 100%, 25%Copy HSL
• CMYK100, 100, 0, 50Copy CMYK

Shades and tints

Ten steps toward black, then ten toward white. The outlined stop is #000080.

• 00000D

• 00001A

• 000026

• 000033

• 000040

• 00004D

• 00005A

• 000066

• 000073

• Base

• 1A1A8D

• 333399

• 4D4DA6

• 6666B3

• 8080C0

• 9999CC

• B3B3D9

• CCCCE6

• E6E6F2

• Complementary

  • #000080
  • #7F8000

• Analogous

  • #004080
  • #000080
  • #400080

• Triadic

  • #000080
  • #800000
  • #008000

• Tetradic

  • #000080
  • #800040
  • #7F8000
  • #008040

Contrast

Ratios use #000080 against white (#FFFFFF) and near-black (#161616). AA means 4.5:1 for body text.

• On white

  16.01:1

  AAA

• On near-black

  1.13:1

  Fails AA

• White text on this color

  16.01:1

  AAA

• Near-black text on this color

  1.13:1

  Fails AA

How to use navy blue

Navy blue on the web is the CSS keyword navy, hex #000080. There is no separate keyword navyblue. The value has no red, no green, and half of full blue, so it reads as a dark pure blue rather than the slightly grayed navy of many uniforms. Crayola and fashion navies often include a little red or green. Say which one you mean in the token name.

#000080 holds white text at strong contrast, which is why it shows up on headers, links, and footer bands. It is too dark for a large page background unless the rest of the UI is equally dark. A full page of navy needs light text everywhere, including form placeholders. Tints of this hex climb toward a clearer blue and never become periwinkle on their own, because the hue stays near 240 degrees. If you need a dusty blue, start from the periwinkle page. Cobalt blue (#0047AB) is the brighter neighbor and a better accent when navy feels too close to black on a dim display.

Nearby colors

• Cobalt blue#0047AB
• Indigo#4B0082
• Periwinkle#CCCCFF