Royal Navy Blue Color Code, Shades and Combinations

Royal blue occupies the border between navy and pure blue, and that border is where most colour disagreements start. One team's royal blue is another team's navy, and both are looking at values that differ by thirty points of lightness. This guide fixes the terminology, lists the values people actually mean, and covers where each one belongs in an interface.

Two different colours share the name

The CSS keyword royalblue resolves to Royal Blue #4169E1, a bright, energetic blue at 57% lightness. It is not a navy by any definition. It advances, it draws attention, and against white it gives only 4.85:1, which fails AA for body text.

Separately, the interface convention that spread through design systems in the late 2010s uses Royal Navy #1E3A8A for the same role. At 33% lightness this is genuinely a navy, and it delivers 10.36:1 against white text. That is why it became the default primary button colour in so many products: it looks confident and it passes accessibility checks without argument.

When someone asks for royal blue, establish which of these they mean before you build anything. The two produce completely different products.

The royal and jewel blue family

Read the hue column carefully. Everything from 220 to 230 degrees reads as unambiguous blue. Everything from 235 upward starts to show violet, which is why Ultramarine and Persian Blue feel like a different family even though their lightness values are similar to the others.

The historic pigments

Several names here come from pigment history rather than screen design. Ultramarine was ground from lapis lazuli and once cost more than gold, which is why it appears in Renaissance paintings only on the most important figures. Egyptian blue is the oldest known synthetic pigment. Klein blue is a twentieth-century artist's formulation designed to be as intense as a binder would allow. Their screen approximations are useful precisely because they carry that history; a brand using ultramarine is borrowing several centuries of association.

Using royal navy in interfaces

Royal navy earns its place as a primary action colour. It is bright enough to stand out against a neutral page and dark enough to hold white text, which is a narrow window that few colours fit.

:root {
  --primary: #1E3A8A;
  --primary-hover: #2A4CA8;
  --primary-active: #16296B;
  --primary-tint: #E8EDF9;
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.7rem 1.2rem;
}

.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); }

.btn-primary:focus-visible {
  outline: 3px solid #C9A227;
  outline-offset: 2px;
}

Note how the hover state is lighter, not darker. On light backgrounds, lifting the lightness on hover reads as the element responding; darkening it reads as the element being pressed, which is why the active state goes the other way. Keep the hue identical across all three states.

Focus states

A royal navy focus ring on a royal navy button is invisible. Use a colour from outside the blue family entirely, such as the brass ring in the snippet above, so keyboard users can always locate focus regardless of which element has it.

The wide-gamut problem

Saturated blues near 225 degrees are the most common victims of colour management problems. On a display with a wide gamut, an sRGB value that is not correctly tagged gets stretched, and blue stretches toward violet more visibly than any other hue. The result is a button that looks purple on a new laptop and correct on an older one.

Three mitigations help. Reduce saturation below about 70% and the shift becomes much less noticeable. Shift the hue down toward 218 to 222 degrees, moving away from the violet boundary. And test on at least one wide-gamut display before shipping, because you cannot detect the problem on the hardware that does not exhibit it.

Combinations for royal navy

Royal navy is more assertive than classic navy, so it needs more restraint around it.

• With white and light grey: the default. Lets royal navy carry all the emphasis.
• With brass Brass #C9A227: works, but both colours are strong. Use brass only for a single accent per screen.
• With sky blue Sky #7FB2E8: an analogous pairing that keeps everything in one family, ideal for charts.
• With warm grey Warm grey #8C8378: unexpected and effective. The neutral warmth stops the palette feeling clinical.
• With deep navy Ink #0A1128: use royal navy as the action colour and ink as the text colour. This is the standard enterprise combination for a reason.

Building a royal navy scale

A single royal navy is not enough for a real product. You need hover and active states, a light tint for selected rows and backgrounds, a border colour and a disabled variant. Derive all of them from one source by moving lightness while holding hue:

:root {
  --royal-050: #EEF2FC;  /* selected row background */
  --royal-100: #D9E2F7;  /* tint panels */
  --royal-200: #B4C3EE;  /* disabled fill */
  --royal-400: #4C6EA8;  /* secondary actions */
  --royal-600: #1E3A8A;  /* primary action */
  --royal-700: #16296B;  /* pressed state */
  --royal-900: #0C1840;  /* text on light tints */
}

.row--selected {
  background: var(--royal-050);
  box-shadow: inset 3px 0 0 var(--royal-600);
}

.badge {
  background: var(--royal-100);
  color: var(--royal-900);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

The lightest two steps are the ones people forget to define, and they are the ones that get invented ad hoc during development. Specifying them up front is what stops six slightly different pale blues appearing across a product.

Links and visited states

Royal navy makes a strong link colour on light backgrounds, but the visited state needs thought. The browser default purple clashes badly with a blue that already leans violet. A darker, less saturated version of your own link colour works better and keeps the palette intact:

a { color: #1E3A8A; text-underline-offset: 2px; }
a:visited { color: #3F3A7A; }
a:hover { color: #16296B; }

/* Never rely on colour alone to mark a link */
.prose a { text-decoration: underline; }

Print considerations

Royal blues sit close to the edge of the CMYK gamut and lose noticeable intensity when printed. A screen value of #1E3A8A converts to roughly 78%, 58%, 0%, 46%, and the printed result reads flatter than the display suggests. For brand-critical work, specify a spot ink or accept that the printed and digital versions will not match exactly and design the system so that mismatch does not matter.

Choosing between royal and classic navy

The decision comes down to what the colour needs to do. If it is carrying the brand and sitting behind content, use a classic navy such as Classic Navy #0A1F44: it recedes and lets your content lead. If it is marking the single most important action on a screen, use royal navy: it advances and pulls the eye. Problems arise when one colour is asked to do both jobs, which is why most mature design systems define them separately.

Explore the full range in the shade collection, or read the complete format reference for the conversion detail behind these values.

Related guides

• Midnight Navy Blue Color Code and Design Inspiration
• Light Navy Blue Color Codes for Websites and Branding
• Oxford Blue vs Prussian Blue: Color Code Differences
• Navy Blue Color Code: HEX, RGB, HSL and CMYK Reference
• 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].