Named color · #4C5E87
Indigo Navy Blue
Indigo Navy Blue is #4C5E87: rgb(76 94 135), hsl(222 28% 41%), oklch(0.485 0.07 265.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Indigo Navy Blue color name →
#4C5E87
oklch(0.485 0.07 265.7)
Color conversions
- HEX
- #4c5e87
- RGB
- rgb(76 94 135)
- HSL
- hsl(222 28% 41%)
- HWB
- hwb(222 30% 47%)
- OKLCH
- oklch(0.485 0.07 265.7)
- OKLab
- oklab(0.485 -0.005 -0.07)
- CIE Lab
- lab(39.75 1.67 -25.36)
- LCH
- lch(39.75 25.41 273.8)
- CMYK
- cmyk(44% 30% 0% 47%)
Tints · Shades · Tones
Tints
- 5C6D93
- 6D7C9F
- 7E8CAB
- 8F9CB6
- A1ACC2
- B3BCCE
- C6CCDB
- D9DDE7
- ECEEF3
Shades
- 415175
- 364463
- 2C3751
- 222B41
- 181F31
- 0F1421
- 060A13
- 020306
- 000001
Tones
- 516287
- 566586
- 5B6886
- 606C85
- 666F84
- 6B7384
- 707683
- 757982
- 7B7D81
Color harmonies
Complementary +180°
- 4C5E87
Indigo Navy Blue
- 715C2D
≈ Moss Brown
Analogous -30° +30°
- 4C5E87
Indigo Navy Blue
- 346581
≈ Southern Evening
- 625782
≈ Vigorous Violet
Triadic +120° +240°
- 4C5E87
Indigo Navy Blue
- 824F4A
≈ Cherokee Red
- 446A47
≈ Jungle Adventure
Split-complementary +150° +210°
- 4C5E87
Indigo Navy Blue
- 7D5437
≈ Pheasant Brown
- 5D6434
≈ Marsh Mix
Tetradic +90° +180° +270°
- 4C5E87
Indigo Navy Blue
- 7F4E60
≈ Artful Magenta
- 715C2D
≈ Moss Brown
- 2C6C5D
≈ Antique Green
Contrast & accessibility
Ag
AAOn white
WCAG 6.44:1 · APCA Lc 82
Ag
FailOn black
WCAG 3.25:1 · APCA Lc 20
Best text color: #FFFFFF
WCAG 6.44:1 (AA) · APCA Lc 82
Contrast pairs
Code snippets
CSS
:root {
--indigo-navy-blue: #4c5e87;
--indigo-navy-blue-rgb: 76 94 135;
--indigo-navy-blue-oklch: oklch(0.485 0.07 265.7);
}
.element {
color: var(--indigo-navy-blue);
background-color: hsl(222 28% 41%);
border-color: oklch(0.485 0.07 265.7);
}Tailwind CSS v4
@theme {
--color-indigo-navy-blue: #4c5e87;
--color-indigo-navy-blue-50: #ecf5ff;
--color-indigo-navy-blue-100: #dee8ff;
--color-indigo-navy-blue-200: #c7d4f3;
--color-indigo-navy-blue-300: #a8b7dc;
--color-indigo-navy-blue-400: #8b9ec9;
--color-indigo-navy-blue-500: #7085b5;
--color-indigo-navy-blue-600: #5f7199;
--color-indigo-navy-blue-700: #4c5a7b;
--color-indigo-navy-blue-800: #36425b;
--color-indigo-navy-blue-900: #252e40;
--color-indigo-navy-blue-950: #131a29;
}SCSS
$indigo-navy-blue: #4c5e87;
$indigo-navy-blue-rgb: 76, 94, 135;
$indigo-navy-blue-light: mix(#fff, $indigo-navy-blue, 20%);
$indigo-navy-blue-dark: mix(#000, $indigo-navy-blue, 20%);
.element {
color: $indigo-navy-blue;
box-shadow: 0 0 0 2px rgba($indigo-navy-blue, 0.35);
}