Navy Blue Color Code: HEX, RGB, HSL and CMYK Reference

Navy blue is one of a small number of colours that most people can name but very few can specify. Ask ten designers for the navy blue color code and you will get somewhere between four and ten different answers, all of them defensible. This guide sorts out what the actual standard value is, what the alternatives are, how each colour format encodes the same colour differently, and which format to reach for in which situation.

The canonical navy blue color code

The colour that the CSS specification calls navy is Navy Blue #000080. Written out in every format, it looks like this:

The numbers tell a clear story. Red and green are switched off entirely. Blue is at exactly half its maximum. That single fact explains nearly everything about how navy behaves: it is pure blue hue with the brightness pulled down, which is the textbook definition of a shade rather than a tone or a tint.

Why 128 and not 127

People often assume half of 255 should be 127.5 and round down. The specification chose 128 because hexadecimal 80 is the natural midpoint of a two-digit hex value, and hex is how these colours were originally written. It is a nicer number in base 16 than in base 10, and the original colour keywords were designed around base 16.

Reading a HEX code without a converter

Hexadecimal intimidates people unnecessarily. A six-digit HEX code is three separate two-digit numbers stuck together, one per channel, each running from 00 to FF. To read one:

1. Split it into pairs: 00 00 80.
2. The first pair is red, the second green, the third blue.
3. Convert each pair by multiplying the first digit by 16 and adding the second, where A is 10 through F is 15.

So 80 becomes eight times sixteen, plus zero, which is 128. Apply the same method to Classic Navy #0A1F44 and you get red at 10, green at 31 and blue at 68, which is rgb(10, 31, 68). Once you have done this a few times you start reading HEX codes at a glance: any code where the third pair is meaningfully larger than the first two is going to be blue, and if all three pairs are low, it is going to be dark.

The three-digit shorthand

CSS accepts three-digit HEX codes, where each digit is doubled. #008 expands to #000088, which is close to but not identical with navy. The shorthand only reaches 4096 colours, and navy's 80 cannot be expressed in it, so navy always needs the full six digits.

RGB and when to use it

RGB describes the same three channels in decimal instead of hex. Its practical advantage is transparency. Modern CSS lets you write rgb(0 0 128 / 60%), and older syntax uses rgba(0, 0, 128, 0.6). Either way, you get a navy that lets the layer beneath show through, which is essential for overlays on photographs.

.hero-overlay {
  /* Navy at 72% opacity over a background image */
  background-color: rgba(0, 0, 128, 0.72);
}

.hero-overlay--modern {
  background-color: rgb(0 0 128 / 72%);
}

One caution worth stating: a semi-transparent navy over an unknown image is not a reliable contrast base. The measured ratio only holds against a known flat colour. If you need guaranteed legibility, layer a solid navy panel behind your text rather than relying on a translucent wash.

HSL, the format for building palettes

HSL is the format that repays learning. It describes a colour as a hue angle from 0 to 360 degrees, a saturation percentage, and a lightness percentage. Navy blue is hsl(240, 100%, 25%): hue 240 is pure blue, saturation 100% means no grey has been mixed in, and lightness 25% puts it well below the midpoint.

Because the three numbers are independent, you can build a whole navy scale by changing only the last one:

:root {
  --navy-900: hsl(240, 100%, 12%);
  --navy-800: hsl(240, 100%, 18%);
  --navy-700: hsl(240, 100%, 25%); /* #000080 */
  --navy-600: hsl(240, 100%, 34%);
  --navy-500: hsl(240, 100%, 45%);
  --navy-300: hsl(240, 100%, 68%);
  --navy-100: hsl(240, 100%, 92%);
}

Every step in that scale shares a hue, so they look like members of one family. This is why palettes built in HSL tend to feel coherent while palettes assembled from unrelated HEX codes often do not. The trade-off is that a fully saturated hue scale can look artificial at the lighter end; in production you usually drop saturation slightly as lightness rises.

HSL versus HSV

HSV replaces lightness with value, which measures brightness rather than perceived middle ground. The difference matters at the extremes. In HSL, 100% lightness is always white regardless of hue. In HSV, 100% value with full saturation is the most vivid version of that hue, not white. Navy blue is hsl(240, 100%, 25%) in HSL and 240°, 100%, 50% in HSV. Photoshop and Figma colour pickers are built on HSV, which is why the square-plus-slider picker behaves the way it does.

CMYK and the print reality

CMYK inverts the model. Screens add light, so all channels at maximum produce white. Ink absorbs light, so all inks at maximum produce a muddy near-black. Navy blue converts to roughly 100%, 100%, 0%, 50%, which means full cyan, full magenta, no yellow and half key.

Two things follow from this. First, deep saturated navies sit near the edge of the CMYK gamut, so they lose a little punch on paper compared with screen. Second, a navy built from three inks plus key can shift noticeably if the press is slightly out of registration or the paper stock is warmer than expected. For brand-critical navy, many teams specify a spot ink instead, precisely to avoid that variability.

Which navy should you actually use?

The specification value is correct but rarely the best choice. Pure #000080 is fully saturated, which on a modern wide-gamut display can read faintly purple. Most brand navies pull back the saturation and add a fraction of green. Here is how the common alternatives compare:

Read that table by hue first. Anything at 240 degrees is pure blue and will lean slightly violet. Anything in the low 220s reads as unambiguous navy. Anything below 215 has green in it and will start looking like teal beside a truer navy. Then read saturation: high figures give you a vivid navy that dominates a layout, lower figures give you a navy that behaves like a dark neutral and lets other colours work.

Converting between formats reliably

If you are converting by hand or in code, work from HEX outward. HEX to RGB is a base conversion with no information loss. RGB to HSL is a lossless transformation of the same cube into cylindrical coordinates, though rounding to whole numbers introduces small errors when you round-trip. RGB to CMYK is where accuracy genuinely degrades, because the naive formula ignores colour management entirely.

A practical rule: store one canonical value per colour, always the HEX, and derive everything else. The moment a team starts keeping separate HEX and RGB values in different documents, they drift, and someone eventually ships a button that is two units off the brand colour.

Using navy values in real code

Define your navy once as a custom property and reference it everywhere. This makes theme changes trivial and stops the same colour appearing in five slightly different forms across a codebase.

:root {
  --navy: #000080;
  --navy-ink: #0A1128;
  --navy-lift: #3A5BA0;
  --navy-tint: #E4E9F2;
}

.site-header {
  background: var(--navy-ink);
  color: #FFFFFF;
  border-bottom: 1px solid var(--navy);
}

.link {
  color: var(--navy-lift);
}

.notice {
  background: var(--navy-tint);
  border-left: 3px solid var(--navy);
}

Where to go next

If you need a specific navy rather than the reference value, the shade collection lists 98 options with full values and contrast data. For choosing colours to sit alongside navy, read the combinations guide. For the CSS side in more depth, including color-mix() and gradients, see how to use navy blue in CSS and HTML.

Related guides

• Oxford Blue vs Prussian Blue: Color Code Differences
• Light Navy Blue Color Codes for Websites and Branding
• Dark Navy Blue Color Codes and Matching Colors
• Metallic Navy Blue Color Code and Design Uses
• All navy blue color guides

About the author

navy blue color code Editorial Team researches and maintains the navy shade library at navy blue color code. Every value published here is derived from its source HEX code rather than transcribed, and articles are reviewed whenever the underlying standards change. Published by navy blue color code. Corrections are welcome at [email protected].