CSS Named Color
Copy-ready color values
HEX
#191970RGB
rgb(25, 25, 112)HSL
hsl(240, 64%, 27%)HSV
hsv(240, 78%, 44%)CMYK approx.
cmyk(78, 78, 0, 56)Color value table
| Format | Value | Copy |
|---|---|---|
| HEX | #191970 | |
| RGB | rgb(25, 25, 112) | |
| HSL | hsl(240, 64%, 27%) | |
| HSV | hsv(240, 78%, 44%) | |
| CMYK approx. | cmyk(78, 78, 0, 56) | |
| CSS keyword | midnightblue |
Contrast and classification
DarkLightness14.85:1Contrast with white1.41:1Contrast with blackBlue / CyanColor family
Shade and tint preview
White 10%#30307E
White 30%#5E5E9B
White 70%#BABAD4
White 90%#E8E8F1
Black 10%#171765
Black 30%#12124E
Black 70%#080822
Black 90%#03030B
Harmony palettes
Complementary
#E6E68F#ECECAAAnalogous
#191966#192366Triadic
#197019#701919Split complementary
#EBEBA3#BDBD75Using Midnightblue
Midnightblue works best when it is chosen with contrast, surrounding colors, and interface state in mind. Use the HEX value for static CSS, RGB when you need channel-level control, and HSL when adjusting lightness or saturation for hover states. The CMYK value is an approximate screen-to-print conversion, so print workflows should still rely on calibrated design software or a printer profile.
CSS, SCSS, and Tailwind examples
:root {
--color-midnightblue: #191970;
}
.button-primary {
background: var(--color-midnightblue);
color: #ffffff;
}
$midnightblue: #191970;
// Tailwind arbitrary value
class="bg-[#191970] text-white"