Metallic Navy Blue Color Code and Design Uses

Metallic navy is a strange request when you think about it literally. Metal is not a colour, it is a behaviour: it reflects its surroundings, produces a sharp specular highlight and falls off into a dark core shadow. A colour code cannot do any of that on its own. What we call the metallic navy blue color code is really a starting value chosen because it responds well to the techniques that create a metallic impression. This guide covers that value, the family around it and how to build the effect without images.

The metallic navy value

Metallic Navy is Metallic Navy #2C3E50, or rgb(44, 62, 80). In HSL it is hsl(210, 29%, 24%), and that middle number is the important one. At 29% saturation it holds only about a quarter of the colour intensity of pure navy blue.

That restraint is deliberate. A polished surface mostly shows you the room it is standing in, and most rooms are neutral. The more saturated a "metallic" colour is, the more it reads as glossy plastic instead. If you compare metallic navy directly against Navy Blue #000080, the metallic version looks almost grey in isolation, then snaps into place the moment you add a highlight and a shadow.

The metallic navy family

Six shades in the collection are built for this treatment, running from dark iron to pale titanium:

Building the metallic effect in CSS

The illusion depends on three things: a gradient that runs across the surface rather than down it, a hard stop somewhere in the middle to imply an edge, and a highlight that is much lighter than you think it needs to be.

.metal-navy {
  background: linear-gradient(
    135deg,
    #1B2733 0%,
    #2C3E50 28%,
    #5A7290 47%,
    #2C3E50 52%,
    #22303E 78%,
    #405D72 100%
  );
  color: #F2F6FC;
}

Notice the abrupt jump at 47% to 52%. That narrow band of #5A7290 is the specular highlight, and the tight stop is what makes the surface look hard. Widen that band and the same gradient starts to look like soft fabric. This one detail separates convincing metal from a generic blue fade.

Adding an edge

Real metal objects have a lit top edge and a dark bottom edge. Two inset shadows reproduce this in a single declaration:

.metal-panel {
  background: linear-gradient(135deg, #22303E, #2C3E50 45%, #4A5B6A 55%, #22303E);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(10, 17, 40, 0.55),
    0 10px 26px rgba(10, 17, 40, 0.35);
  border-radius: 12px;
}

Brushed metal texture without an image

Brushed steel has fine parallel grain. A repeating linear gradient at very low opacity produces it at almost no performance cost, and it scales to any size without a texture file:

.brushed-navy {
  background-color: #2C3E50;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 3px
  );
}

Keep the alpha value below about 0.07. Above that the stripes become visible as stripes rather than as grain, and the surface starts to look like corduroy.

Where metallic navy works

Automotive and engineering brands

The obvious home. Metallic navy carries the same associations as the material it imitates: precision, durability, weight. It sits naturally alongside technical typography and photographs of machined parts.

Financial and enterprise interfaces

Because it is heavily desaturated, metallic navy works as a chrome colour for application shells: sidebars, headers, toolbars. It provides the dark-blue authority of navy without competing with the data on screen. This is why it appears so often in dashboards and admin panels.

Premium packaging

Here you meet the limits of colour codes. On a box, the metallic quality comes from foil stamping or a metallic ink, and #2C3E50 is only the flat approximation used in the digital mock-up. Tell your printer which effect you want early, because a metallic finish changes the entire production path.

Where it fails

Metallic navy struggles anywhere the design needs warmth or approachability. Children's products, food, wellness and hospitality all tend to reject it, because the same qualities that make it read as engineered make it read as cold. It also flattens badly on low-quality displays, where the gradient bands become visible.

Flat fallbacks for the metallic effect

Gradients do not survive everywhere. Email clients strip them, some print workflows flatten them unpredictably, and any element that will be screenshotted at small size loses the highlight entirely. Decide early what the flat fallback is, and make sure the design still works when the metal quality disappears.

.metal-navy {
  /* Flat fallback, applied first */
  background-color: #2C3E50;

  /* Enhancement, ignored where unsupported */
  background-image: linear-gradient(135deg, #22303E, #2C3E50 45%, #5A7290 50%, #2C3E50 55%, #22303E);
}

Writing the flat colour as background-color and the gradient as background-image means both can coexist in one rule. Anything that cannot render the gradient simply shows the base colour, with no extra declarations needed.

Reduced motion and reduced transparency

Some users enable system settings that reduce motion or transparency. Animated metallic sweeps, where a highlight travels across a surface on hover, should be disabled for them. It is two lines and it matters to people who experience motion sensitivity:

@media (prefers-reduced-motion: reduce) {
  .metal-navy { transition: none; background-position: 0 0; }
}

Typography and contrast

Metallic Navy gives 10.98:1 against white text, which is AAA for normal text. That is comfortable for body text. Be careful with gradients though: your text may sit over the light highlight band rather than the base colour, and that band can drop below the threshold. Measure contrast against the lightest stop in your gradient, not the average.

.metal-card {
  background: linear-gradient(135deg, #22303E, #2C3E50 60%, #34495E);
  color: #FFFFFF;
}

/* Safer: keep the text on a solid panel over the metal */
.metal-card__body {
  background: rgba(10, 17, 40, 0.72);
  padding: 1.2rem;
  border-radius: 10px;
}

Pairing metallic navy

Two directions work reliably. The warm route pairs it with brass Brass #C9A227 or copper Copper #B87333, producing the classic premium contrast of cool structure against warm detail. The cool route pairs it with light industrial greys such as Silver #C6CDD6, which keeps everything in the same temperature family and reads as technical rather than luxurious.

Avoid pairing it with a highly saturated blue. Placed beside Royal Navy, metallic navy simply looks like a faded version of it, and the metal reading disappears entirely.

Practical checklist

• Start from #2C3E50 and keep saturation between 20% and 30%.
• Use at least three stops in your gradient, with a tight highlight band.
• Angle gradients diagonally, usually between 120 and 150 degrees.
• Add an inset light edge at the top and a dark edge at the bottom.
• Measure text contrast against the lightest gradient stop.
• Confirm early whether print output will use foil, metallic ink or a flat CMYK build.

For the flat values on their own, see the Metallic Navy shade page and the wider navy collection. If you are working at the darker end instead, dark navy blue color codes covers the same ground for near-black interfaces.

Related guides

• Light Navy Blue Color Codes for Websites and Branding
• Oxford Blue vs Prussian Blue: Color Code Differences
• Navy Blue Color Psychology in Branding and Design
• Best Navy Blue Color Combinations for Modern Designs
• 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].