Midnight Blue

Meet Midnight Blue (#191970), a shade that pushes the boundaries of darkness. It’s a color so deep it nearly touches black, yet it holds a distinct, saturated blue core. This subtle complexity gives it a sophisticated and powerful presence in any design palette.

Midnight Blue
#191970
Copy
Copied
Access our full UI & UX library today.
Join for free

What color is Midnight Blue?

Midnight Blue is a profoundly dark shade of blue, bordering on black, yet it maintains a clear blue identity. It's a cool-toned color, characterized by its deep saturation and low brightness, evoking the color of a night sky just after dusk.

Its composition is primarily blue mixed with black, which gives it its signature depth. Depending on the surrounding light and colors, it can reveal subtle undertones of gray or even a hint of violet, adding a layer of complexity to its appearance.

What is the symbolic meaning of Midnight Blue in digital product design?

Midnight Blue carries a sense of sophistication, authority, and mystery, suggesting the vastness and stability of the cosmos.

Psychologically, this deep shade is perceived as trustworthy and formal, projecting confidence and seriousness as a softer alternative to pure black.

How can I effectively use Midnight Blue in my UI design?

Midnight Blue works beautifully as a foundational color, offering a sophisticated alternative to pure black. For a crisp, high-contrast interface, pair it with warm whites or light grays. To create a more dynamic composition, introduce accent colors like a vibrant coral, a rich gold, or even a sharp lime green. Applying the 60-30-10 principle can help balance these combinations, using Midnight Blue as either the dominant or secondary shade.

While some major brands like Coursera employ dark blues in their branding, a pure Midnight Blue (#191970) is relatively rare in the product design space. This scarcity offers a distinct advantage, giving new products a chance to build a memorable and unique visual identity that stands apart from the crowd.

Use the tools below to explore curated palettes, test your color pairings for accessibility, and preview how Midnight Blue looks in real components from well-known apps.

Using Midnight Blue color codes

To apply Midnight Blue in your projects, start with its hex code, #191970. This code is the standard for web design and digital applications, directly telling browsers and design software the exact shade to display.

Depending on your medium, you may need to convert #191970. For digital screens, you'll use the RGB values which define the intensity of red, green, and blue light. For print materials, the CMYK values are required, specifying the mix of cyan, magenta, yellow, and black inks. Other models like HSL offer a more intuitive way to adjust hue, saturation, and lightness.

We've converted Midnight Blue's #191970 hex code into its corresponding RGB, CMYK, HSL, and other popular formats below. Simply copy the code you need for your specific application.

Midnight Blue Code Conversions

HEX
#191970
Copy
Copied
LAB
34.74, -20.85, 14.42
Copy
Copied
RGB
53, 90, 58
Copy
Copied
XYZ
5.89, 8.37, 5.31
Copy
Copied
HSL
128°, 26%, 28%
Copy
Copied
LCH
34.74, 25.35, 145.33°
Copy
Copied
HSB
128°, 41%, 35%
Copy
Copied
LUV
34.74, -7.15, 19.17
Copy
Copied
CMYK
41%, 0%, 36%, 65%
Copy
Copied
HWB
128°, 21%, 65%
Copy
Copied

Midnight Blue Color Harmonies

Analogous

Analogous colors are found next to Midnight Blue on the color wheel, creating a harmonious and visually pleasing palette with a serene effect.

#123456
#123456
#123456

Complementary

Colors on opposite ends of the color wheel are complementary. Paired with Midnight Blue, these hues create a bold look with maximum visual contrast.

#123456
#123456

Split Complementary

For Midnight Blue, a split complementary palette takes the two colors on either side of its opposite, creating a high-contrast look with less tension.

#123456
#123456
#123456

Triadic

A triadic scheme pairs Midnight Blue with two other colors, equally spaced on the color wheel, for a vibrant and balanced palette.

#123456
#123456
#123456

Tetradic

A tetradic scheme for Midnight Blue uses two pairs of complementary colors, forming a rectangle on the color wheel for a vibrant, balanced palette.

#123456
#123456
#123456
#123456

Square

A square color scheme pairs Midnight Blue with three other colors, all evenly spaced on the color wheel for a vibrant, high-contrast palette.

#123456
#123456
#123456
#123456

Midnight Blue Color Variations

Shades

Shades are darker versions of Midnight Blue, created by adding black for more depth.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Tints

Tints are lighter versions of Midnight Blue, created by adding white for a softer feel.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Tones

Tones of Midnight Blue are created by adding gray, resulting in a softer, more muted appearance.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Hues

Hues are variations of Midnight Blue, differing in intensity and temperature to create distinct moods.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

What Interfaces Use Colors Like Midnight Blue?

No items found.
Keep the inspiration going with Mobbin
Join for free
No items found.

Never run out of inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Nike
Brand Logo Image
Pinterest
Logo Image
Coinbase
Wise Logo Image
Wise
Headspace Logo Image
Headspace
Airbnb Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion