# Navy blue gradient: dark, trustworthy codes

[Canonical HTML page](https://gradiently.design/guide/navy-gradient)

Navy is the colour of uniforms, banks and good suits, which is exactly why it can look like every other bank. These codes keep its trust and lose the boredom.

## The short version

- A navy blue gradient blends very dark blues, usually from a near black navy to a brighter royal or indigo blue.
- Navy reads as serious, reliable and established, which is why finance, law and education use it so often.
- To stop navy looking generic, add a source of light, lean it slightly towards violet or teal, or pair it with a warm metallic accent such as gold or copper.
- White and pale grey text read easily on navy; gold text works too if it is light enough.
- Dark navy gradients band easily in compressed images, so add light grain and export at full size.

A **navy blue gradient** blends deep blues, typically from a near black navy such as `#0b1630` up to a brighter royal blue or indigo. It reads as calm, serious and dependable, and it makes white type look crisp. The trouble is that navy is everywhere in finance, law and corporate design, so a flat navy fade often looks like a default. The codes below give navy light, temperature and an accent, so it keeps the trust and gains a personality.

## Classic navy blue gradient codes

These are the dependable ones, close to pure navy, with only enough movement to stop them looking like a solid fill. They are ideal for presentation slides, annual reports, email headers and website footers.

- Classic navy: `linear-gradient(180deg, #1e3a8a 0%, #0b1630 100%)`
- Ink navy: `linear-gradient(135deg, #172554 0%, #0a0f24 100%)`
- Uniform: `linear-gradient(160deg, #1e40af 0%, #172554 60%, #0b1022 100%)`
- Pinstripe: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Lit band: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Five near navy blends. Subtle on purpose: they carry text, logos and charts without competing.

| Name | Hex | Use it as |
| --- | --- | --- |
| Navy (CSS named) | `#000080` | Reference only; looks harsh on screens |
| Midnight | `#0b1630` | The darkest stop, almost black |
| Deep navy | `#172554` | A ground for white type |
| Royal navy | `#1e3a8a` | The light end of a classic blend |
| Royal blue | `#1e40af` | A lift or highlight |

Navy hex codes that blend well. The named CSS navy is very saturated; softer versions look more refined.

## Navy gradients with a lift of colour

Lean navy a few degrees towards violet and it becomes evening and luxury; lean it towards teal and it becomes the sea and technology. Either shift makes it feel chosen. The brighter end should still stay deep enough for white text across most of the area.

- Navy to indigo: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Royal violet: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Navy and teal: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- Electric to navy: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

Navy with a lean. Indigo and violet feel premium, teal feels fresh, a bright blue corner feels technical.

## Navy and gold, copper or silver

Few grounds suit a metallic accent better than navy. Gold on navy is traditional and celebratory; copper is warmer and more modern; silver is cool and quiet. Keep the metal small, as a light in a corner or a thin rule, so the navy still does most of the work. [Gold gradients](https://gradiently.design/guide/gold-gradient-design) and [silver gradients](https://gradiently.design/guide/silver-gradient) show the metallic side in detail.

- Gold light on navy: `radial-gradient(circle at 85% 15%, #f2d27a 0%, #b8862b 15%, #172554 45%, #0b1630 100%)`
- Copper corner: `radial-gradient(circle at 15% 85%, #e8a87c 0%, #b4532a 18%, #1e293b 50%, #0b1630 100%)`
- Silver edge: `linear-gradient(135deg, #e5e7eb 0%, #94a3b8 20%, #1e3a8a 55%, #0b1630 100%)`

Metal kept small and in one place. The eye goes there first, then to your words.

- Midnight: #0b1630
- Deep navy: #172554
- Royal navy: #1e3a8a
- Old gold: #d4a64a
- Ivory: #f8f6f1
- Slate: #94a3b8

A navy and gold system: three navies, a gold accent, ivory for text and slate for secondary detail.

## Midnight navy gradients for night and luxury

Radial blends feel like a sky after sunset or a dimly lit room. They suit gala invitations, hotel bars, jewellery, watches and late night radio. For the starry version, see [night sky gradients](https://gradiently.design/guide/night-sky-gradient).

- After sunset: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Velvet room: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- City glow: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Navy with one soft light. The darkest stop is close to black, but the blue keeps it from feeling empty.

## Where navy gradients earn their place

Navy is at its best where the words matter more than the picture, because it gives type a calm, high contrast ground. Some uses worth stealing:

- **Slides at 1920×1080:** "Classic navy" for section dividers, with one gold rule under each title.
- **LinkedIn profile banner at 1584×396:** "Navy and teal" running left to right, darkest behind your photo.
- **Email header at 1200×600:** "Ink navy" with an ivory headline, so the header already feels at home in dark mode inboxes.
- **Graduation and awards invitations:** "Gold light on navy" printed as an A5 flyer.
- **Charts and dashboards:** a deep navy ground makes bright data colours easy to tell apart.

## How to make navy look less corporate

### Looks like every bank

- Flat `#000080` with a white logo
- A straight top to bottom fade
- Bright mid blue buttons
- Stock photo of a handshake

### Looks considered

- A softened navy with a lean to violet or teal
- Light coming from one place
- One warm accent: gold, copper or coral
- A fine grain that makes it feel printed

None of these changes cost trust. They just make the brand recognisable at a glance, which matters when every competitor uses the same blue. [Distinctive brand assets](https://gradiently.design/guide/distinctive-brand-assets) explains why recognition comes from owning something nobody else uses. A useful test: cover your logo and ask whether someone could still tell the design is yours. With a flat navy fade, the answer is almost always no.

A financial planning firm's LinkedIn link image with white text on a navy gradient lit from one corner

A LinkedIn link image on a deep navy with one warm light. Serious, not anonymous.

The same financial planning design as a portrait post on the navy gradient

The same design as a portrait post, with the light moved to suit the taller frame.

## Navy gradient CSS without banding

Dark, subtle blends are where banding shows most: you see visible steps instead of a smooth fade, especially after a platform recompresses your image. On the web, a few extra stops and a grain layer hide it. [Gradient banding](https://gradiently.design/guide/gradient-banding) explains the cause.

```css
.hero-navy {
  position: relative;
  background-color: #0b1630; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, rgb(212 166 74 / 0.35) 0%, transparent 35%),
    linear-gradient(160deg, #1e3a8a 0%, #172554 45%, #0f1d3a 75%, #0b1630 100%);
  color: #f8f6f1;
}

/* fine grain on top to break up banding */
.hero-navy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("/grain.png"); /* a small tiling noise image */
}
```

Extra middle stops smooth the fade, a faint gold light adds warmth and a grain layer hides any steps that remain.

Text is the easy part with navy. White and ivory pass contrast comfortably on every navy above, and old gold `#d4a64a` reads at around 8 to 1 on midnight, so it works for headings. The thing to watch is bright blue: a mid blue like `#3b82f6` behind white text drops to about 3.7 to 1. In Gradiently, Auto ink handles this per line, picking type from the Mark's own palette, and the [Designer](https://gradiently.design/guide/what-is-gradiently) can lay out a whole navy campaign in your brand kit's voice.

## FAQ

### What is the hex code for navy blue?

The CSS named colour `navy` is `#000080`. Softer versions such as `#172554` or `#0b1630` usually look better on screens.

### What colours go with a navy blue gradient?

Gold, copper, ivory, slate and coral. A single warm accent stops navy looking cold or corporate.

### Is navy blue good for a business brand?

It reads as serious and dependable, so it suits finance, law and education. Because so many competitors use it, add light or an accent to stay recognisable.

### Why does my navy gradient show stripes?

That is banding, common in dark, subtle fades. Add more stops, a light grain layer and avoid heavy JPEG compression.

### Can I use gold text on navy?

Yes, if the gold is light enough. `#d4a64a` on `#0b1630` measures around 8 to 1, which passes for headings and body text.