Palette

Midnight Starfall Gaze

A deep and mysterious palette inspired by a quiet night spent watching stars fall across the vast cosmos.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Starfall Gaze 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 Starfall Gaze.

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

Data visualization

#1A0D2E#3C2E5D#7F73A6#C7C6DD#EDE3FF

Palette guide

How to use Midnight Starfall Gaze

Overview

The Midnight Starfall Gaze palette offers a profound gradient of deep purples and ethereal lavenders, from almost black to luminous white. Anchored by #1A0D2E, it gracefully transitions through #3C2E5D and #7F73A6, culminating in the soft #C7C6DD and the brilliant #EDE3FF. This collection is ideal for designers and developers seeking a serene, contemplative, and luxurious aesthetic. It beautifully evokes a quiet night watching stars fall across the cosmos, making it perfect for high-end branding, spiritual content, and any project that requires a sense of depth, mystery, and refined elegance with a celestial touch.

Best used for

Luxury packaging and branding
Contemplative or spiritual websites
High-end digital art and photography
Astronomy educational platforms
Elegant event invitations
Sophisticated user interfaces

Suggested color roles

primary

Utilize #1A0D2E as the foundational deep purple, creating an immersive and profound backdrop for your design.

secondary

Employ #3C2E5D for main content areas or section backgrounds, offering a harmonious mid-dark tone.

accent

Reserve #EDE3FF for delicate highlights, calls-to-action, or subtle graphic elements to provide luminous contrast and elegance.

background

The deep #1A0D2E offers an excellent, profound background, while #3C2E5D can define content sections.

text

For primary text on dark backgrounds, #EDE3FF ensures excellent readability. For headings, #C7C6DD provides a soft, elegant choice.

Accessibility notes

The #EDE3FF accent provides excellent contrast on #1A0D2E or #3C2E5D for both text and UI elements.
Ensure #C7C6DD text on #3C2E5D meets WCAG AA contrast standards for body text readability.
Avoid using #7F73A6 directly on #3C2E5D for small text due to potentially insufficient contrast.
If using lighter backgrounds, a dark text color like #1A0D2E or #3C2E5D is recommended.

Recommended combinations

Deep Starfall

Ideal for hero sections or overall website themes, combining deep purple with a mid-tone and a luminous accent.

#1A0D2E · #3C2E5D · #EDE3FF

Lavender Haze

Perfect for creating subtle gradients or layered effects in UI, offering a sophisticated purple progression.

#3C2E5D · #7F73A6 · #C7C6DD

Cosmic Light

Use for prominent feature blocks or callout boxes, where the lighter accents stand out against the deep background.

#1A0D2E · #C7C6DD · #7F73A6

CSS variables

:root {
  --midnight-starfall-gaze-1: #1A0D2E;
  --midnight-starfall-gaze-2: #3C2E5D;
  --midnight-starfall-gaze-3: #7F73A6;
  --midnight-starfall-gaze-4: #C7C6DD;
  --midnight-starfall-gaze-5: #EDE3FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-starfall-gaze": {
        1: "#1A0D2E",
        2: "#3C2E5D",
        3: "#7F73A6",
        4: "#C7C6DD",
        5: "#EDE3FF",
      }
    }
  }
}

Hex values

Color 1#1A0D2E

Color 2#3C2E5D

Color 3#7F73A6

Color 4#C7C6DD

Color 5#EDE3FF

Accessibility

Contrast checker

1.5:1Fail

4.3:1AA18

11:1AAA

14.9:1AAA

1.5:1Fail

2.8:1Fail

7.2:1AAA

9.8:1AAA

4.3:1AA18

2.8:1Fail

2.6:1Fail

3.5:1AA18

11:1AAA

7.2:1AAA

2.6:1Fail

1.4:1Fail

14.9:1AAA

9.8:1AAA

3.5:1AA18

1.4:1Fail

Similar palettes

More like Midnight Starfall Gaze