What Colors Go With Midnight Blue? Color Schemes That Make the Most of a Dark Background

Which colors work with midnight blue when you want a dark website without losing the visibility of headings and buttons? The key is to give text, accents, and lighter sections clear roles while letting the deep blue remain the main color. This article demonstrates the approach through a practical event announcement page.

Pair midnight blue with off-white, light blue, and gold

Midnight blue is a dark blue associated with the night sky. In CSS, the named color “midnightblue” is defined as ■#191970. Product names and design references can use the same name for slightly different shades, so share a color code as well as a name. HEX is a way of specifying web colors with a # sign and six hexadecimal characters.

On a dark background, warm off-white ■#F7F5EE can provide a strong brightness difference for the main text. Use muted light blue ■#C3CCE8 for supporting details such as the date, and reserve soft gold ■#E6B65A for an important button. On any light-colored section, switch the body text to dark blue-gray ■#263451. Each color then has a distinct purpose within the layout.

Rather than turning gold into a large background or the color of long paragraphs, use it in a small area that identifies the main action you want visitors to take.

An example color scheme for a stargazing event page

Imagine a website announcing an evening stargazing session. You can give the introductory area a dark background, then switch to a light background for detailed instructions. This keeps the deep blue prominent while making the page easier to scan.

• Hero background: midnight blue ■#191970. Set the heading “Stargazing Night” in warm off-white ■#F7F5EE so it stands out clearly.
• Date and venue: muted light blue ■#C3CCE8 on midnight blue ■#191970, making them visually quieter than the main heading.
• Registration button: use a soft gold ■#E6B65A background with midnight blue ■#191970 text, labeled “Register for the event.”
• Details section: place body text in dark blue-gray ■#263451 on warm off-white ■#F7F5EE.
• Dividers and small decoration: if you add short gold ■#E6B65A lines, keep them less prominent than the main registration button.

Put the event summary and registration button in the first section, followed by what to bring, where to meet, and other instructions in the lighter section. Combine the background change with headings and consistent spacing to separate the information. If you add dark cards on top of the dark blue background, their boundaries may be subtle; use enough spacing or a lighter border where needed.

Check text and button contrast

A contrast ratio is a numerical measure of the brightness difference between text and its background. Under the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA, ordinary text needs a ratio of at least 4.5:1, while large text needs at least 3:1.

Midnight blue ■#191970 paired with warm off-white ■#F7F5EE has a contrast ratio of about 13.61:1. Muted light blue ■#C3CCE8 on the same midnight blue background reaches about 9.28:1. Midnight blue ■#191970 text on a soft gold ■#E6B65A button reaches about 7.92:1. All three combinations exceed the threshold for ordinary text.

By comparison, white ■#FFFFFF text on soft gold ■#E6B65A reaches only about 1.87:1, which is insufficient. Gold ■#E6B65A used as small text on the light off-white background ■#F7F5EE reaches only about 1.72:1. Always check a color against the background directly beside it. With photographs or translucent overlays, recalculate using the colors actually rendered behind the words, and do not rely on color alone to communicate important information.