Back to palettes

Palette

Lunar Petals

A deep, enchanting palette where moonlit purples and blues blend with hints of shadowy foliage.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lunar Petals 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 Lunar Petals.

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

Data visualization

#483D8B#6A5ACD#8A2BE2#4B0082#2F4F4F

Palette guide

How to use Lunar Petals

Overview

The Lunar Petals palette is a deep, enchanting collection where moonlit purples and blues blend with hints of shadowy foliage. This dark-themed scheme features rich tones like #483D8B (Dark Slate Blue) and the vibrant #8A2BE2 (Blue Violet), grounded by the profound #4B0082 (Indigo) and the earthy #2F4F4F (Dark Slate Grey). It evokes a sense of mystic gardens at night, with ethereal flowers unfurling under a lunar glow. Designers can use this sophisticated palette to create immersive, luxurious, and intriguing visual experiences, perfect for projects that demand depth, elegance, and a touch of the fantastical.

Best used for

  • Mystical branding and sophisticated logos
  • Luxury product packaging and advertisements
  • Fantasy-themed digital art and illustrations
  • Elegant event websites or invitations
  • Dark mode UI designs for premium applications
  • Artistic photography backdrops

Suggested color roles

primary

Use #4B0082 (Indigo) for dominant elements like main headings, hero sections, or primary interactive components, establishing a profound, luxurious base.

secondary

Employ #483D8B (Dark Slate Blue) for supporting content areas, navigation backgrounds, or secondary graphic elements, adding depth and stability.

accent

Apply #8A2BE2 (Blue Violet) sparingly for calls-to-action, highlights, or decorative flourishes, drawing attention with its vibrant, jewel-like quality.

background

Utilize #2F4F4F (Dark Slate Grey) as a foundational background, providing a deep, immersive canvas that enhances the richness of the other colors.

text

For body text, use #6A5ACD (Slate Blue) or pure white to ensure optimal readability against the dark backgrounds, maintaining the palette's ethereal feel.

Accessibility notes

  • Ensure high contrast ratios for text, especially when using #6A5ACD on #2F4F4F or #4B0082, to meet WCAG AA standards.
  • Avoid placing #483D8B text directly on #4B0082 backgrounds as contrast may be insufficient for readability.
  • Use #8A2BE2 as an accent, not for large blocks of text, due to its intensity and potential for eye strain on dark backgrounds.
  • Consider using a slightly lighter grey or white for critical UI elements on very dark backgrounds for enhanced visual clarity.

Recommended combinations

Deep Floral

Ideal for creating profound, layered backgrounds or sections that convey sophisticated depth and mystery.

#4B0082 · #483D8B · #6A5ACD

Mystic Bloom

Perfect for illustrating floral motifs, mystical elements, or gradients that transition from vibrant to shadowy.

#8A2BE2 · #6A5ACD · #2F4F4F

Night Garden

Effective for high-impact headlines or key feature blocks where a vibrant accent needs to stand out on a deep, rich background.

#2F4F4F · #4B0082 · #8A2BE2

CSS variables

:root {
  --lunar-petals-1: #483D8B;
  --lunar-petals-2: #6A5ACD;
  --lunar-petals-3: #8A2BE2;
  --lunar-petals-4: #4B0082;
  --lunar-petals-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-petals": {
        1: "#483D8B",
        2: "#6A5ACD",
        3: "#8A2BE2",
        4: "#4B0082",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

deep purple palettemystic floral colorsdark moon schemeenchanting garden huessophisticated blue violet

Palette colors

Hex values

Color 1#483D8B
·
Color 2#6A5ACD
·
Color 3#8A2BE2
·
Color 4#4B0082
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.5:1Fail
1.4:1Fail
1:1Fail
2
1.7:1Fail
1.1:1Fail
2.4:1Fail
1.7:1Fail
3
1.5:1Fail
1.1:1Fail
2.2:1Fail
1.5:1Fail
4
1.4:1Fail
2.4:1Fail
2.2:1Fail
1.5:1Fail
5
1:1Fail
1.7:1Fail
1.5:1Fail
1.5:1Fail

Similar palettes

More like Lunar Petals

View all dark