Navy Blue Color Code: HEX, RGB and navy shade previews
Browse 98 navy blue shades with accurate colour values, contrast data and previews you can trust. Click any swatch to copy its HEX code, or open a shade for its full breakdown in five formats.
Popular navy blue color codes
These eight navies account for most real-world usage, from the CSS keyword itself to the institutional blues used in uniforms, finance and enterprise software.
All 98 navy blue shades
Search by name or HEX, narrow by category and lightness, then copy the value you need. Filtering happens instantly in the browser.
Showing all 98 navy shades
No navy shades match those filters.
Try a shorter search term, or reset the filters to see the full collection again.
navy blue color code formats explained
The same navy can be written five different ways. Each format below uses Navy Blue #000080 so you can see how the numbers relate.
HEX
#000080Six hexadecimal digits in red, green, blue order. The most common format in CSS and design tools because it is compact and unambiguous. Here 00 means no red, 00 means no green and 80 means 128 units of blue.
RGB
rgb(0, 0, 128)Three channels from 0 to 255, matching how screens emit light. Useful when you need an alpha channel, since rgba() takes a fourth value between 0 and 1 for transparency.
HSL
hsl(240, 100%, 25%)Hue in degrees, then saturation and lightness as percentages. The most human-friendly format: to make a navy lighter you raise only the third number, leaving the hue untouched.
HSV
240°, 100%, 50%Hue, saturation and value. Common inside colour pickers in Photoshop and Figma. Value describes brightness rather than lightness, so a fully saturated navy reaches 100% saturation at a much lower value than in HSL.
CMYK
100%, 100%, 0%, 50%Cyan, magenta, yellow and key for print. CMYK covers a smaller range than RGB, so deep saturated navies lose a little intensity on paper. Always approve a printed proof before signing off a brand navy.
CSS keyword
navyOne of the sixteen original HTML colour names, mapped permanently to #000080. It is convenient for quick prototypes, but a custom property gives you far more control in production code.
Different types of navy blue colors
Navy is not one colour but a family. These are the differences that actually show up in a layout.
| Type | Example | HEX | What sets it apart |
|---|---|---|---|
| Classic navy | Classic Navy | #0A1F44 |
Balanced blue with no colour cast. The default for suiting, uniforms and corporate identity. |
| Royal navy | Royal Navy | #1E3A8A |
Brighter and more saturated. Strong enough to act as a primary interface colour on white. |
| Midnight navy | Midnight Blue | #191970 |
Violet-leaning and very deep. Reads as night rather than daytime blue. |
| Dark navy | Ink Blue | #0A1128 |
Below 12% lightness. Behaves like black but keeps a cool cast at large sizes. |
| Light navy | Light Navy | #3A5BA0 |
Lifted to around 40% lightness so it stays legible as link text on a white page. |
| Teal navy | Teal Navy | #0B3C49 |
Pulled toward cyan. Cooler and greener than classic navy, common in maritime branding. |
| Purple navy | Purple Navy | #4E5180 |
Red channel raised until the hue tips past 245°, giving a violet finish. |
| Metallic navy | Metallic Navy | #2C3E50 |
Desaturated blue-grey that mimics brushed steel under even lighting. |
| Denim navy | Denim Navy | #2B4162 |
Matte and slightly dusty, borrowed from indigo-dyed cloth. |
| Slate navy | Slate Navy | #2F4156 |
High grey content. Recedes politely behind content, useful for chrome and dividers. |
Navy blue color combinations
Ten pairings that hold up in real layouts. Click any code to copy it.
Navy and gold
The default luxury pairing. Warm metallic yellow sits opposite navy on the wheel, so the gold reads brighter than its actual lightness suggests.
Contrast between the two: 6.72:1
Navy and white
Maximum legibility with no styling required. This pair clears WCAG AAA comfortably and is the safest base for a content site.
Contrast between the two: 14.86:1
Navy and cream
Cream removes the clinical edge of pure white and warms the whole layout without lowering contrast much.
Contrast between the two: 13.49:1
Navy and blush
A soft desaturated pink keeps navy from feeling corporate. Popular in editorial and wedding stationery.
Contrast between the two: 8.56:1
Navy and emerald
Two deep jewel tones that share a cool base. Keep one dominant or they compete for attention.
Contrast between the two: 2.29:1
Navy and burgundy
Both are dark and saturated, so this pairing needs a light third colour to breathe.
Contrast between the two: 1.5:1
Navy and charcoal
A quiet monochrome-adjacent scheme for dashboards where colour should carry meaning, not decoration.
Contrast between the two: 1.33:1
Navy and silver
Cool metallic grey against metallic navy. Reads technical, industrial and precise.
Contrast between the two: 6.85:1
Navy and coral
A high-energy complement. Use coral only for calls to action or the balance tips too far.
Contrast between the two: 4.88:1
Navy and sky blue
An analogous pairing built from one hue at two lightness levels, useful for charts and data layers.
Contrast between the two: 4.65:1
Navy blue in web design
Where navy earns its place in an interface, and where it quietly causes problems.
Buttons
A navy fill with white text is one of the few button styles that passes contrast checks at every size. Use for the resting state and lift the lightness by about eight points on hover rather than changing hue.
Headings
Setting headings in navy rather than black softens a page without weakening hierarchy. gives roughly 17:1 against white, so it stays comfortably above AAA.
Logos
Navy survives being reduced to one ink, embroidered, or etched. Avoid the most saturated navies for marks that will be printed, since they shift noticeably once converted to CMYK.
Borders and dividers
Full-strength navy borders are usually too heavy. Use a tint such as so the structure is visible without cutting the page into boxes.
Dark backgrounds
Navy is a better dark-mode base than pure black: it reduces halation around white text and gives you room to layer cards using slightly lighter navies.
Icons
Line icons in navy at 1.5 to 2px hold their shape down to 20px. Below that, switch to a solid fill, because thin navy strokes disappear against light grey backgrounds.
Luxury and e-commerce
Navy plus a warm metallic is the standard premium formula because the warm accent supplies the visual interest that a dark cool base cannot. Keep the metallic under ten percent of the page.
Branding systems
Define one navy as the brand colour, then derive a five-step scale from it by adjusting lightness only. Changing hue between steps is what makes a palette look inconsistent.
CSS navy blue color examples
Working snippets using real values from this collection. These are examples to adapt, not generated output.
Text color
.headline {
color: #0A1128; /* Ink Blue */
}
.subhead {
color: #3A5BA0; /* Light Navy */
}Background color
body {
background-color: #14213D; /* Deep Navy */
color: #E7EDF8;
}Border color
.card {
border: 1px solid #223A5E; /* Naval Blue */
border-radius: 14px;
}Box shadow
.panel {
box-shadow: 0 12px 32px rgba(10, 17, 40, 0.18);
}Button style
.btn-navy {
background: #1E3A8A; /* Royal Navy */
color: #FFFFFF;
border: 0;
padding: 0.8rem 1.4rem;
border-radius: 999px;
}
.btn-navy:hover {
background: #2A4CA8;
}Navy gradient
.hero {
background: linear-gradient(160deg, #0A1128 0%, #14213D 55%, #0D1B3E 100%);
}Navy blue color guides
Longer articles on specific navy families, conversions and applications.
Navy Blue Color Code: HEX, RGB, HSL and CMYK Reference
Every format navy blue is written in, how the numbers relate to each other, and which value to use in which tool.
Metallic Navy Blue Color Code and Design Uses
How metallic navy is faked with flat colour, and the exact values that read as brushed steel on screen.
Best Navy Blue Color Combinations for Modern Designs
Ten pairings that hold up in real layouts, with contrast ratios and the reasoning behind each one.
Dark Navy Blue Color Codes and Matching Colors
Working with navies below 20% lightness without ending up with a page that reads as flat black.
Light Navy Blue Color Codes for Websites and Branding
Tints that keep navy identity while staying light enough for backgrounds, badges and charts.
Royal Navy Blue Color Code, Shades and Combinations
Where royal blue ends and navy begins, plus the values that work as primary interface colours.
Frequently asked questions about navy blue color codes
What is the navy blue color code?
The standard navy blue color code is #000080 in HEX, rgb(0, 0, 128) in RGB and hsl(240, 100%, 25%) in HSL. This is the value the CSS specification assigns to the keyword navy, so writing color: navy and color: #000080 produces exactly the same result.
Is navy blue the same as #000080?
In CSS terms, yes. In design practice, no. Most brands that call their colour navy use something closer to #0A1F44 or #14213D, because pure #000080 has full blue saturation and can look slightly purple on modern wide-gamut screens.
What is the RGB value for navy blue?
Navy blue is rgb(0, 0, 128). The red and green channels are switched off completely and the blue channel sits at exactly half of its 255 maximum, which is why the colour is so deep.
What is the CMYK value of navy blue?
Navy blue converts to roughly 100%, 100%, 0%, 50% in CMYK. Because CMYK has a smaller gamut than RGB, printed navy usually looks slightly flatter than screen navy, so always check a physical proof for brand work.
What is the difference between navy blue and midnight blue?
Navy blue is #000080 and midnight blue is #191970. Midnight blue is marginally lighter but noticeably more violet, because its red channel is raised while its blue channel is lowered.
What colors go well with navy blue?
Gold, white, cream, blush pink, coral, emerald green, burgundy and warm grey all pair well. Navy is effectively a dark neutral, so it supports both warm accents and cool analogous blues.
Is navy blue a warm or cool color?
Navy blue is a cool colour. Its hue sits between roughly 210° and 240°, which is firmly in the cool half of the colour wheel. Navies below 210° drift toward teal and read even cooler.
Can I use white text on navy blue?
Yes. White text on #000080 gives a contrast ratio of about 15.3:1, well above the 4.5:1 that WCAG AA requires for normal text. Every shade page on this site lists its exact ratio against both white and black.
What is the HTML color name for navy?
The HTML and CSS keyword is simply navy. It is one of the sixteen original named colours and is supported in every browser, so it needs no fallback.
What is the hex code for dark navy blue?
Dark navy is commonly written as #050A30, #0A1128 or #0B132B. All three sit below 12% lightness and behave almost like black while keeping a visible blue cast.
What is the hex code for light navy blue?
Light navy is usually #3A5BA0 or #4C6EA8. For very light tints intended as backgrounds, #B3C0D6 and #D6DEEA keep the navy character while staying bright.
How do I convert navy blue from HEX to RGB?
Split the six-digit HEX into three pairs and convert each pair from base 16 to base 10. For #000080: 00 becomes 0, 00 becomes 0, and 80 becomes 128, giving rgb(0, 0, 128).
Why does navy blue look different on my phone and my laptop?
Screens differ in colour profile, brightness and gamut. Dark saturated blues are especially sensitive to this, so a navy that looks correct on a calibrated monitor can look purple or nearly black elsewhere.
What is the difference between navy and royal blue?
Royal blue #4169E1 is far lighter and brighter, sitting around 57% lightness. Navy sits at 25% or below. Royal blue draws attention, navy recedes and supports.
Is navy blue good for website backgrounds?
It works well for dark interfaces because it is softer on the eyes than pure black and provides a subtle sense of depth. Use a slightly lighter navy for cards so surfaces separate visually.
What navy blue should I use for a logo?
Choose a navy that survives being printed in one ink and displayed on screen. Values around #0A1F44 and #14213D reproduce reliably in both, unlike very saturated navies that shift in CMYK.
What is the HSL value of navy blue?
Navy blue is hsl(240, 100%, 25%). The 240° hue is pure blue, 100% saturation means no grey is mixed in, and 25% lightness makes it a shade rather than a tint.
What is Oxford blue?
Oxford blue is #002147, a historic academic navy. Compared with standard navy it has a small amount of green in it, which pulls it slightly toward teal and away from purple.
Are these navy blue color codes free to use?
Colour values themselves are factual data and are not subject to copyright, so you can use every code listed here in personal and commercial work without attribution.
How do I copy a navy blue color code from this site?
Click or tap any colour preview to copy its HEX value. Each card also carries separate HEX, RGB and HSL buttons, and every code block on the site has its own copy control.