Navy Background
#000080 · rgb(0, 0, 128)
About the navy background
Navy (#000080) is blue at half brightness — rgb(0, 0, 128) — and it behaves like a colored black: authoritative, formal, endlessly professional. Navies, banks, lawyers and evening-wear brands all lean on its gravity.
As a dark background it's superb: white text measures about 16:1 (near-maximum accessibility), gold and coral accents glow against it, and it's gentler on the eyes than pure black in dark mode designs.
What to use a navy background for
- Corporate, legal and financial branding
- Dark mode sections softer than black
- Nautical and formal event design
- Premium footers and dark hero sections
How to use navy in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page navy background */
body {
margin: 0;
background-color: #000080;
}
/* A single section or element */
.hero {
background-color: rgb(0, 0, 128);
} Navy shades and tints
Click any swatch to copy it. Tints mix navy with white; shades mix it with black.
Navy background FAQ
What is the hex code for navy?
CSS `navy` is #000080 — rgb(0, 0, 128), blue at exactly 50% brightness. In HSL it's hsl(240, 100%, 25%).
Is navy a good dark mode background?
Yes — navy offers about 16:1 contrast with white text (AAA) while reflecting slightly more light than pure black, which reduces halation and makes UI layers easier to distinguish.
What is the hex code for navy?
Navy is #000080 in hexadecimal, rgb(0, 0, 128) in RGB and hsl(240, 100%, 25%) in HSL. Paste #000080 into any CSS background-color property to use it.
How do I set a navy background in CSS?
Add background-color: #000080; to any element, or apply it to the whole page: body { background-color: #000080; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(0, 0, 128) — with identical results.