CSS Color: MidnightBlue
Named CSS color MidnightBlue — #191970 in HEX, rgb(25, 25, 112) in RGB, hsl(240, 64%, 27%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | MidnightBlue | color: MidnightBlue; |
| HEX | #191970 | color: #191970; |
| RGB | rgb(25, 25, 112) | color: rgb(25, 25, 112); |
| HSL | hsl(240, 64%, 27%) | color: hsl(240, 64%, 27%); |
About MidnightBlue
MidnightBlue is a dark, slightly desaturated blue that evokes the deep blue of the night sky. At hex `#191970`, it has equal but low red and green values (25 each) with 112 blue. Its 64% saturation (vs 100% for Navy) gives it a more muted, sophisticated quality.
In web design, MidnightBlue is a popular choice for dark mode backgrounds, hero sections, and dramatic full-page designs. Its slight desaturation and hint of warmth from the red component make it more nuanced than pure Navy.
For accessibility, MidnightBlue against white achieves approximately 14.7:1 contrast, easily passing WCAG AAA. Its dark character makes it an excellent background color that supports high readability for white or light-colored text.
MidnightBlue creates a premium, sophisticated atmosphere that is popular in luxury brands, portfolio sites, and high-end SaaS landing pages. It pairs well with gold, white, light blue, and soft pink. In Tailwind CSS, `blue-950` or `slate-900` offer similar depths.
FAQ
What is the hex code for MidnightBlue?
The CSS named color MidnightBlue has the hex code #191970. You can use it in CSS as color: #191970; or simply color: MidnightBlue;.
What is MidnightBlue in RGB?
In RGB notation, MidnightBlue is rgb(25, 25, 112). Use it in CSS as color: rgb(25, 25, 112);.
What is MidnightBlue in HSL?
In HSL notation, MidnightBlue is hsl(240, 64%, 27%). Use it in CSS as color: hsl(240, 64%, 27%);.
What color category is MidnightBlue?
MidnightBlue belongs to the Blue color family in the CSS named colors specification.
Can I use the name "MidnightBlue" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: MidnightBlue; or background-color: MidnightBlue; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert MidnightBlue to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →