Palette

Lunar Eclipse Night

Deep, atmospheric purples and blues, mirroring the captivating drama of a lunar eclipse unfolding at night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lunar Eclipse Night 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 Lunar Eclipse Night.

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

Data visualization

#1A1A2E#3A3A5E#5B5B90#8A8ACE#C0C0FF

Palette guide

How to use Lunar Eclipse Night

Overview

The 'Lunar Eclipse Night' palette offers deep, atmospheric purples and blues, mirroring the captivating drama of a lunar eclipse unfolding at night. Ranging from the profound #1A1A2E to the ethereal #C0C0FF, with vibrant mid-tones like #5B5B90 and #8A8ACE, this palette is perfect for creating mystical, dramatic, and creative digital experiences. Designers and developers can use its rich, cool hues to evoke a sense of magic, depth, and sophistication, ideal for projects that aim to be visually striking and immersive, captivating users with its cosmic allure.

Best used for

Creative portfolios and artistic websites
Fantasy game UI and cinematic themes
Spiritual wellness apps and platforms
Luxury event invitations and branding
Artistic branding and graphic design
Cosmic-themed websites and educational content

Suggested color roles

primary

Utilize #1A1A2E as a deep, mystical primary color for main backgrounds in dark mode or commanding headings.

secondary

Apply #3A3A5E for rich supporting purple tones, secondary panels, or content blocks in a dark theme.

accent

Use #5B5B90 as a vibrant mid-tone accent for interactive elements, highlights, or engaging graphical details.

background

Choose #1A1A2E for a dark, immersive background or #C0C0FF for a light, ethereal base in a dual-theme design.

text

Employ #C0C0FF for text on dark backgrounds and #1A1A2E for text on light backgrounds to ensure optimal contrast.

Accessibility notes

#C0C0FF provides excellent contrast on #1A1A2E, ensuring high readability for dark mode text.
Ensure #1A1A2E text on #C0C0FF also meets WCAG contrast guidelines for light mode scenarios.
Be cautious with #8A8ACE text on #5B5B90, as contrast might be low; reserve such pairings for larger titles or decorative elements.
For UI elements, use contrasting pairs like #5B5B90 for interactive elements against #3A3A5E backgrounds.

Recommended combinations

Mystical Depth

Creates a dramatic, high-contrast dark mode foundation, perfect for impactful visuals and clear text.

#1A1A2E · #3A3A5E · #C0C0FF

Ethereal Glow

Suitable for soft, vibrant transitions in UI elements or background gradients, adding a magical touch.

#5B5B90 · #8A8ACE · #3A3A5E

Night Sky

Excellent for displaying light elements on a dark background, highlighting key information or interactive components.

#C0C0FF · #8A8ACE · #1A1A2E

CSS variables

:root {
  --lunar-eclipse-night-1: #1A1A2E;
  --lunar-eclipse-night-2: #3A3A5E;
  --lunar-eclipse-night-3: #5B5B90;
  --lunar-eclipse-night-4: #8A8ACE;
  --lunar-eclipse-night-5: #C0C0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-eclipse-night": {
        1: "#1A1A2E",
        2: "#3A3A5E",
        3: "#5B5B90",
        4: "#8A8ACE",
        5: "#C0C0FF",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#3A3A5E

Color 3#5B5B90

Color 4#8A8ACE

Color 5#C0C0FF

Accessibility

Contrast checker

1.6:1Fail

2.7:1Fail

5.4:1AA

9.9:1AAA

1.6:1Fail

1.7:1Fail

3.4:1AA18

6.3:1AA

2.7:1Fail

1.7:1Fail

2:1Fail

3.7:1AA18

5.4:1AA

3.4:1AA18

2:1Fail

1.9:1Fail

9.9:1AAA

6.3:1AA

3.7:1AA18

1.9:1Fail

Similar palettes

More like Lunar Eclipse Night

Celestial Glimmer Dust

Celestial Shimmer Glow

Cosmic Abyss Echo