Back to palettes

Palette

Starry Midnight Serene

A cosmic blend of deep blues and purples, punctuated by a shimmering touch of gold, like stars in the midnight sky.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starry Midnight Serene 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 Starry Midnight Serene.

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

Data visualization

#0F0F3F#2A2A70#4C4C8A#7F7FBB#D4AF37

Palette guide

How to use Starry Midnight Serene

Overview

The "Starry Midnight Serene" palette offers a luxurious journey into the cosmic night, blending deep blues and purples with a captivating touch of gold. Starting with the profound #0F0F3F and transitioning through rich indigos like #2A2A70 and #4C4C8A, the palette culminates in the ethereal #7F7FBB, reminiscent of distant nebulae. The unexpected brilliance of #D4AF37, a shimmering gold, acts as a celestial accent. This collection is perfect for designers seeking to evoke elegance, mystery, and a touch of opulence. Developers can utilize these hex codes for high-end branding, sophisticated dark mode interfaces, or digital art that requires a serene yet striking visual presence.

Best used for

  • Luxury product websites or branding
  • High-end event invitations
  • Mystical or fantasy-themed digital art
  • Elegant app interfaces with a dark theme
  • Jewelry or fashion e-commerce
  • Sophisticated editorial layouts

Suggested color roles

primary

#0F0F3F - A deep, dark indigo-blue. Ideal for main backgrounds, providing a sense of endless night and luxury.

secondary

#2A2A70 - A rich, deep blue with a purple undertone. Excellent for secondary panels, content cards, or large headers, adding depth and warmth.

accent

#D4AF37 - A striking, shimmering gold. Use sparingly for call-to-action buttons, key icons, or crucial highlights to draw immediate attention and convey luxury.

background

#0F0F3F - Serves as a profound, elegant base for any design, allowing lighter elements to truly pop.

text

#7F7FBB - A medium lavender-blue. Suitable for secondary text or subheadings on darker backgrounds. For primary body text, use a bright white or very light gray like #F5F5F5 for optimal readability against #0F0F3F or #2A2A70.

Accessibility notes

  • #D4AF37 provides excellent contrast against all dark blues/purples in the palette; use it for critical interactive elements.
  • #7F7FBB may have insufficient contrast for small text on #0F0F3F or #2A2A70; verify WCAG compliance.
  • For body text, consider using a very light gray or white (#FFFFFF) on the darker backgrounds for maximum readability.
  • Ensure sufficient contrast for button states, especially when using the darker blues together.

Recommended combinations

Midnight Glow

Creates a serene, layered background for cosmic-themed designs or sophisticated interfaces.

#0F0F3F · #2A2A70 · #7F7FBB

Golden Nebula

Uses the gold as a vibrant accent against deep blues, perfect for luxury branding or interactive elements.

#2A2A70 · #4C4C8A · #D4AF37

Deep Elegance

Combines the darkest base with a mid-tone purple and a gold highlight for a regal and elegant feel.

#0F0F3F · #4C4C8A · #D4AF37

CSS variables

:root {
  --starry-midnight-serene-1: #0F0F3F;
  --starry-midnight-serene-2: #2A2A70;
  --starry-midnight-serene-3: #4C4C8A;
  --starry-midnight-serene-4: #7F7FBB;
  --starry-midnight-serene-5: #D4AF37;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-midnight-serene": {
        1: "#0F0F3F",
        2: "#2A2A70",
        3: "#4C4C8A",
        4: "#7F7FBB",
        5: "#D4AF37",
      }
    }
  }
}

Related searches

gold and deep blue palettecosmic purple gold colorsluxurious dark themeelegant midnight huesserene blue purple gold

Palette colors

Hex values

Color 1#0F0F3F
·
Color 2#2A2A70
·
Color 3#4C4C8A
·
Color 4#7F7FBB
·
Color 5#D4AF37
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.3:1Fail
4.9:1AA
8.6:1AAA
2
1.4:1Fail
1.6:1Fail
3.4:1AA18
6:1AA
3
2.3:1Fail
1.6:1Fail
2.1:1Fail
3.7:1AA18
4
4.9:1AA
3.4:1AA18
2.1:1Fail
1.8:1Fail
5
8.6:1AAA
6:1AA
3.7:1AA18
1.8:1Fail

Similar palettes

More like Starry Midnight Serene

View all cool