Palette

Moonlit Cherry Blossom

Deep purples and gentle lavenders capture the delicate beauty of cherry blossoms under a moonlit sky.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Cherry Blossom 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 Moonlit Cherry Blossom.

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

Data visualization

#2C1F3A#4A3E5E#7A6894#B8A2C7#EAD9EF

Palette guide

How to use Moonlit Cherry Blossom

Overview

The Moonlit Cherry Blossom palette offers a sophisticated blend of deep purples and gentle lavenders, capturing the serene beauty of cherry blossoms under a night sky. With its rich base of #2C1F3A and #4A3E5E, complemented by the delicate mid-tones of #7A6894 and #B8A2C7, and culminating in the ethereal lightness of #EAD9EF, this palette is ideal for projects seeking an elegant and mystical touch. Designers and developers can leverage its harmonious progression from dark to light to create visually compelling and emotionally resonant experiences, suggesting luxury and refined aesthetics.

Best used for

Luxury brand identity and packaging
High-end event invitations and decor
Sophisticated web and mobile app interfaces
Beauty and cosmetic product design
Editorial layouts for fashion or art magazines
Mystical or fantasy-themed digital art

Suggested color roles

primary

Use #2C1F3A as the dominant dark shade for backgrounds, footers, or main elements where depth and mystery are desired.

secondary

Employ #4A3E5E for supporting sections, headers, or large blocks of color, providing a cohesive dark foundation.

accent

Highlight key elements, call-to-action buttons, or decorative details with #B8A2C7 to add a delicate, moonlit glow.

background

Utilize #EAD9EF as a clean, airy canvas for main content areas, providing excellent contrast and a sense of lightness.

text

For dark backgrounds, use #EAD9EF. For light backgrounds like #EAD9EF, #2C1F3A or a dark charcoal provides optimal readability.

Accessibility notes

Ensure sufficient contrast when pairing #7A6894 or #B8A2C7 with #EAD9EF for body text (WCAG AA minimum).
The darkest shades, #2C1F3A and #4A3E5E, offer excellent contrast with #EAD9EF for all text sizes.
Avoid using #7A6894 on #B8A2C7 for text due to low contrast.
Consider using a slightly darker text color than #B8A2C7 for small text on very light backgrounds if accessibility is critical.

Recommended combinations

Deep Elegance

Ideal for sophisticated headings, clean main content, and subtle highlights.

#2C1F3A · #EAD9EF · #B8A2C7

Muted Bloom

Perfect for secondary sections, bringing a softer, layered purple effect.

#4A3E5E · #7A6894 · #EAD9EF

Night Shimmer

Great for hero sections or features, balancing deep tones with ethereal light.

#2C1F3A · #7A6894 · #EAD9EF

CSS variables

:root {
  --moonlit-cherry-blossom-1: #2C1F3A;
  --moonlit-cherry-blossom-2: #4A3E5E;
  --moonlit-cherry-blossom-3: #7A6894;
  --moonlit-cherry-blossom-4: #B8A2C7;
  --moonlit-cherry-blossom-5: #EAD9EF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-cherry-blossom": {
        1: "#2C1F3A",
        2: "#4A3E5E",
        3: "#7A6894",
        4: "#B8A2C7",
        5: "#EAD9EF",
      }
    }
  }
}

Hex values

Color 1#2C1F3A

Color 2#4A3E5E

Color 3#7A6894

Color 4#B8A2C7

Color 5#EAD9EF

Accessibility

Contrast checker

1.6:1Fail

3.1:1AA18

6.6:1AA

11.5:1AAA

1.6:1Fail

2:1Fail

4.2:1AA18

7.3:1AAA

3.1:1AA18

2:1Fail

2.1:1Fail

3.7:1AA18

6.6:1AA

4.2:1AA18

2.1:1Fail

1.7:1Fail

11.5:1AAA

7.3:1AAA

3.7:1AA18

1.7:1Fail

Similar palettes

More like Moonlit Cherry Blossom

View all dark

Gala Night Velvet

Midnight Bloom Garden

Midnight Cherry Blossom

Midnight Geode Crystal

Midnight Sakura Bloom

Midnight Velour Stage