Figma color wheel
Want to find the perfect complementary or analogous colors to match navy blue?
Skip to main content
Everything you need to know about navy blue to inspire your next design.
Navy blue is a sophisticated and serene color with subtle purple undertones that enhance its sense of luxury and elegance. This deep, rich shade sits in the blue-violet section of the color wheel, denoting a cooler tone. It includes hues like midnight navy and ink blue.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Obsidian Blues
Nocturnal Glow
Inkblot
Navy blue is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #000080
- RGB value: 0% red, 0% green and 50.2% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use navy blue in your designs:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same deep and authoritative spectrum as navy blue, consider:
To complement navy blue's deep tones, consider pairing it with:
Other colors worth considering include sage green for a natural, harmonious look; silver for a sleek, modern twist; and burnt orange for a bold, autumnal vibe.
While navy blue is versatile, it may clash with:
Navy blue is commonly associated with authority and professionalism. It conveys stability, reliability, and sophistication. This color often represents depth and expertise.
In color psychology, navy blue is believed to promote mental clarity and concentration. It is considered a color of intellect, wisdom, and power. The deep shade of blue has a calming effect that can help focus thoughts, reduce stress, and increase productivity.
Navy blue is a popular choice in UI/UX design, particularly for corporate branding and educational platforms. It's often used to communicate trustworthiness and professionalism. In digital design, navy blue can be used as a brand color to establish a strong foundation or as an accent color to highlight key features. It pairs well with many other colors, providing contrast and visual interest while maintaining an air of formality and elegance.
Navy blue has a rich history that dates back to 1748 when it was deliberately chosen for the British Royal Navy uniforms. The decision was based on its colorfast properties and practicality in camouflaging dirt and wear, making it an ideal choice for long ocean journeys. The adoption of navy blue by the Royal Navy established its strong association with maritime authority and discipline and prompted other navies worldwide to adopt similar color schemes.
By the 20th century, navy blue transitioned from a maritime color to a staple in civilian wardrobes. The color symbolized understated elegance in fashion, business attire, and even interior design. It balances its origins in naval utility with a modern appeal of sophistication, making it a versatile color that has withstood the test of time. Navy blue continues to be revered for its depth and versatility, bridging the gap between tradition and contemporary design.
Contrast 16.01
#000080
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Contrast 1.31
#000080
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #000080, known as navy blue, has RGB values of R:0, G:0, B:128 and CMYK values of C:1, M:1, Y:0, K:0.5.
| VALUE | CSS | |
|---|---|---|
| HEX | 000080 | #000080 |
| RGB DECIMAL | 0, 0, 128 | rgb(0,0,128) |
| RGB PERCENTAGE | 0, 0, 50.2 | rgb(0%,0%,50.2%) |
| CMYK | 100, 100, 0, 50 | |
| HSL | 240°, 100, 25.1 | hsl(240,100%,25.1%) |
| HSV (OR HSB) | 240°, 100, 50.2 | |
| WEB SAFE | 000099 | #000099 |
| CIE-LAB | 12.973, 47.505, -64.705 | |
| XYZ | 3.896, 1.558, 20.516 | |
| xyY | 0.15, 0.06, 1.558 | |
| CIE-LCH | 12.973, 80.271, 306.285 | |
| CIE-LUV | 12.973, -3.778, -52.357 | |
| HUNTER-LAB | 12.483, 33.86, -88.709 | |
| BINARY | 00000000, 00000000, 10000000 | |
| iOS - SwiftUI | Color(red: 0/255, green: 0/255, blue: 128/255) | |
| iOS - UIKit | UIColor(red: 0/255.0, green: 0/255.0, blue: 128/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFF000080) |
Want to find the perfect complementary or analogous colors to match navy blue?
Learn more about cornflower blue.
Learn more about the color blue-green.