12 Shades of Navy with Hex Codes
Navy is blue with the lightness pulled almost all the way down. It behaves like a neutral, which is why it substitutes for black in so many brand systems.
The navy hex code is #000080
#000080 is rgb(0, 0, 128) in RGB, hsl(240, 100%, 25%) in HSL, and about cmyk(100%, 100%, 0%, 50%) in CMYK. Every other navy below has its own hex code.
#000080rgb(0, 0, 128)hsl(240, 100%, 25%)Named Navy Colors and Their Hex Codes
Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.
#0B1F3Argb(11, 31, 58)#002147rgb(0, 33, 71)#000080rgb(0, 0, 128)#00008Brgb(0, 0, 139)#191970rgb(25, 25, 112)#082567rgb(8, 37, 103)#1D2951rgb(29, 41, 81)#003153rgb(0, 49, 83)#00356Brgb(0, 53, 107)#01386Argb(1, 56, 106)#00416Argb(0, 65, 106)#483D8Brgb(72, 61, 139)NavyColor Chart: Hex, RGB, HSL & CMYK
Every navy above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.
| Name | Hex | RGB | HSL | CMYK |
|---|---|---|---|---|
| Deep Navy | #0B1F3A | rgb(11, 31, 58) | hsl(214, 68%, 14%) | cmyk(81%, 47%, 0%, 77%) |
| Oxford Blue | #002147 | rgb(0, 33, 71) | hsl(212, 100%, 14%) | cmyk(100%, 54%, 0%, 72%) |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | cmyk(100%, 100%, 0%, 50%) |
| DarkBlue | #00008B | rgb(0, 0, 139) | hsl(240, 100%, 27%) | cmyk(100%, 100%, 0%, 45%) |
| MidnightBlue | #191970 | rgb(25, 25, 112) | hsl(240, 64%, 27%) | cmyk(78%, 78%, 0%, 56%) |
| Sapphire Navy | #082567 | rgb(8, 37, 103) | hsl(222, 86%, 22%) | cmyk(92%, 64%, 0%, 60%) |
| Space Cadet | #1D2951 | rgb(29, 41, 81) | hsl(226, 47%, 22%) | cmyk(64%, 49%, 0%, 68%) |
| Prussian Blue | #003153 | rgb(0, 49, 83) | hsl(205, 100%, 16%) | cmyk(100%, 41%, 0%, 67%) |
| Yale Blue | #00356B | rgb(0, 53, 107) | hsl(210, 100%, 21%) | cmyk(100%, 50%, 0%, 58%) |
| Marine Blue | #01386A | rgb(1, 56, 106) | hsl(209, 98%, 21%) | cmyk(99%, 47%, 0%, 58%) |
| Indigo Dye | #00416A | rgb(0, 65, 106) | hsl(203, 100%, 21%) | cmyk(100%, 39%, 0%, 58%) |
| DarkSlateBlue | #483D8B | rgb(72, 61, 139) | hsl(248, 39%, 39%) | cmyk(48%, 56%, 0%, 45%) |
Navy Scale from Light to Dark
A 12-step lightness scale built from the core navy hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.
Need a perceptually even ramp with semantic roles and contrast evidence? Generate navy design tokens.
What Navy Communicates
Navy is the most useful dark color in design after black. It carries the same authority with a fraction of the harshness, and because it is a hue rather than an absence of one, it sits comfortably next to warm accents. Every navy here clears 4.5:1 against white, so unlike most saturated colors navy is safe for body text.
Where navy works well
- Dark headers, footers, and navigation in place of black
- Corporate, legal, and financial brands
- Text color for a warmer, softer alternative to #000000
- Backgrounds for gold, coral, or cream accents
Colors that pair with navy
Copy the Navy Palette as CSS
Every shade on this page as CSS custom properties, ready to paste into a stylesheet.
:root {
--navy-deep-navy: #0B1F3A;
--navy-oxford-blue: #002147;
--navy-navy: #000080;
--navy-darkblue: #00008B;
--navy-midnightblue: #191970;
--navy-sapphire-navy: #082567;
--navy-space-cadet: #1D2951;
--navy-prussian-blue: #003153;
--navy-yale-blue: #00356B;
--navy-marine-blue: #01386A;
--navy-indigo-dye: #00416A;
--navy-darkslateblue: #483D8B;
}Navy Color Questions
What is the hex code for navy?
The standard navy hex code is #000080, which is rgb(0, 0, 128) in RGB and hsl(240, 100%, 25%) in HSL. There is no single "correct" navy — this page lists 12 named navy shades with their own hex codes.
How many shades of navy are there?
Displays can render millions of distinct navy values, so any count is a matter of which ones have names. This page lists 12 named shades of navy, combining the CSS color keywords with widely used navy names from design and print references, plus a generated 12-step lightness scale.
Can I use navy for text on a white background?
#000080 scores 16.01:1 against white. WCAG 2.2 asks for at least 4.5:1 for normal body text and 3:1 for large text, so this shade passes for normal text. Check any specific pairing in the contrast checker.
What colors go well with navy?
gold, orange, white all pair well with navy. For a specific shade, open its color page to see the complementary, analogous, and triadic colors calculated from its exact hue.