Navy Color (#000080)

#000080rgb(0, 0, 128)

Navy is a CSS named color defined as hex code #000080. Navy is blue at half strength with no red or green: a very dark, classic blue named after naval uniforms..

Color Overview & Formats

CSS: navyLuminance: 0.0156
HEX
#000080
RGB
rgb(0, 0, 128)
HSL
hsl(240, 100%, 25%)
Navy (#000080) Color Format Conversions
FormatSyntax / ValuesNotesAction
HEX#0000806-digit hex web code
RGBrgb(0, 0, 128)Red, Green, Blue channels (0-255)
HSLhsl(240, 100%, 25%)Hue (240°), Saturation (100%), Lightness (25%)
HSV / HSBhsv(240, 100%, 50%)Hue, Saturation (100%), Value/Brightness (50%)
CMYKcmyk(100%, 100%, 0%, 50%)Digital mathematical approximation (non-print)
OKLCHoklch(0.271 0.188 264.1)Perceptually uniform color space (CSS Color 4 approximation)
CSS Implementation & Quick Steps
background-color: #000080; /* or navy */
  1. Select color format: Choose the desired format (HEX #000080, RGB, or HSL).
  2. Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
  3. Pair with white text: White text on Navy reaches 16.01:1 (WCAG AAA).

What Colors Go With Navy?

These 6 colors all go well with Navy (#000080), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Navy: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.

White

#FFFFFF
16.01:1Text-safe

Maximum contrast: the standard text color on navy.

Gold

#FFD700
11.41:1Text-safe

A classic, prestigious pairing for crests, borders and headings.

Light Sky Blue

#87CEFA
9.33:1Text-safe

A lighter blue for tonal accents and links on navy.

Pink

#FFC0CB
10.41:1Text-safe

A soft, fashionable contrast that makes navy feel friendly.

Coral

#FF7F50
6.41:1Text-safe

A warm, lively accent for nautical and summer palettes.

Silver

#C0C0C0
8.8:1Text-safe

A cool metallic neutral for secondary text and dividers.

Harmonious Palettes & Tints

The palettes below are algorithmically generated across standard intervals based on Navy (HSL 240°). Each group offers full palette copy and live preview:

Complementary Harmony

Hue rotated 180 degrees on the HSL wheel (240° to 60°), keeping the original saturation and lightness.

Navy
#000080
Complement (60°)
#808000
Live UI Component Mockup
Component Header SampleWhite text on Navy: 16.01:1 (WCAG AAA).
Button style preview

Analogous Harmony

Hues 30 degrees either side (210° and 270°), keeping the original saturation and lightness.

Analogous (210°)
#004080
Navy
#000080
Analogous (270°)
#400080
Live UI Component Mockup
Component Header SampleWhite text on Navy: 16.01:1 (WCAG AAA).
Button style preview

Triadic Harmony

Hues spaced evenly by 120 degrees (0° and 120°), keeping the original saturation and lightness.

Navy
#000080
Triadic (0°)
#800000
Triadic (120°)
#008000
Live UI Component Mockup
Component Header SampleWhite text on Navy: 16.01:1 (WCAG AAA).
Button style preview

Tints & Shades

Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.

Tint 60%
#9999CC
Tint 30%
#4D4DA6
Navy
#000080
Shade 30%
#00005A
Shade 60%
#000033
Live UI Component Mockup
Component Header SampleWhite text on Navy: 16.01:1 (WCAG AAA).
Button style preview

WCAG 2.2 Text Readability & Contrast Check

Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:

Text Contrast Ratios on Navy (#000080)
Foreground ColorContrast RatioNormal Text (AA)Large Text (AA)Normal Text AAA (>= 7.0:1)
Pure Black (#000000)
1.31:1FailFailFail
Pure White (#FFFFFF)
16.01:1PassPassPass
Dark Charcoal (#212529)
1.04:1FailFailFail
Mid Gray (#666666)
2.79:1FailFailFail

Interactive Contrast Tester

Enter text foreground and background colors to verify WCAG legibility:

Calculated Ratio:
16.01:1
Normal: Pass AAALarge: Pass AAA
Large Heading Sample (18pt Bold)

This is sample body text rendered directly to verify contrast and readability.

Navy Background Download

Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:

Navy 1920x1080 solid color background wallpaper previewStandard Wallpaper: 1920x1080 PNG (#000080)

Download Options

All wallpaper files precisely match the W3C standard color value:

Download 1920x1080 PNG

CSS Standard & Usage Notes

navy = #000080 (rgb(0, 0, 128))
W3C CSS Color 4

UI Design & Accessibility Guidelines

Use it for headers, footers, body text on light pages, and corporate, finance and formal palettes. On Navy, white text passes WCAG AAA at every size (16.01:1); black text fails even for large text (1.31:1).

Published: · Modified: · Editorial: SwatchAtlas Editorial Team

Frequently Asked Questions (FAQ)

Can I use black text on Navy?

No. Black text on Navy has a WCAG 2.2 contrast ratio of only 1.31:1, below the 3:1 minimum even for large text.

Can I use white text on Navy?

Yes. White text on Navy has a WCAG 2.2 contrast ratio of 16.01:1, passing both AA (4.5:1) and AAA (7:1) at every text size.

What colors go with Navy?

White, Gold, Light Sky Blue, Pink, Coral and Silver all go well with Navy. White (16.01:1), Gold (11.41:1), Light Sky Blue (9.33:1), Pink (10.41:1), Coral (6.41:1) and Silver (8.8:1) have enough contrast for text on Navy.

Is navy the same as midnight blue?

No. Navy (#000080) is a pure dark blue, while Midnight Blue (#191970) has some red and green mixed in, which makes it less saturated and a little softer.