Back to palettes

Palette

Twilight Aura

Deep blues and mystical purples reflecting the magical transition from day to enchanting night.

CoolElegant5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#191970#4169E1#6A5ACD#8A2BE2#ADD8E6

Palette guide

How to use Twilight Aura

Overview

The Twilight Aura palette captures the enchanting transition from day to night with its deep blues and mystical purples. Featuring prominent hues like the foundational #191970 (Midnight Blue), the vibrant #4169E1 (Royal Blue), and the ethereal #ADD8E6 (Light Blue), this scheme is perfect for conveying elegance and mystery. Designers and developers can leverage the rich #6A5ACD (Medium Slate Blue) and the captivating #8A2BE2 (Blue Violet) to create sophisticated digital interfaces, luxury branding, or artistic projects that evoke a sense of magic and serene wonder. Its cool, jewel-toned depth offers a versatile foundation for both UI elements and visual storytelling.

Best used for

  • Luxury brand identity
  • Elegant event invitations
  • Fantasy-themed game interfaces
  • UI for meditation or wellness apps
  • Artistic website designs
  • Book covers with a mystical theme

Suggested color roles

primary

Use #191970 (Midnight Blue) as a deep, authoritative foundation for headers, primary buttons, or large background sections.

secondary

Employ #4169E1 (Royal Blue) for supportive elements, accent panels, or secondary calls to action, providing a vibrant contrast.

accent

Highlight key information or interactive states with #8A2BE2 (Blue Violet) to add a mystical, energetic pop.

background

Apply #ADD8E6 (Light Blue) for clean, ethereal backgrounds that allow darker colors to stand out, or for subtle gradients.

text

For dark backgrounds, use #ADD8E6 or white. For lighter backgrounds, #191970 or a dark charcoal provides excellent readability.

Accessibility notes

  • Ensure sufficient contrast between #191970 text and #ADD8E6 background for optimal readability.
  • The vibrant #8A2BE2 may require a very dark (e.g., black) or very light (e.g., white) text for legibility.
  • Avoid using #4169E1 as a primary text color on light backgrounds without thorough contrast checking.
  • Large text or UI elements should always prioritize high-contrast combinations for accessibility.

Recommended combinations

Deep Elegance

Creates a strong, elegant base with a vibrant accent and airy lightness, ideal for hero sections.

#191970 · #4169E1 · #ADD8E6

Mystical Glow

Offers a softer, gradient-like transition, perfect for subtle backgrounds or atmospheric illustrations.

#6A5ACD · #8A2BE2 · #ADD8E6

Royal Contrast

Combines a deep base with a striking accent and a light background for clear hierarchy and visual appeal.

#191970 · #8A2BE2 · #ADD8E6

CSS variables

:root {
  --twilight-aura-1: #191970;
  --twilight-aura-2: #4169E1;
  --twilight-aura-3: #6A5ACD;
  --twilight-aura-4: #8A2BE2;
  --twilight-aura-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-aura": {
        1: "#191970",
        2: "#4169E1",
        3: "#6A5ACD",
        4: "#8A2BE2",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

mystical blue purple paletteelegant twilight colorsdeep blue violet color schemefantasy ui colorsethereal branding palette

Palette colors

Hex values

Color 1#191970
·
Color 2#4169E1
·
Color 3#6A5ACD
·
Color 4#8A2BE2
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.1:1AA18
2.8:1Fail
2.5:1Fail
9.7:1AAA
2
3.1:1AA18
1.1:1Fail
1.2:1Fail
3.2:1AA18
3
2.8:1Fail
1.1:1Fail
1.1:1Fail
3.5:1AA18
4
2.5:1Fail
1.2:1Fail
1.1:1Fail
3.9:1AA18
5
9.7:1AAA
3.2:1AA18
3.5:1AA18
3.9:1AA18

Similar palettes

More like Twilight Aura

View all Cool
Nebula Cloud
Cosmic Dust Trail
Cosmic Orchid
Mystic Moor
Amethyst Cavern Glow
Celestial Rose Haze