Light Navy Blue Color Codes for Websites and Branding

Light navy is a contradiction that designers use every day. Navy is defined by depth, so a light navy has already given up the property that made it navy. What remains is the hue and a recognisable family resemblance, and that turns out to be extremely useful: light navies give you backgrounds, surfaces and secondary elements that belong to the same system as your dark brand colour without repeating it. This guide covers the values, where each one belongs and how to generate your own correctly.

The light navy range

Ten shades in the collection sit at or above 40% lightness. They divide into two groups with different jobs.

Group one: functional light navies

The first four shades, from Light Navy #3A5BA0 down to Periwinkle Navy #8C9EDA, still carry enough saturation and depth to act as colours in their own right. Light Navy in particular is the most useful value in this range: at 6.6:1 on white it is safe for links, body text and icons, while being visibly lighter than any brand navy you are likely to pair it with.

Group two: tints and surfaces

From Mist Navy #B3C0D6 upward, these are no longer colours you place text in. They are surfaces you place text on. Their value is that they are not grey: a page built on #E4E9F2 reads as cool and considered, where the same page on #F0F0F0 reads as unfinished.

Generating light navies correctly

The instinct is to take your brand navy and raise the lightness. Done alone, this produces a tint that looks garish, because saturation that reads as rich at 20% lightness reads as neon at 70%. Compare the two approaches:

/* Lightness only: saturation stays at 100% */
--wrong-100: hsl(240, 100%, 92%); /* looks artificially vivid */

/* Lightness up, saturation down: the usable version */
--right-100: hsl(220, 34%, 92%);
--right-200: hsl(220, 32%, 86%);
--right-300: hsl(220, 30%, 78%);
--right-400: hsl(220, 28%, 66%);
--right-500: hsl(220, 34%, 52%);

The working rule is to reduce saturation by roughly one point for every two points of added lightness above the midpoint. It is not a law of physics, but it tracks how the eye actually perceives these colours and it produces scales that look deliberate.

Doing it with colour-mix

Modern CSS can generate the scale for you, which keeps everything tied to a single source value:

:root {
  --navy: #14213D;
}

.tint-90 { background: color-mix(in srgb, var(--navy) 10%, white); }
.tint-75 { background: color-mix(in srgb, var(--navy) 25%, white); }
.tint-50 { background: color-mix(in srgb, var(--navy) 50%, white); }

/* Mixing in oklab gives more even perceptual steps */
.tint-even { background: color-mix(in oklab, var(--navy) 25%, white); }

Mixing with white is a true tint and keeps hue exactly constant. It produces slightly cooler results than manual HSL adjustment, which many people prefer for navy specifically. If you need older browser support, generate the values once and paste them in as static HEX codes.

Where light navy belongs

Page and section backgrounds

A very light navy background is one of the cheapest ways to make a site look considered. Page #F4F7FC against white cards creates separation without borders, and it costs nothing in contrast because text still sits on near-white.

body {
  background: #F4F7FC;
  color: #131C33;
}

.card {
  background: #FFFFFF;
  border: 1px solid #DCE4F0;
  border-radius: 14px;
}

Links and interactive text

Light Navy at #3A5BA0 is a better link colour than the browser default blue on a navy-branded site, because it belongs to the palette. Keep the underline: colour alone is never sufficient to indicate a link.

Data visualisation

A navy lightness scale is the ideal sequential palette for charts. Because only one variable changes, readers interpret the ordering instantly and the chart survives greyscale printing. Use four or five steps at most; beyond that, adjacent steps become indistinguishable.

Empty and disabled states

Light navies communicate "not now" without communicating "broken". A disabled button in Baby Navy #C3CFE2 with Pale Navy #7A8FB8 text reads clearly as inactive while remaining part of the design.

Branding with light navy

Light navy as a primary brand colour is unusual and, when it works, distinctive. It signals something closer to calm and openness than the authority a dark navy carries, which suits healthcare, education and wellness better than finance. Two practical warnings apply.

First, light navy logos struggle on white. A mark in #7A8FB8 gives under 3:1 against a white background, which makes it hard to see at small sizes and in poor lighting. Provide a darker variant for those contexts.

Second, light navies shift more than dark ones across devices. A pale tint that looks blue on a calibrated monitor can look plain grey on a cheap phone screen. Test on the worst display you can find before committing.

Light navy in email and legacy environments

Email clients are the last place where modern CSS cannot be relied on. Custom properties, color-mix and even some gradient syntax are stripped or ignored by several major clients, which means light navy tints have to be written as literal HEX values in inline styles.

<table role="presentation" width="100%" style="background-color:#F4F7FC;">
  <tr><td style="padding:24px;">
    <table role="presentation" width="600" style="background-color:#FFFFFF;border:1px solid #DCE4F0;">
      <tr><td style="padding:24px;color:#131C33;">Content</td></tr>
    </table>
  </td></tr>
</table>

Two practical rules follow. Keep the tint palette small, because every value has to be maintained by hand in a context with no variables. And avoid relying on very pale tints for meaning, since some clients apply their own dark mode transformation that inverts backgrounds unpredictably and can turn a pale navy panel into a dark one.

Light navy in charts

When a light navy scale carries data, the steps need to be perceptually even, not numerically even. Equal jumps in HSL lightness look uneven to the eye, with the lighter end appearing to change faster. Mixing in a perceptual space corrects it:

:root {
  --series-1: color-mix(in oklab, #14213D 100%, white);
  --series-2: color-mix(in oklab, #14213D 78%, white);
  --series-3: color-mix(in oklab, #14213D 56%, white);
  --series-4: color-mix(in oklab, #14213D 34%, white);
  --series-5: color-mix(in oklab, #14213D 16%, white);
}

Five steps is the practical maximum for a single-hue scale. Beyond that, readers stop being able to match a segment to its legend entry, and you should switch to a categorical palette or add a second visual variable such as pattern.

Accessibility thresholds

The practical cut-off for text on white sits at about 55% lightness for a navy at moderate saturation. Above that, contrast falls below 4.5:1. This is the single most common mistake with light navies: they get used for muted body text, where they fail, instead of for surfaces, where they excel.

• Body text on white: use Light Navy #3A5BA0 or darker.
• Large headings on white: Soft Navy #4C6EA8 is acceptable at 24px and above.
• Non-text UI such as borders and icons: needs 3:1, so Powder Navy is the practical floor.
• Pure decoration: no requirement, but do not let decoration carry meaning.

The shade collection lists the exact contrast ratio for every value against both white and black. For the other end of the scale, read dark navy blue color codes, and for combining light navies with warmer partners see the combinations guide.

Related guides

• Midnight Navy Blue Color Code and Design Inspiration
• Best Navy Blue Color Combinations for Modern Designs
• Navy Blue Color Psychology in Branding and Design
• 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].