Nearest named color · #004D5D
#004D5D
Nearest named color: Nocturnal Expedition
#004D5D (rgb(0 77 93), hsl(190 100% 18%), oklch(0.388 0.07 217.8)) is closest to the named color Nocturnal Expedition. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#004D5D
oklch(0.388 0.07 217.8)
Color conversions
- HEX
- #004d5d
- RGB
- rgb(0 77 93)
- HSL
- hsl(190 100% 18%)
- HWB
- hwb(190 0% 64%)
- OKLCH
- oklch(0.388 0.07 217.8)
- OKLab
- oklab(0.388 -0.055 -0.043)
- CIE Lab
- lab(29.37 -16.57 -15.67)
- LCH
- lch(29.37 22.8 223.4)
- CMYK
- cmyk(100% 17% 0% 64%)
Tints · Shades · Tones
Tints
- 255D6C
- 3F6E7B
- 567F8B
- 6E919B
- 85A2AB
- 9DB4BB
- B5C7CC
- CDD9DD
- E6ECEE
Shades
- 004250
- 003743
- 002C37
- 00222A
- 00181F
- 000F14
- 00070A
- 000203
- 000000
Tones
- 185261
- 285764
- 345C68
- 40626B
- 4B676F
- 566C72
- 617176
- 6B7679
- 767B7D
Color harmonies
Complementary +180°
- 004D5D
Nocturnal Expedition
- 643628
≈ Hairy Heath
Analogous -30° +30°
- 004D5D
Nocturnal Expedition
- 00504B
≈ Action Green
- 234768
≈ Commodore
Triadic +120° +240°
- 004D5D
Nocturnal Expedition
- 5C3551
≈ Ruby Violet
- 4E4411
≈ Roman Bronze
Split-complementary +150° +210°
- 004D5D
Nocturnal Expedition
- 64343D
≈ Kremlin Red
- 5D3D16
≈ Hippogriff Brown
Tetradic +90° +180° +270°
- 004D5D
Nocturnal Expedition
- 4F3A61
≈ Mulberry Purple
- 643628
≈ Hairy Heath
- 3A4B20
≈ Avocado Dark Green
Contrast & accessibility
Ag
AAAOn white
WCAG 9.46:1 · APCA Lc 91
Ag
FailOn black
WCAG 2.21:1 · APCA Lc 11
Best text color: #FFFFFF
WCAG 9.46:1 (AAA) · APCA Lc 91
Contrast pairs
Code snippets
CSS
:root {
--nocturnal-expedition: #004d5d;
--nocturnal-expedition-rgb: 0 77 93;
--nocturnal-expedition-oklch: oklch(0.388 0.07 217.8);
}
.element {
color: var(--nocturnal-expedition);
background-color: hsl(190 100% 18%);
border-color: oklch(0.388 0.07 217.8);
}Tailwind CSS v4
@theme {
--color-nocturnal-expedition: #004d5d;
--color-nocturnal-expedition-50: #e0faff;
--color-nocturnal-expedition-100: #cfeef8;
--color-nocturnal-expedition-200: #b4dce9;
--color-nocturnal-expedition-300: #90c0d0;
--color-nocturnal-expedition-400: #6ea9ba;
--color-nocturnal-expedition-500: #4b92a5;
--color-nocturnal-expedition-600: #407b8b;
--color-nocturnal-expedition-700: #336370;
--color-nocturnal-expedition-800: #234852;
--color-nocturnal-expedition-900: #173239;
--color-nocturnal-expedition-950: #081e23;
}SCSS
$nocturnal-expedition: #004d5d;
$nocturnal-expedition-rgb: 0, 77, 93;
$nocturnal-expedition-light: mix(#fff, $nocturnal-expedition, 20%);
$nocturnal-expedition-dark: mix(#000, $nocturnal-expedition, 20%);
.element {
color: $nocturnal-expedition;
box-shadow: 0 0 0 2px rgba($nocturnal-expedition, 0.35);
}