Dark Navy Blue Color Codes and Matching Colors

Dark navy is the workhorse of modern interface design. It is the colour behind most dark modes, most premium packaging and most enterprise dashboards, and it is chosen for a reason that has nothing to do with fashion: pure black is uncomfortable to read on a lit screen, and dark navy solves that problem without giving up any of black's authority. This guide covers the values, how to build a layered system from them and which colours survive beside them.

What counts as dark navy

The practical boundary is around 20% lightness in HSL. Above that, a navy still reads as blue in isolation. Below it, the colour reads primarily as dark and only reveals its blue when placed next to a true black or a warm dark. Below about 6% lightness the blue disappears entirely and you have simply made an expensive black.

Every one of these clears the AAA threshold for white text with a wide margin. That is the first thing to understand about dark navy: contrast is never the constraint. The constraints are visual comfort and the ability to distinguish one dark surface from another.

Why dark navy beats black on screen

White text on pure black produces halation, an optical effect where the light characters appear to bleed into the surrounding darkness. It is most noticeable on OLED panels, at high brightness, and for readers with astigmatism. Raising the background slightly off black reduces the effect substantially, and doing it with blue rather than grey preserves the sense of depth.

There is a second, more practical reason. On a pure black background you have nowhere to go when you need a raised surface. Every card, modal and dropdown has to be lighter, and if your base is already at zero, each layer looks progressively greyer and the hierarchy falls apart. Starting at Ink Blue #0A1128 gives you room below as well as above.

Building a layered dark navy system

Dark interfaces communicate elevation through lightness, not shadow. A shadow on a dark background is invisible. The standard approach is a fixed ladder where each step up is a small, consistent lightness increase:

:root {
  --surface-0: #080F26; /* page background */
  --surface-1: #0A1128; /* section background */
  --surface-2: #14213D; /* cards */
  --surface-3: #1C2942; /* raised cards, dropdowns */
  --surface-4: #253352; /* modals, popovers */

  --border-subtle: #223A5E;
  --text-primary: #E7EDF8;
  --text-muted: #A9B8D4;
  --accent: #7FA8E8;
}

body {
  background: var(--surface-0);
  color: var(--text-primary);
}

.card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}

.modal {
  background: var(--surface-4);
}

Two rules keep this system coherent. Keep the hue constant across the whole ladder, changing only lightness. And keep the steps even; irregular jumps make some surfaces look like errors.

Choosing the text colour

Pure white on dark navy is technically excellent and practically slightly harsh. Most well-built dark themes use an off-white carrying a trace of the background hue, such as Text primary #E7EDF8. Against #0A1128 this still gives around 15.9:1, far above the requirement, while feeling calmer over long paragraphs.

For secondary text, Text muted #A9B8D4 gives roughly 9.34:1. That is comfortably above 4.5:1, so it remains usable for real content rather than only for decoration. Resist the temptation to go lower; muted text that fails contrast is the single most common accessibility defect in dark themes.

Colours that survive on dark navy

Dark backgrounds change how accent colours behave. A saturated mid-tone that looks strong on white can vanish on navy, and a colour that was pleasant on white can become aggressively bright.

The pattern is consistent: on dark navy, accents need to be lighter and less saturated than their light-mode equivalents. If you are maintaining both themes, do not reuse the same accent values. Derive a dark-mode variant by raising lightness and lowering saturation, typically by fifteen and ten points respectively.

Dark navy in print

Converting #0A1128 naively to CMYK produces a build that prints as a flat, slightly muddy dark rather than a deep navy. The problem is total ink coverage: a straightforward conversion does not lay down enough ink to reach true depth. Printers solve this with a rich black recipe, typically adding cyan under the black plate. Ask your printer for their house recipe rather than inventing one, since the correct numbers depend on their press and stock.

If a dark navy is central to your brand, consider specifying a spot ink. It removes the variability entirely, and for packaging that will be reprinted many times, the consistency is usually worth the cost.

Practical details that get missed

Selection, scrollbars and form controls

Browser defaults do not follow your palette. On a dark navy theme the text selection highlight, the scrollbar and native form controls all keep their light-theme appearance unless you tell them otherwise.

:root { color-scheme: dark; }

::selection {
  background: #1E3A8A;
  color: #FFFFFF;
}

* {
  scrollbar-color: #253352 #0A1128;
  scrollbar-width: thin;
}

input, select, textarea {
  background: #14213D;
  color: #E7EDF8;
  border: 1px solid #223A5E;
}

The color-scheme declaration is the highest-value line there. It tells the browser to render everything it controls in dark mode, which removes the white flash that appears before your stylesheet applies and fixes native dropdown menus in one step.

Battery use on OLED screens

OLED panels switch off individual pixels for pure black, so a darker background genuinely reduces power draw. The saving between #000000 and #0A1128 is small but real. If battery life is a priority for your product, an optional true-black theme alongside the navy one is a reasonable addition, as long as you keep a navy tint in the surfaces above the background so hierarchy survives.

Testing at low brightness

Dark themes are used in dark rooms with the screen dimmed, which is exactly the condition under which adjacent surface levels merge into one another. Review your surface ladder at twenty percent brightness before shipping. If two consecutive steps are indistinguishable there, the distinction is decorative and should be removed.

Common mistakes

• Using shadows for elevation. Invisible on dark backgrounds. Use lighter surfaces instead.
• Inverting a light theme mechanically. Contrast relationships do not survive inversion. Every value needs re-checking.
• Too many surface levels. Five is plenty. More and the differences become imperceptible.
• Full-brightness white text. Technically correct, physically tiring.
• Mixing hues across the ladder. A card at 225 degrees on a background at 240 degrees looks dirty rather than layered.

Related reading

For the opposite end of the range, see light navy blue color codes. For the deepest violet-leaning navies specifically, midnight navy goes further into that family. Every value in this article has a full page in the shade collection.

Related guides

• Navy Blue Color Code: HEX, RGB, HSL and CMYK Reference
• How to Use Navy Blue Colors in CSS and HTML
• Oxford Blue vs Prussian Blue: Color Code Differences
• Navy Blue Color Psychology in Branding and Design
• 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].