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.
On this page
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.
Hex
#000080Use it as
#0b1630Use it as
Hex
#172554Use it as
Hex
#1e3a8aUse it as
Hex
#1e40afUse it as
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 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 and silver gradients show the metallic side in 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.
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
#000080with 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 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 LinkedIn link image on a deep navy with one warm light. Serious, not anonymous.
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 explains the cause.
.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 */
}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 can lay out a whole navy campaign in your brand kit's voice.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile