Navy Blue HEX Code
The HEX code for navy blue is #000080. Navy is a very dark shade of blue, named after the color of British Royal Navy uniforms. It's a classic color that conveys professionalism, authority, and trustworthiness.
Navy Color Values
| Format | Value |
|---|---|
| HEX | #000080 |
| RGB | rgb(0, 0, 128) |
| HSL | hsl(240, 100%, 25%) |
| CMYK | C:100 M:100 Y:0 K:50 |
Navy Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Midnight Blue | #191970 | Purple-tinted |
| Navy Blue | #000080 | CSS navy |
| Dark Blue | #00008B | Similar to navy |
| Oxford Blue | #002147 | Deep, rich |
| Prussian Blue | #003153 | Green-tinted |
| Space Cadet | #1D2951 | Modern navy |
| Yale Blue | #0F4D92 | Lighter navy |
Navy in Design
Navy conveys:
- Authority: Corporate, government
- Trust: Banking, insurance
- Elegance: Fashion, luxury
- Stability: Reliable, established
Navy vs Blue Comparison
| Color | HEX | When to Use |
|---|---|---|
| Blue | #0000FF | Bright, attention-grabbing |
| Navy | #000080 | Formal, professional |
| Royal Blue | #4169E1 | Vibrant yet refined |
| Dark Blue | #00008B | Very dark blue |
Using Navy in Web Design
``css
/* Corporate color scheme */
:root {
--navy: #000080;
--navy-light: #1E3A5F;
--navy-dark: #001F3F;
}
/* Navy header */
.header {
background-color: #001F3F;
color: white;
}
/* Navy button */
.btn-navy {
background-color: #000080;
border-color: #000066;
}
`
Brand Navys
| Brand | HEX | Industry |
|---|---|---|
| JPMorgan | #003366 | Banking |
| Ford | #003478 | Automotive |
| Pepsi | #004B93 | Beverage |
| Samsung | #034EA2 | Technology |
| Gap | #000066 | Fashion |
Navy is the go-to color for conveying professionalism and trust across corporate, financial, and government sectors.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.