Palette

Moon Garden Enchant

A mystical blend of cool purples and greys, like a serene garden illuminated by the enchanting glow of a full moon.

CoolElegant5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moon Garden Enchant 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 Moon Garden Enchant.

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

Data visualization

#E0E0E0#C2B7E1#8A6FC9#4B3A8B#2C1A5C

Palette guide

How to use Moon Garden Enchant

Overview

The Moon Garden Enchant palette is a mystical blend of cool purples and greys, like a serene garden illuminated by the enchanting glow of a full moon. Featuring the deep #2C1A5C and the rich #4B3A8B, alongside ethereal lavenders #8A6FC9 and #C2B7E1, and culminating in the luminous #E0E0E0, this palette exudes elegance and magic. Designers and developers will find it perfect for creating sophisticated, dreamlike, and luxurious visual experiences that capture a sense of wonder and calm. It's ideal for projects that require a touch of fantasy and refined beauty.

Best used for

Luxury beauty and cosmetic brands
Spiritual wellness and meditation apps
High-end event branding and invitations
Fantasy-themed digital art and games
Sophisticated web design and UI
Ethereal wedding stationery

Suggested color roles

primary

Utilize #2C1A5C as a deep, mystical primary color for foundational elements, headers, or strong brand presence, embodying elegance and depth.

secondary

Employ #4B3A8B for supporting content, sub-sections, or as a rich background for textural elements, adding a layer of sophisticated purple.

accent

Apply #C2B7E1 as a soft, luminous accent for interactive elements, highlights, or illustrations, providing an ethereal glow.

background

Use #E0E0E0 as a clean, light grey background, offering an airy canvas that enhances readability and allows purples to truly enchant.

text

For optimal readability on lighter backgrounds, use #2C1A5C or a deep charcoal. On darker purples, ensure white or a very light off-white text is used.

Accessibility notes

Ensure sufficient contrast when using dark text (e.g., #2C1A5C) on lighter backgrounds like #E0E0E0 and #C2B7E1.
For text on #2C1A5C or #4B3A8B, always use light-colored text (e.g., white) to meet WCAG contrast guidelines.
Avoid placing #8A6FC9 text on #C2B7E1 without careful contrast checking, as they are similar in lightness.
Use a contrast checker for all text sizes, especially for subtle color pairings like #E0E0E0 and #C2B7E1.

Recommended combinations

Ethereal Glow

Creates a soft, luminous effect, perfect for backgrounds or sections that need to feel light, airy, and subtly magical.

#E0E0E0 · #C2B7E1 · #8A6FC9

Midnight Bloom

Highlights the depth and mystery of the night with a bright, ethereal accent, ideal for calls-to-action or focal points.

#2C1A5C · #4B3A8B · #C2B7E1

Enchanted Depths

Offers a balanced progression from mid-purple to deep purple with a light anchor, suitable for layered designs and visual hierarchy.

#8A6FC9 · #2C1A5C · #E0E0E0

CSS variables

:root {
  --moon-garden-enchant-1: #E0E0E0;
  --moon-garden-enchant-2: #C2B7E1;
  --moon-garden-enchant-3: #8A6FC9;
  --moon-garden-enchant-4: #4B3A8B;
  --moon-garden-enchant-5: #2C1A5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moon-garden-enchant": {
        1: "#E0E0E0",
        2: "#C2B7E1",
        3: "#8A6FC9",
        4: "#4B3A8B",
        5: "#2C1A5C",
      }
    }
  }
}

Hex values

Color 1#E0E0E0

Color 2#C2B7E1

Color 3#8A6FC9

Color 4#4B3A8B

Color 5#2C1A5C

Accessibility

Contrast checker

1.4:1Fail

3.1:1AA18

7:1AA

11.3:1AAA

1.4:1Fail

2.1:1Fail

4.9:1AA

7.9:1AAA

3.1:1AA18

2.1:1Fail

2.3:1Fail

3.7:1AA18

7:1AA

4.9:1AA

2.3:1Fail

1.6:1Fail

11.3:1AAA

7.9:1AAA

3.7:1AA18

1.6:1Fail

Similar palettes

More like Moon Garden Enchant