Midnight Blue (#191970) — Color Codes, Meaning & UI Palettes
Midnight Blue (#191970) is an intensely dark shade of blue that appears almost black under dim light, popularized by the Duke of Windsor as a deeper, richer alternative to black for evening wear. It conveys supreme authority, formality, and deep focus.
#191970. In RGB, it is rgb(25, 25, 112). In HSL, it is hsl(240deg, 64%, 27%), and its print CMYK formulation is cmyk(78%, 78%, 0%, 56%). It has a relative luminance of 0.021 and pairs best in UI design with Pure White (#FFFFFF) and Liquid Gold (#F59E0B).
WCAG 2.1 Accessibility & Contrast Rating
11-Step Tints & Shades Scale (Tailwind 50–950)
Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:
Color Harmonies & Palette Schemes
Complementary
Analogous -30°
Analogous +30°
Triadic +120°
Triadic +240°
Curated UI Design Pairings for Midnight Blue
Flawless dark-mode background and header bar color for enterprise software, legal firms, and banking platforms. AAA accessibility with pure white and amber accents.
Export Midnight Blue Code Snippets
--color-midnight-blue: #191970;
'midnight-blue': '#191970'
Color(hex: "#191970")
{"name": "Midnight Blue", "hex": "#191970"}
Frequently Asked Questions About Midnight Blue (#191970)
What is the exact HEX code for Midnight Blue?
The exact HEX code for Midnight Blue is #191970. In 8-digit hexadecimal (with 100% opacity), it is #191970FF. Its RGB decimal equivalent is rgb(25, 25, 112) and its HSL value is hsl(240deg, 64%, 27%).
What colors go best with Midnight Blue in UI and web design?
Midnight Blue pairs exceptionally well with Pure White (#FFFFFF), Liquid Gold (#F59E0B), Cool Starlight Gray (#F1F5F9), and Deep Space Obsidian (#0A0A1F).
How do I use Midnight Blue in CSS and Tailwind CSS?
In standard CSS, apply it directly via color: #191970; or background-color: #191970;. In Tailwind CSS, use arbitrary value syntax like bg-[#191970] or text-[#191970], or define it in your Tailwind v4 @theme block as --color-midnight-blue: #191970;.
Is Midnight Blue WCAG accessible for readable text?
Against a pure white background (#FFFFFF), Midnight Blue achieves a contrast ratio of 14.79:1 (AAA). Against a pure black background (#000000), it achieves 1.42:1 (Fail). Check custom contrast pairings on Pikka's WCAG Contrast Checker.
Explore More Colors in the Dictionary
Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.