A vivid very dark blue, white text passes AA
What color is navy?
The CSS named color navy is #000080, or rgb(0 0 128): a vivid very dark blue in plain words. White text on it reaches 16.01:1, passing WCAG AAA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | navy |
| Hex | #000080 |
| RGB | rgb(0 0 128) |
| HSL | hsl(240 100% 25%) |
| OKLCH | oklch(27.1% 0.188 264.1) |
| Nearest Tailwind color | violet-950 #2f0d68, 0.091 away in OKLab |
| White text | 16.01:1: AA passes, AAA passes, large text passes |
| Black text | 1.31:1: AA fails, AAA fails, large text fails |
About navy
A vivid very dark blue is the plain description of navy: OKLCH lightness 27.1%, chroma 0.188, hue 264.1 degrees. CSS Color 4 counts it among the 16 names that came from the VGA palette and then HTML; most of the other names came from the X11 color system.
Here HSL's lightness, 25%, lands near OKLCH's 27.1%, which is not true of every color. The closest CSS named color is darkblue (#00008b), 0.020 away in OKLab: near, and still a visible step from it side by side.
White text on navy measures 16.01:1, past the 7:1 of WCAG AAA, while black text manages only 1.31:1. Its neighbors in the hue-sorted list of names are darkblue and lavender.
The closest Tailwind 4.3.3 color is violet-950, 0.091 away in OKLab, so bg-violet-950 comes near; bg-[#000080] gives the color itself.
Tints and shades
- #cdd7ec
- #9cb0d9
- #6e8ac4
- #4264af
- #173c98
- #000080
- #000063
- #000048
- #00002e
- #000016
- #000003
From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.
A palette around it
- #000080
- #818800
- #cee1ff
- #704829
- #f7a671
Recolor's generator, with navy locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #818800, #cee1ff, #704829, #f7a671. Open it in Recolor.
Using navy
As a text color, navy on a white page gives the same 16.01:1.
.notice {
background-color: navy; /* #000080 */
color: white; /* 16.01:1 */
}Common questions
Does white text pass WCAG AA on navy?
Yes. White text measures 16.01:1 on navy, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.
Can navy be written in OKLCH?
Yes: oklch(27.1% 0.188 264.1), computed from #000080. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to navy?
Yes: darkblue (#00008b) is the nearest, 0.020 away in OKLab, then midnightblue at 0.054.