Named color · #0066CC
Royal Navy Blue
Royal Navy Blue is #0066CC: rgb(0 102 204), hsl(210 100% 40%), oklch(0.522 0.177 255.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Royal Navy Blue color name →
#0066CC
oklch(0.522 0.177 255.8)
Color conversions
- HEX
- #0066cc
- RGB
- rgb(0 102 204)
- HSL
- hsl(210 100% 40%)
- HWB
- hwb(210 0% 20%)
- OKLCH
- oklch(0.522 0.177 255.8)
- OKLab
- oklab(0.522 -0.043 -0.172)
- CIE Lab
- lab(43.04 6.77 -60.89)
- LCH
- lch(43.04 61.27 276.3)
- CMYK
- cmyk(100% 50% 0% 20%)
Tints · Shades · Tones
Tints
- 2C76D2
- 4686D9
- 5E96DF
- 75A5E4
- 8CB4E9
- A3C3EE
- BAD2F3
- D0E1F7
- E8F0FB
Shades
- 0058B1
- 004A97
- 003C7E
- 002F65
- 00234E
- 001737
- 000C22
- 00040F
- 000002
Tones
- 1E6AC5
- 2E6EBE
- 3B71B7
- 4674B0
- 5176A8
- 5B79A1
- 657B99
- 6E7D91
- 777F89
Color harmonies
Complementary +180°
- 0066CC
Royal Navy Blue
- 8D5F00
≈ Rat Brown
Analogous -30° +30°
- 0066CC
Royal Navy Blue
- 007495
≈ Enchanted Blue
- 6552C9
≈ Waiporoporo Purple
Triadic +120° +240°
- 0066CC
Royal Navy Blue
- B92B46
≈ Hot Hibiscus
- 3B7C00
≈ Green People
Split-complementary +150° +210°
- 0066CC
Royal Navy Blue
- AB4700
≈ Pepperoni
- 736D00
≈ Worn Olive
Tetradic +90° +180° +270°
- 0066CC
Royal Navy Blue
- AB317F
≈ Festival Fuchsia
- 8D5F00
≈ Rat Brown
- 007D5B
≈ Sharp Green
Contrast & accessibility
Ag
AAOn white
WCAG 5.56:1 · APCA Lc 77
Ag
FailOn black
WCAG 3.77:1 · APCA Lc 25
Best text color: #FFFFFF
WCAG 5.56:1 (AA) · APCA Lc 77
Contrast pairs
Code snippets
CSS
:root {
--royal-navy-blue: #0066cc;
--royal-navy-blue-rgb: 0 102 204;
--royal-navy-blue-oklch: oklch(0.522 0.177 255.8);
}
.element {
color: var(--royal-navy-blue);
background-color: hsl(210 100% 40%);
border-color: oklch(0.522 0.177 255.8);
}Tailwind CSS v4
@theme {
--color-royal-navy-blue: #0066cc;
--color-royal-navy-blue-50: #d6f8ff;
--color-royal-navy-blue-100: #c3eaff;
--color-royal-navy-blue-200: #a5d7ff;
--color-royal-navy-blue-300: #7cb9ff;
--color-royal-navy-blue-400: #509fff;
--color-royal-navy-blue-500: #1e83f8;
--color-royal-navy-blue-600: #1d70d1;
--color-royal-navy-blue-700: #1759a8;
--color-royal-navy-blue-800: #06427d;
--color-royal-navy-blue-900: #052e59;
--color-royal-navy-blue-950: #001a3c;
}SCSS
$royal-navy-blue: #0066cc;
$royal-navy-blue-rgb: 0, 102, 204;
$royal-navy-blue-light: mix(#fff, $royal-navy-blue, 20%);
$royal-navy-blue-dark: mix(#000, $royal-navy-blue, 20%);
.element {
color: $royal-navy-blue;
box-shadow: 0 0 0 2px rgba($royal-navy-blue, 0.35);
}