CSS named color

Navy #000080

The CSS keyword navy is #000080. It is a very dark vivid blue in the blue family. In OKLCH it sits at lightness 0.271, chroma 0.188 and hue 264.1°.

Relative luminance: 0.0156
OKLCH L · C · h: 0.271 · 0.188 · 264.1
Best text: White 16.00:1
Hue family: Blue

Inspect this color Check contrast

#000080 color codes

HEX: #000080
RGB: rgb(0, 0, 128)
HSL: hsl(240, 100%, 25%)
OKLCH: oklch(0.271 0.188 264.1)
OKLab: oklab(0.271 -0.019 -0.187)
CIELAB (D65): L* 12.97, a* 47.50, b* -64.70
XYZ (D65): X 3.89, Y 1.56, Z 20.51
CMYK (naive): cmyk(100%, 100%, 0%, 50%)

CIELAB and XYZ use the D65 white point; CSS lab() uses D50, so paste the OKLCH or HEX value into stylesheets. CMYK here is a plain formula with no press profile.

Legibility

Contrast: is #000080 accessible?

White text on it reaches 16.00:1, passing AAA. Black text fails at 1.31:1.

WCAG 2 gives the same ratio whichever color is the text; APCA does not, so its Lc changes sign and size with polarity.

Open the Contrast System

Black text on it

1.31:1
- AA fails
- AA large fails
- AAA fails
- APCA Lc 0
Text is here, unreadable at 1.31:1
White text on it

16.00:1
- AA passes
- AA large passes
- AAA passes
- APCA Lc −103
As text on black

1.31:1
- AA fails
- AA large fails
- AAA fails
- APCA Lc 0
Text is here, unreadable at 1.31:1
As text on white

16.00:1
- AA passes
- AA large passes
- AAA passes
- APCA Lc +100

Nearest versions that pass 4.5:1

For text on white

#000080 16.00:1

It already reaches 16.00:1 on white, so no change is needed.
For text on black

#3C6EE5 4.55:1

Lightening its OKLCH lightness from 0.27 to 0.57 reaches 4.55:1 on black, keeping the hue.

Compare both in the Contrast System

Checking another pair? Use the Contrast Checker.

Studio

Adjust #000080 live

Move lightness, chroma and hue in OKLCH, or drag on the map. The map is every lightness and chroma at the current hue: sRGB inside the solid area, Display P3 out to the dashed line.

The studio needs JavaScript.

Scale

Shades and tints of #000080

Eleven OKLCH lightness steps at this hue, each with its contrast against white and black. #000080 sits at step 900.

50#F0F5FF

White
1.09
Black
19.21
100#E2ECFF

White
1.18
Black
17.67
200#C4D8FF

White
1.43
Black
14.61
300#9DBDFF

White
1.88
Black
11.15
400#719EFF

White
2.61
Black
8.03
500#4A7EF5

White
3.75
Black
5.59
600#3465D9

White
5.23
Black
4.00
700#204CBC

White
7.44
Black
2.82
800#0C3199

White
10.96
Black
1.91
900This color#000080

White
16.00
Black
1.31
950#000053

White
18.66
Black
1.12

Under each step, white and black text on it; a bold figure passes 4.5:1.

Gamut

How vivid #000080 can get

At its lightness and hue, sRGB reaches OKLCH chroma 0.188; #000080 uses 100% of it. Display P3 reaches no further at this hue.

sRGB
Display P3
Rec. 2020
Dominant wavelength

OKLCH chroma: 0.188
sRGB edge: 0.188
Display P3 edge: 0.188
Rec. 2020 edge: 0.199
Dominant wavelength: 464 nm
Excitation purity: 93%
Chromaticity: x 0.1500, y 0.0600

This color#000080
Most vivid in sRGB#000080
Most vivid in Display P3oklch(0.271 0.188 264.1)

On a screen without Display P3 the last tile shows the sRGB edge instead.

Use the wider color where screens show it

.accent {
  color: #000080;
}
@media (color-gamut: p3) {
  .accent { color: color(display-p3 0 0 0.4813); }
}

Mixing

Mixing #000080

Each row is the same mix worked out in a different space, with the halfway color at its end. sRGB, which older CSS gradients use, can sag gray or dark in the middle; OKLab keeps the lightness steps even; OKLCH holds chroma and hue as it goes.

White #FFFFFF

sRGB50%#8080C0
OKLab50%#6E8AC4
OKLCH50%#6E8AC4

Black #000000

sRGB50%#000040
OKLab50%#00002E
OKLCH50%#00002E

Its complement #342400

sRGB50%#1A1240
OKLab50%#162547
OKLCH50%#4C002B

In CSS

/* A gradient and a mix, worked out in OKLCH */
background: linear-gradient(in oklch, #000080, white);
color: color-mix(in oklch, #000080 50%, white);

In use

#000080 in an interface

A button, a link, a heading, a focused field, an icon and a chart line in this color, on a light page and a dark one. Each check is a WCAG 2 contrast minimum: 1.4.3 for text, 1.4.11 for the rest.

Light page

Button labelText, 4.5:116.00:1 Passes
Link and body-size textText, 4.5:116.00:1 Passes
Large headingLarge text, 3:116.00:1 Passes
Icons, borders and focus ringsNon-text, 3:116.00:1 Passes

Dark page

Button labelText, 4.5:116.00:1 Passes
Link and body-size textText, 4.5:11.17:1 Fails
Large headingLarge text, 3:11.17:1 Fails
Icons, borders and focus ringsNon-text, 3:11.17:1 Fails

For text on this page, the nearest shade that passes is #4376ED 4.50:1

Color vision

How #000080 looks with color blindness

Achromatopsia changes it most, ΔE2000 28.6; deuteranopia changes it least, 5.0.

Simulated with Machado et al. (2009) at full severity, in linear light.

Simulate a whole page What each type sees

Protanopia

No working red (long-wavelength) cones

#002883 ΔE2000 9.0

Noticeable

Reads as dark soft blue
Deuteranopia

No working green (medium-wavelength) cones

#001A7E ΔE2000 5.0

Close match

Reads as very dark soft blue
Tritanopia

No working blue (short-wavelength) cones

#003248 ΔE2000 15.0

Distinct

Reads as very dark muted blue
Achromatopsia

No cone color vision; lightness only

#212121 ΔE2000 28.6

Distinct

Reads as near-black

Pairing check

Checked against its complement, #342400. Their lightness contrast is only 1.06:1, so where hue collapses, add a label, icon or pattern.

Vision	The pair	ΔE2000	Verdict
Normal vision	#000080 · #342400	46.7	Stays distinct
Protanopia	#002883 · #2B2400	45.3	Stays distinct
Deuteranopia	#001A7E · #2E2801	48.4	Stays distinct
Tritanopia	#003248 · #3A1F1D	29.4	Stays distinct
Achromatopsia	#212121 · #272727	1.9	Easily confused

Harmony

Color harmonies for #000080

Its complement is #342400, a very dark muted brown, on the warm side of the wheel.

Hue rotations in OKLCH, mapped into sRGB by trimming chroma so hue and lightness stay put.

Open the Harmony Studio

Base#000080
Complement#342400

Complementary

Open in Harmony Studio

−30°#002B3E
Base#000080
+30°#300066

Analogous

Open in Harmony Studio

Base#000080
+120°#500008
+240°#003104

Triadic

Open in Harmony Studio

Base#000080
+150°#3F1B00
+210°#272A00

Split-complementary

Open in Harmony Studio

Code

Design tokens

Ready-to-paste tokens in six formats. Rename them to fit your system.

CSS custom property

:root {
  --color-navy: #000080;
}

Tailwind config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        navy: '#000080',
      },
    },
  },
};

Tailwind v4 theme

/* app.css — Tailwind CSS v4 */
@import "tailwindcss";

@theme {
  --color-navy: oklch(0.271 0.188 264.1);
}

Design token (W3C DTCG)

{
  "color": {
    "navy": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0, 0, 0.502],
        "hex": "#000080"
      },
      "$description": "CSS named color navy"
    }
  }
}

SwiftUI color

import SwiftUI

enum Palette {
    static let navy = Color(.sRGB, red: 0.000, green: 0.000, blue: 0.502, opacity: 1)
}

Jetpack Compose color

import androidx.compose.ui.graphics.Color

object Palette {
    val Navy = Color(0xFF000080)
}

Matches

The nearest match in each system

The closest CSS name, Tailwind shade, RAL Classic paint and Crayola crayon by ΔE2000; under 2 is hard to tell apart side by side. RAL and Crayola values approximate physical colors.

Tools

Open #000080 in the tools

Each opens over this page. More colors live in the Color Library, and every color page is listed on the hub.

Navy #000080

#000080 color codes

Contrast: is #000080 accessible?

Black text on it

White text on it

As text on black

As text on white

Nearest versions that pass 4.5:1

Adjust #000080 live

Shades and tints of #000080

How vivid #000080 can get

Mixing #000080

#000080 in an interface

How #000080 looks with color blindness

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Pairing check

Color harmonies for #000080

Complementary

Analogous

Triadic

Split-complementary

Design tokens

CSS custom property

Tailwind config

Tailwind v4 theme

Design token (W3C DTCG)

SwiftUI color

Jetpack Compose color

The nearest match in each system

Similar colors

Open #000080 in the tools