Palette

Moonbeam Twilight

Captures the elusive glow of moonlight mingling with the deep, transitioning hues of dusk.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonbeam Twilight 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 Moonbeam Twilight.

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

Data visualization

#E6E6FA#DDA0DD#8A2BE2#4B0082#191970

Palette guide

How to use Moonbeam Twilight

Overview

The Moonbeam Twilight palette evokes the mystical transition from dusk to night, blending deep purples and blues with soft, ethereal accents. It features a rich spectrum from the dark, contemplative #191970 (Midnight Blue) and the regal #4B0082 (Indigo) to the vibrant #8A2BE2 (Blue Violet) and the delicate #DDA0DD (Plum). The lightest shade, #E6E6FA (Lavender Blush), adds a touch of moonlit glow. This elegant color scheme is ideal for projects requiring a sense of sophistication, mystery, and depth, providing a harmonious blend for captivating digital and print designs. Designers can leverage its cool undertones to create serene yet impactful visual experiences, perfect for branding that aims for a luxurious or enigmatic feel.

Best used for

Luxury brand identity
Evening event invitations
Mysterious website themes
Elegant fashion editorial layouts
Sophisticated UI/UX designs
Fantasy novel covers

Suggested color roles

primary

Use #191970 as a foundational deep blue for major elements like headers, footers, or dark mode backgrounds, establishing a profound base.

secondary

Employ #4B0082 (Indigo) for subheadings, navigation, or significant graphical elements, adding a layer of rich depth.

accent

Apply #8A2BE2 (Blue Violet) for calls to action, interactive components, or key highlights to draw attention with its vibrant energy.

background

The soft #E6E6FA (Lavender Blush) serves as an ideal light background, providing a subtle, ethereal glow that enhances readability.

text

For primary body text, #191970 offers excellent contrast on lighter backgrounds. Consider a near-white text for darker backgrounds.

Accessibility notes

Ensure sufficient contrast between #191970 text and #E6E6FA background for optimal readability.
Avoid using #DDA0DD for small text on #E6E6FA as contrast might be insufficient; reserve it for larger headings or graphical elements.
Use #8A2BE2 as an accent judiciously, especially for interactive elements that need clear focus.
When pairing dark colors like #191970 or #4B0082, ensure text is a light color like #E6E6FA or white for compliance.

Recommended combinations

Mystic Glow

Ideal for a dark, sophisticated theme with a bright, ethereal highlight.

#191970 · #4B0082 · #E6E6FA

Violet Haze

Creates a dreamy, elegant look, suitable for artistic or feminine designs.

#DDA0DD · #8A2BE2 · #191970

Twilight Depth

A balanced trio for depth and ethereal illumination in UI elements or branding.

#4B0082 · #8A2BE2 · #E6E6FA

CSS variables

:root {
  --moonbeam-twilight-1: #E6E6FA;
  --moonbeam-twilight-2: #DDA0DD;
  --moonbeam-twilight-3: #8A2BE2;
  --moonbeam-twilight-4: #4B0082;
  --moonbeam-twilight-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonbeam-twilight": {
        1: "#E6E6FA",
        2: "#DDA0DD",
        3: "#8A2BE2",
        4: "#4B0082",
        5: "#191970",
      }
    }
  }
}

Hex values

Color 1#E6E6FA

Color 2#DDA0DD

Color 3#8A2BE2

Color 4#4B0082

Color 5#191970

Accessibility

Contrast checker

1.7:1Fail

4.8:1AA

10.5:1AAA

12.1:1AAA

1.7:1Fail

2.9:1Fail

6.3:1AA

7.2:1AAA

4.8:1AA

2.9:1Fail

2.2:1Fail

2.5:1Fail

10.5:1AAA

6.3:1AA

2.2:1Fail

1.1:1Fail

12.1:1AAA

7.2:1AAA

2.5:1Fail

1.1:1Fail

Similar palettes

More like Moonbeam Twilight

View all dark

Amethyst Veil Mystique

Gala Night Velvet

Gothic Night Bloom

Midnight Bloom Garden

Midnight Bloom Shadow

Midnight Geode Crystal