Palette

Aurora Shimmer

A delicate dance of iridescent pastels, reminiscent of the ethereal glow of the northern lights.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aurora Shimmer 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 Aurora Shimmer.

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

Data visualization

#E0FFFF#B0E0E6#ADD8E6#9370DB#DDA0DD

Palette guide

How to use Aurora Shimmer

Overview

The "Aurora Shimmer" palette (ID: aurora-shimmer) is a delicate dance of iridescent pastels, reminiscent of the ethereal glow of the northern lights, creating a calm and dreamy feel. It features a luminous light cyan #E0FFFF, a soft powder blue #B0E0E6, a gentle light blue #ADD8E6, a muted violet #9370DB, and a soft plum #DDA0DD. This pastel palette is ideal for designers looking to infuse tranquility, dreaminess, and a touch of celestial wonder into their projects. The harmonious blend of blues and purples creates a refreshing and modern aesthetic, perfect for web interfaces, branding, or digital art that aims to be both captivating and serene. It offers a truly elegant and ethereal aesthetic.

Best used for

Luxury event invitations or decor
Wellness and mindfulness apps
Feminine product packaging
Wedding or formal event branding
Elegant personal portfolios
Spa and relaxation marketing materials

Suggested color roles

primary

#ADD8E6 - A gentle light blue, ideal for main interactive elements, key calls-to-action, or prominent sections that convey clarity and elegance.

secondary

#B0E0E6 - A soft powder blue, excellent for supporting content, navigation backgrounds, or subheadings, adding depth and sophistication.

accent

#DDA0DD - A soft plum, perfect for highlights, hover states, or small decorative elements that need to pop with an ethereal glow.

background

#E0FFFF - A luminous light cyan, providing an airy and serene canvas that allows the deeper blues and purples to stand out beautifully.

text

#9370DB - A muted violet that offers excellent readability on #E0FFFF or #B0E0E6, or use a crisp black for general body text on lightest backgrounds.

Accessibility notes

Ensure #9370DB or #DDA0DD has sufficient contrast when used for text on #E0FFFF or #B0E0E6 backgrounds.
#ADD8E6 can be used for headings on #9370DB, but always verify contrast for smaller text.
Avoid using #B0E0E6 text directly on #ADD8E6, as the contrast might be insufficient.
For optimal readability, use a dark charcoal or black text on the lightest shades for general body copy.

Recommended combinations

Dreamy Sky

Soft website headers, serene app interfaces, or delicate branding.

#E0FFFF · #B0E0E6 · #ADD8E6

Aurora Pastel

Vibrant hero sections, engaging infographics, or ethereal artistic designs.

#ADD8E6 · #9370DB · #DDA0DD

Mystic Glow

Dynamic gradient backgrounds, celestial-themed graphics, or impactful presentations.

#E0FFFF · #9370DB · #DDA0DD

CSS variables

:root {
  --aurora-shimmer-1: #E0FFFF;
  --aurora-shimmer-2: #B0E0E6;
  --aurora-shimmer-3: #ADD8E6;
  --aurora-shimmer-4: #9370DB;
  --aurora-shimmer-5: #DDA0DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aurora-shimmer": {
        1: "#E0FFFF",
        2: "#B0E0E6",
        3: "#ADD8E6",
        4: "#9370DB",
        5: "#DDA0DD",
      }
    }
  }
}

Hex values

Color 1#E0FFFF

Color 2#B0E0E6

Color 3#ADD8E6

Color 4#9370DB

Color 5#DDA0DD

Accessibility

Contrast checker

1.4:1Fail

3.6:1AA18

2:1Fail

1.4:1Fail

1.1:1Fail

2.6:1Fail

1.4:1Fail

1.1:1Fail

2.5:1Fail

1.4:1Fail

3.6:1AA18

2.6:1Fail

2.5:1Fail

1.8:1Fail

2:1Fail

1.4:1Fail

1.8:1Fail

Similar palettes

More like Aurora Shimmer

Aurora Shimmer

See it in context.

Ready when you are.

Built with Aurora Shimmer.

How to use Aurora Shimmer

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dreamy Sky

Aurora Pastel

Mystic Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Aurora Shimmer