Nearest named color · #002162
#002162
Nearest named color: Midnight Melancholia
#002162 (rgb(0 33 98), hsl(220 100% 19%), oklch(0.277 0.121 261.2)) is closest to the named color Midnight Melancholia. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#002162
oklch(0.277 0.121 261.2)
Color conversions
- HEX
- #002162
- RGB
- rgb(0 33 98)
- HSL
- hsl(220 100% 19%)
- HWB
- hwb(220 0% 62%)
- OKLCH
- oklch(0.277 0.121 261.2)
- OKLab
- oklab(0.277 -0.019 -0.12)
- CIE Lab
- lab(14.57 12.84 -42.38)
- LCH
- lch(14.57 44.29 286.9)
- CMYK
- cmyk(100% 66% 0% 62%)
Tints · Shades · Tones
Tints
- 173772
- 2E4C82
- 466192
- 5E77A1
- 778CB1
- 91A3C1
- ACB9D0
- C7D0E0
- E3E7EF
Shades
- 001B54
- 001647
- 00103A
- 000B2D
- 000621
- 000316
- 00010B
- 000003
- 000000
Tones
- 0C2C66
- 19366A
- 26406D
- 334971
- 3F5274
- 4C5B77
- 596579
- 656E7C
- 73777E
Color harmonies
Complementary +180°
- 002162
Midnight Melancholia
- 362500
≈ Black Swan
Analogous -30° +30°
- 002162
Midnight Melancholia
- 002C3E
≈ Murky Depths
- 2C145D
≈ Voldemort
Triadic +120° +240°
- 002162
Midnight Melancholia
- 52000D
≈ Saving Light
- 053200
≈ Serpentine Shadow
Split-complementary +150° +210°
- 002162
Midnight Melancholia
- 431B00
≈ Bath in Chocolate
- 292A00
≈ Secret Passage
Tetradic +90° +180° +270°
- 002162
Midnight Melancholia
- 4D002F
≈ Fig Balsamic
- 362500
≈ Black Swan
- 003025
≈ Dark Jungle
Contrast & accessibility
Ag
AAAOn white
WCAG 15.06:1 · APCA Lc 101
Ag
FailOn black
WCAG 1.39:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 15.06:1 (AAA) · APCA Lc 101
Contrast pairs
Code snippets
CSS
:root {
--midnight-melancholia: #002162;
--midnight-melancholia-rgb: 0 33 98;
--midnight-melancholia-oklch: oklch(0.277 0.121 261.2);
}
.element {
color: var(--midnight-melancholia);
background-color: hsl(220 100% 19%);
border-color: oklch(0.277 0.121 261.2);
}Tailwind CSS v4
@theme {
--color-midnight-melancholia: #002162;
--color-midnight-melancholia-50: #e3f6ff;
--color-midnight-melancholia-100: #d3e9ff;
--color-midnight-melancholia-200: #b9d5ff;
--color-midnight-melancholia-300: #97b7f6;
--color-midnight-melancholia-400: #759ee6;
--color-midnight-melancholia-500: #5785d6;
--color-midnight-melancholia-600: #4a70b4;
--color-midnight-melancholia-700: #3b5a91;
--color-midnight-melancholia-800: #28426c;
--color-midnight-melancholia-900: #1b2e4c;
--color-midnight-melancholia-950: #0b1a32;
}SCSS
$midnight-melancholia: #002162;
$midnight-melancholia-rgb: 0, 33, 98;
$midnight-melancholia-light: mix(#fff, $midnight-melancholia, 20%);
$midnight-melancholia-dark: mix(#000, $midnight-melancholia, 20%);
.element {
color: $midnight-melancholia;
box-shadow: 0 0 0 2px rgba($midnight-melancholia, 0.35);
}