Nearest named color · #00377C
#00377C
Nearest named color: Atlantic Navy
#00377C (rgb(0 55 124), hsl(213 100% 24%), oklch(0.352 0.129 257.7)) is closest to the named color Atlantic Navy. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#00377C
oklch(0.352 0.129 257.7)
Color conversions
- HEX
- #00377c
- RGB
- rgb(0 55 124)
- HSL
- hsl(213 100% 24%)
- HWB
- hwb(213 0% 51%)
- OKLCH
- oklch(0.352 0.129 257.7)
- OKLab
- oklab(0.352 -0.027 -0.126)
- CIE Lab
- lab(23.54 7.63 -44.53)
- LCH
- lch(23.54 45.18 279.7)
- CMYK
- cmyk(100% 56% 0% 51%)
Tints · Shades · Tones
Tints
- 1E4B8A
- 375E97
- 4E71A5
- 6685B2
- 7E99BF
- 97ADCC
- B0C1D9
- CAD5E6
- E4EAF2
Shades
- 002E6B
- 00265A
- 001E4A
- 00163B
- 000F2C
- 00081E
- 000311
- 000105
- 000001
Tones
- 123F7D
- 21477E
- 2D4F7F
- 3A5680
- 455D81
- 516581
- 5D6C81
- 687281
- 747981
Color harmonies
Complementary +180°
- 00377C
Atlantic Navy
- 503500
≈ Eyelash Camel
Analogous -30° +30°
- 00377C
Atlantic Navy
- 004157
≈ Maniac Mansion
- 3A2979
≈ Clear Purple
Triadic +120° +240°
- 00377C
Atlantic Navy
- 6F0E20
≈ Surya Red
- 194700
≈ Dark Fern
Split-complementary +150° +210°
- 00377C
Atlantic Navy
- 612700
≈ Hot Fudge
- 3F3D00
≈ Dark Olive
Tetradic +90° +180° +270°
- 00377C
Atlantic Navy
- 671247
≈ Spanish Purple
- 503500
≈ Eyelash Camel
- 004633
≈ UP Forest Green
Contrast & accessibility
Ag
AAAOn white
WCAG 11.42:1 · APCA Lc 96
Ag
FailOn black
WCAG 1.83:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 11.42:1 (AAA) · APCA Lc 96
Contrast pairs
Code snippets
CSS
:root {
--atlantic-navy: #00377c;
--atlantic-navy-rgb: 0 55 124;
--atlantic-navy-oklch: oklch(0.352 0.129 257.7);
}
.element {
color: var(--atlantic-navy);
background-color: hsl(213 100% 24%);
border-color: oklch(0.352 0.129 257.7);
}Tailwind CSS v4
@theme {
--color-atlantic-navy: #00377c;
--color-atlantic-navy-50: #e0f7ff;
--color-atlantic-navy-100: #cfeaff;
--color-atlantic-navy-200: #b4d6ff;
--color-atlantic-navy-300: #90b9f9;
--color-atlantic-navy-400: #6da0ea;
--color-atlantic-navy-500: #4c86da;
--color-atlantic-navy-600: #4171b8;
--color-atlantic-navy-700: #345b94;
--color-atlantic-navy-800: #22436e;
--color-atlantic-navy-900: #162e4d;
--color-atlantic-navy-950: #071b33;
}SCSS
$atlantic-navy: #00377c;
$atlantic-navy-rgb: 0, 55, 124;
$atlantic-navy-light: mix(#fff, $atlantic-navy, 20%);
$atlantic-navy-dark: mix(#000, $atlantic-navy, 20%);
.element {
color: $atlantic-navy;
box-shadow: 0 0 0 2px rgba($atlantic-navy, 0.35);
}