Nearest named color · #20487E
#20487E
Nearest named color: Maritime Outpost
#20487E (rgb(32 72 126), hsl(214 59% 31%), oklch(0.403 0.102 256.8)) is closest to the named color Maritime Outpost. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#20487E
oklch(0.403 0.102 256.8)
Color conversions
- HEX
- #20487e
- RGB
- rgb(32 72 126)
- HSL
- hsl(214 59% 31%)
- HWB
- hwb(214 13% 51%)
- OKLCH
- oklch(0.403 0.102 256.8)
- OKLab
- oklab(0.403 -0.023 -0.099)
- CIE Lab
- lab(29.99 1.11 -35.37)
- LCH
- lch(29.99 35.39 271.8)
- CMYK
- cmyk(75% 43% 0% 51%)
Tints · Shades · Tones
Tints
- 35598B
- 4A6B98
- 5F7CA5
- 758EB2
- 8BA1BF
- A1B3CC
- B8C6D8
- CFD8E5
- E7ECF2
Shades
- 1A3D6D
- 15335C
- 0F294C
- 0A1F3C
- 06162D
- 030D1F
- 010611
- 000205
- 000001
Tones
- 2A4E7F
- 34547F
- 3E5A80
- 485F80
- 516581
- 5A6A81
- 647081
- 6D7581
- 777B80
Color harmonies
Complementary +180°
- 20487E
Maritime Outpost
- 624100
≈ Notorious Neanderthal
Analogous -30° +30°
- 20487E
Maritime Outpost
- 005068
≈ Hanada Blue
- 463E7C
≈ Sage Violet
Triadic +120° +240°
- 20487E
Maritime Outpost
- 752D34
≈ Wine and Unwind
- 2C5416
≈ Navy Green
Split-complementary +150° +210°
- 20487E
Maritime Outpost
- 73330D
≈ Beer Glazed Bacon
- 4E4B00
≈ Scorzonera Brown
Tetradic +90° +180° +270°
- 20487E
Maritime Outpost
- 6E2E53
≈ Bordeaux Red
- 624100
≈ Notorious Neanderthal
- 00563F
≈ Sacramento State Green
Contrast & accessibility
Ag
AAAOn white
WCAG 9.17:1 · APCA Lc 91
Ag
FailOn black
WCAG 2.28:1 · APCA Lc 11
Best text color: #FFFFFF
WCAG 9.17:1 (AAA) · APCA Lc 91
Contrast pairs
Code snippets
CSS
:root {
--maritime-outpost: #20487e;
--maritime-outpost-rgb: 32 72 126;
--maritime-outpost-oklch: oklch(0.403 0.102 256.8);
}
.element {
color: var(--maritime-outpost);
background-color: hsl(214 59% 31%);
border-color: oklch(0.403 0.102 256.8);
}Tailwind CSS v4
@theme {
--color-maritime-outpost: #20487e;
--color-maritime-outpost-50: #e4f7ff;
--color-maritime-outpost-100: #d4e9ff;
--color-maritime-outpost-200: #bad6ff;
--color-maritime-outpost-300: #98b9ec;
--color-maritime-outpost-400: #77a0da;
--color-maritime-outpost-500: #5888c9;
--color-maritime-outpost-600: #4b73a9;
--color-maritime-outpost-700: #3c5c88;
--color-maritime-outpost-800: #294465;
--color-maritime-outpost-900: #1b2f47;
--color-maritime-outpost-950: #0c1b2e;
}SCSS
$maritime-outpost: #20487e;
$maritime-outpost-rgb: 32, 72, 126;
$maritime-outpost-light: mix(#fff, $maritime-outpost, 20%);
$maritime-outpost-dark: mix(#000, $maritime-outpost, 20%);
.element {
color: $maritime-outpost;
box-shadow: 0 0 0 2px rgba($maritime-outpost, 0.35);
}