Back to palettes

Palette

Midnight Glow

Evokes the quiet beauty of a night sky illuminated by distant city lights or subtle aurora.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Glow reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Midnight Glow.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#191970#483D8B#004F4F#8A2BE2#36454F

Palette guide

How to use Midnight Glow

Overview

The Midnight Glow palette evokes the quiet beauty of a night sky, illuminated by subtle auroras or distant city lights. Featuring deep, elegant tones such as #191970 (a rich navy), #483D8B (a muted purple), and #36454F (a sophisticated charcoal), this palette also includes vibrant accents like #8A2BE2 and a unique #004F4F (dark teal). It offers designers and developers a sophisticated foundation for creating interfaces and visuals that are both serene and captivating. The harmonious blend of blues, purples, and deep grey allows for a nuanced expression of elegance and mystery, perfect for projects requiring a refined, yet subtly dynamic, aesthetic.

Best used for

  • Sophisticated digital interfaces and dark mode themes
  • Elegant branding and corporate presentations
  • Artistic renders and abstract design projects
  • Space or celestial-themed content
  • Luxury product websites or apps
  • Event invitations with a mysterious touch

Suggested color roles

primary

Use #191970 as the dominant background or base color to establish a deep, elegant foundation.

secondary

Apply #483D8B or #36454F for supporting elements, sub-sections, or subtle visual separation.

accent

Employ #8A2BE2 for striking calls to action, interactive elements, or to add a vibrant, elegant pop of color.

background

The deep #191970 or #36454F provide excellent, immersive dark backgrounds for a sophisticated look.

text

For optimal readability, use a light color like white (e.g., #FFFFFF) or a very light grey on the darker backgrounds, or #8A2BE2 for specific headings.

Accessibility notes

  • Ensure sufficient contrast between text in #483D8B or #004F4F and backgrounds like #191970.
  • Prioritize using #8A2BE2 for critical interactive elements, ensuring it meets WCAG contrast standards on its background.
  • Avoid using #36454F for small text on #191970; choose a lighter color for better legibility.
  • When layering, check that the contrast between adjacent dark colors, such as #191970 and #004F4F, is distinct enough for visual separation.

Recommended combinations

Night's Embrace

Ideal for a primary dark theme with a rich supporting purple and a vibrant, attention-grabbing accent.

#191970 · #483D8B · #8A2BE2

Subtle Depth

Creates a nuanced, layered dark background effect, excellent for subtle differentiation in UI panels.

#191970 · #36454F · #004F4F

Glow Accent

Perfect for highlighting content within a dark grey context, with the purple accent providing a focal point.

#36454F · #483D8B · #8A2BE2

CSS variables

:root {
  --midnight-glow-1: #191970;
  --midnight-glow-2: #483D8B;
  --midnight-glow-3: #004F4F;
  --midnight-glow-4: #8A2BE2;
  --midnight-glow-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-glow": {
        1: "#191970",
        2: "#483D8B",
        3: "#004F4F",
        4: "#8A2BE2",
        5: "#36454F",
      }
    }
  }
}

Related searches

midnight blue purple paletteelegant dark colorssubtle night glownavy purple teal schemesophisticated dark UI

Palette colors

Hex values

Color 1#191970
·
Color 2#483D8B
·
Color 3#004F4F
·
Color 4#8A2BE2
·
Color 5#36454F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.6:1Fail
2.5:1Fail
1.5:1Fail
2
1.6:1Fail
1:1Fail
1.5:1Fail
1.1:1Fail
3
1.6:1Fail
1:1Fail
1.6:1Fail
1.1:1Fail
4
2.5:1Fail
1.5:1Fail
1.6:1Fail
1.7:1Fail
5
1.5:1Fail
1.1:1Fail
1.1:1Fail
1.7:1Fail

Similar palettes

More like Midnight Glow

View all dark
Midnight Orchid Veil
Amethyst Veil Mystique
Art Deco Midnight
Baroque Jewel Box
Baroque Tapestry Weave
Baroque Velvet Plum