Midnight Blue Color Palette
Midnight Blue is hex #191970, rgb(25, 25, 112). Midnight blue is a very dark blue, darker than navy, named after the night sky. It is a popular base for dark themes because it feels deeper than black.
By Mohamed Farhan · Updated Oct 19, 2026
Midnight Blue color codes
Reading the midnight blue color codes
The hex code #191970 is three pairs of base-16 numbers for red, green and blue. 19 is 25, 19 is 25 and 70 is 112, each on a scale from 0 to 255. That is why the same color is written rgb(25, 25, 112) in CSS. The blue channel is the strongest here, which is what gives midnight blue its indigo character.
HSL describes the same color the way people think about it. A hue of 240 degrees places midnight blue in the indigo part of the color wheel. Saturation of 64% makes it vivid, and lightness of 27% makes it a dark color. HSL is the easiest format to adjust by hand: keep the hue, then raise or lower lightness to create tints and shades that stay in the same family.
For print, the approximate CMYK mix is 78% cyan, 78% magenta, 0% yellow and 56% black. Screen and print colors never match perfectly, because monitors emit light while ink absorbs it, so always proof a printed sample before committing to midnight blue for packaging or stationery. See MDN's guide to CSS color values for every format browsers accept.
Midnight Blue shades and tints
A full 50 to 950 scale built around #191970, so you can use midnight blue for backgrounds, borders, buttons and text without leaving the family. Click any shade to copy it.
// tailwind.config.js
theme: {
extend: {
colors: {
"midnight-blue": {
50: "#DDDDEA",
100: "#C5C5DB",
200: "#ACACCC",
300: "#9494BC",
400: "#7B7BAD",
500: "#63639E",
600: "#4A4A8F",
700: "#32327F",
800: "#191970",
900: "#131355",
950: "#0D0D3B",
},
},
},
}:root {
--midnight-blue-50: #DDDDEA;
--midnight-blue-100: #C5C5DB;
--midnight-blue-200: #ACACCC;
--midnight-blue-300: #9494BC;
--midnight-blue-400: #7B7BAD;
--midnight-blue-500: #63639E;
--midnight-blue-600: #4A4A8F;
--midnight-blue-700: #32327F;
--midnight-blue-800: #191970;
--midnight-blue-900: #131355;
--midnight-blue-950: #0D0D3B;
}A shade-by-shade guide to midnight blue
The 50 to 950 scale above follows the same structure as Tailwind's built-in palettes, so each step has a natural job. The lightest steps, 50 (#DDDDEA) and 100 (#C5C5DB), are page and card backgrounds: they carry the midnight blue mood without competing with content. Steps 200 (#ACACCC) and 300 (#9494BC) suit borders, dividers, hover states and selected rows.
The middle of the scale, 400 to 600, is where midnight blue is most recognizable, so use it for brand moments, illustrations and primary buttons. White text reaches the 4.5:1 body-text contrast minimum from step 500 upward, so use step 500 or darker when a button label needs to be white. Near-black text stays readable on steps 50 to 400.
The darkest steps, 800 (#191970) through 950 (#0D0D3B), make headings, body text and dark-mode surfaces that stay clearly related to midnight blue. Using step 900 or 950 for text instead of pure black is one of the simplest ways to make an interface feel designed rather than default.
Colors that go with midnight blue
How the midnight blue color combinations work
Complementary. Directly across the color wheel from midnight blue is #707019, which sits closest to olive green among common named colors. Complementary pairs create the strongest contrast of hue, so use the second color sparingly, for a single call to action or highlight, rather than in equal amounts.
Analogous. #194570 and #451970 sit 30 degrees either side of midnight blue. Analogous palettes feel calm and cohesive because the colors share undertones; they are ideal for illustrations, gradients and backgrounds where you want harmony more than contrast.
Triadic and split complementary. The triadic set (#701919 and #197019) is evenly spaced around the wheel and feels playful; the second color is closest to burgundy. The split complementary set (#704519 and #457019) keeps much of the complementary contrast but is easier to balance, which makes it a good choice for data visualization and multi-category tags.
Monochromatic. The monochromatic set runs from #4B4BD7 to #070721. A single-hue palette is the safest way to build a calm, premium interface: rely on lightness for hierarchy, then add one neutral and one accent if you need emphasis.
Midnight Blue compared with similar colors
navy blue (#000080) is about as light and more saturated, and shares almost the same hue. Choose navy blue if you need more weight and contrast; choose midnight blue if you want its specific balance of brightness and color.
indigo (#4B0082) is about as light and more saturated, and leans further around the wheel toward violet. Choose indigo if you need more weight and contrast; choose midnight blue if you want its specific balance of brightness and color.
charcoal (#36454F) is about as light and more muted, and leans back the wheel toward blue. Choose charcoal if you need more weight and contrast; choose midnight blue if you want its specific balance of brightness and color.
Midnight Blue in a real interface
Swatches only tell half the story. Here midnight blue carries the primary action, with tints from its own scale for the surface and panels.
Weekly summary
Revenue grew 12% this week. Three invoices are waiting for approval.
Using midnight blue in UI: buttons, text, backgrounds and dark mode
- Buttons. Midnight Blue carries white labels at 14.85:1, which passes AA for normal text.
- Text. Midnight Blue works as text on white backgrounds.
- Backgrounds. Use steps 50 and 100 for large areas and keep the base color for smaller surfaces. Big blocks of a vivid dark color draw attention, so give them a reason, like a hero section or pricing highlight.
- Dark mode. Steps 900 and 950 make a dark surface tinted with midnight blue. On dark backgrounds the base color often needs a lighter step (300 or 400) to keep enough contrast for icons and borders, as required by WCAG non-text contrast.
- States. Shift one step darker for hover and two steps darker for pressed. Keep focus rings in a contrasting color so keyboard users can always see them.
Contrast and accessibility
AA needs 4.5:1 for body text and 3:1 for large text. AAA needs 7:1.
Color contrast is measured as a ratio from 1:1 (no contrast) to 21:1 (black on white). Midnight Blue scores 14.85:1 against white (AAA) and 1.41:1 against black (Fail). The WCAG 2.1 contrast guideline asks for at least 4.5:1 for normal text and 3:1 for large text, which is why the shade guide above recommends specific steps for text and labels.
Contrast is only half of accessibility. Around 1 in 12 men and 1 in 200 women have some form of color vision deficiency, so never use midnight blue alone to signal meaning such as success, error or selection. Pair it with an icon, a label or a change in weight.
What midnight blue means
Blue is the most trusted color in digital products. It signals stability, competence and calm, which is why banks, SaaS tools and health platforms default to it.
Midnight blue is a very dark blue named after the night sky. In the early 20th century, tailors promoted midnight blue for evening wear because it looks deeper than black under artificial light.
Because so many products already use blue, the shade matters more than the hue. Pair it with an unexpected neutral or accent so the interface does not look like every other dashboard.
Where midnight blue works best
- Dark mode backgrounds
- Luxury brands
- Night and sleep apps
- Formalwear
How to style midnight blue
Midnight blue pairs with gold, white, silver and soft pink. It makes an excellent dark-mode background and supports white text with very high contrast.
Build a UI with midnight blue
Inspo AI generates a full React + Tailwind screen using #191970 as the brand color, grounded in real shipped designs.
Sources and further reading
- Wikipedia: Midnight Blue · History and definition of midnight blue.
- WCAG 2.1: Contrast (Minimum) · The W3C rule behind the 4.5:1 and 3:1 thresholds used on this page.
- WCAG 2.1: Use of Color · Why color should never be the only way information is shown.
- MDN: CSS color values · Reference for hex, rgb() and hsl() syntax.
- Tailwind CSS: Customizing colors · How to add a custom color scale to your theme.
Similar colors
Questions people ask
What is the hex code for midnight blue?
The hex code for midnight blue used on this page is #191970. In RGB that is rgb(25, 25, 112), and in HSL it is hsl(240, 64%, 27%).
What colors go well with midnight blue?
Midnight Blue pairs well with #0B0B3B, #E8E8F7, #F5C518 (the Night Sky palette above). Its complementary color is #707019, and analogous colors are #194570 and #451970.
Is midnight blue a warm or cool color?
Midnight Blue is a cool color. Its hue sits at 240 degrees on the color wheel with 64% saturation.
Can I use midnight blue for text?
Midnight Blue has a contrast ratio of 14.85:1 against white and 1.41:1 against black. Body text needs at least 4.5:1, so it works as text on white backgrounds.
What does midnight blue mean?
Blue is the most trusted color in digital products. It signals stability, competence and calm, which is why banks, SaaS tools and health platforms default to it. Midnight Blue in particular is used for dark mode backgrounds and luxury brands.
How do I use midnight blue in Tailwind CSS?
Use an arbitrary value like bg-[#191970] for a one-off, or add the 50-950 scale from this page to theme.extend.colors in tailwind.config.js and use classes like bg-midnight-blue-500 and text-midnight-blue-900.
↘ Building Inspo AI | AI-Powered Design Research & Builder Platform | Design Engineer.