Named color · #000080
Navy Blue
Navy Blue is #000080: rgb(0 0 128), hsl(240 100% 25%), oklch(0.271 0.188 264.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Navy Blue color name →
#000080
oklch(0.271 0.188 264.1)
Color conversions
- HEX
- #000080
- RGB
- rgb(0 0 128)
- HSL
- hsl(240 100% 25%)
- HWB
- hwb(240 0% 50%)
- OKLCH
- oklch(0.271 0.188 264.1)
- OKLab
- oklab(0.271 -0.019 -0.187)
- CIE Lab
- lab(11.34 40.96 -67.2)
- LCH
- lch(11.34 78.7 301.4)
- CMYK
- cmyk(100% 100% 0% 50%)
Tints · Shades · Tones
Tints
- 072A8E
- 20449D
- 395CAA
- 5373B7
- 6E8AC4
- 89A1D1
- A6B8DD
- C3CFE9
- E1E7F4
Shades
- 00006E
- 00005D
- 00004D
- 00003D
- 00002E
- 00001F
- 000012
- 000006
- 000001
Tones
- 011C82
- 0C2C83
- 1A3984
- 284485
- 364F85
- 455A85
- 536384
- 626D83
- 717782
Color harmonies
Complementary +180°
- 000080
Navy Blue
- 332400
≈ Black Swan
Analogous -30° +30°
- 000080
Navy Blue
- 002B3E
≈ Murky Depths
- 2F0066
≈ Deep Violet
Triadic +120° +240°
- 000080
Navy Blue
- 500008
≈ Scorched Brown
- 003104
≈ Serpentine Shadow
Split-complementary +150° +210°
- 000080
Navy Blue
- 3F1B00
≈ 90% Cocoa
- 272A00
≈ Lindworm Green
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 16.00:1 · APCA Lc 101
Ag
FailOn black
WCAG 1.31:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 16.00:1 (AAA) · APCA Lc 101
Contrast pairs
Code snippets
CSS
:root {
--navy-blue: #000080;
--navy-blue-rgb: 0 0 128;
--navy-blue-oklch: oklch(0.271 0.188 264.1);
}
.element {
color: var(--navy-blue);
background-color: hsl(240 100% 25%);
border-color: oklch(0.271 0.188 264.1);
}Tailwind CSS v4
@theme {
--color-navy-blue: #000080;
--color-navy-blue-50: #dcf5ff;
--color-navy-blue-100: #cbe7ff;
--color-navy-blue-200: #afd2ff;
--color-navy-blue-300: #8ab3ff;
--color-navy-blue-400: #6499ff;
--color-navy-blue-500: #437bff;
--color-navy-blue-600: #3a69d8;
--color-navy-blue-700: #2e54ae;
--color-navy-blue-800: #1b3e82;
--color-navy-blue-900: #122b5c;
--color-navy-blue-950: #05173f;
}SCSS
$navy-blue: #000080;
$navy-blue-rgb: 0, 0, 128;
$navy-blue-light: mix(#fff, $navy-blue, 20%);
$navy-blue-dark: mix(#000, $navy-blue, 20%);
.element {
color: $navy-blue;
box-shadow: 0 0 0 2px rgba($navy-blue, 0.35);
}