Palette

Twilight Bloom Garden

Deep, mystical purples and lavenders, like flowers opening under the enchanting twilight sky.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A2B42#5B3E69#8D5CA0#B37BC4#E1BBEC

Palette guide

How to use Twilight Bloom Garden

Overview

The Twilight Bloom Garden palette unveils a rich tapestry of deep, mystical purples and delicate lavenders, reminiscent of flowers unfurling under an enchanting twilight sky. With colors ranging from the luxurious #3A2B42 (Deep Plum) to the vibrant #8D5CA0 (Rich Lavender) and the ethereal #E1BBEC (Pale Lilac), this scheme exudes elegance and mystery. Designers and developers can harness the supportive #5B3E69 (Violet) and the soft #B37BC4 (Soft Lavender) to craft sophisticated branding, high-end digital experiences, or artistic projects that require a touch of refined magic. This palette is genuinely useful for conveying luxury, spirituality, or creative flair.

Best used for

Elegant fashion or beauty brands
Luxury event design and invitations
Spiritual or wellness content creation
Artistic portfolio websites
High-end cosmetic product packaging
Mystical or fantasy-themed digital art

Suggested color roles

primary

Utilize #3A2B42 (Deep Plum) as a luxurious, foundational color for main sections, headers, or dark mode interfaces.

secondary

Apply #5B3E69 (Rich Violet) for supportive elements, subheadings, or background textures that add depth.

accent

Introduce #B37BC4 (Soft Lavender) as a delicate highlight for calls to action, icons, or floral motifs.

background

Employ #E1BBEC (Pale Lilac) for light, ethereal backgrounds that create an expansive and inviting canvas.

text

For dark backgrounds, use #E1BBEC or white. For lighter backgrounds, #3A2B42 or a dark gray provides excellent contrast.

Accessibility notes

The combination of #B37BC4 on #E1BBEC will likely have insufficient contrast for readable text.
Ensure dark text (e.g., #3A2B42) is used on light backgrounds (e.g., #E1BBEC) to meet contrast standards.
For text on mid-tones like #8D5CA0 or #B37BC4, consider a very dark or very light text color for legibility.
Interactive elements should always have clear contrast to indicate their function and improve usability.

Recommended combinations

Deep Floral

Creates a strong, vibrant floral impression with a deep base, rich bloom, and light background.

#3A2B42 · #8D5CA0 · #E1BBEC

Mystical Gradient

Offers a smooth, enchanting purple transition, ideal for atmospheric overlays or subtle visual depth.

#5B3E69 · #8D5CA0 · #B37BC4

Elegant Contrast

Combines a luxurious deep base with a soft accent and an airy light tone for sophisticated design.

#3A2B42 · #B37BC4 · #E1BBEC

CSS variables

:root {
  --twilight-bloom-garden-1: #3A2B42;
  --twilight-bloom-garden-2: #5B3E69;
  --twilight-bloom-garden-3: #8D5CA0;
  --twilight-bloom-garden-4: #B37BC4;
  --twilight-bloom-garden-5: #E1BBEC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-bloom-garden": {
        1: "#3A2B42",
        2: "#5B3E69",
        3: "#8D5CA0",
        4: "#B37BC4",
        5: "#E1BBEC",
      }
    }
  }
}

Hex values

Color 1#3A2B42

Color 2#5B3E69

Color 3#8D5CA0

Color 4#B37BC4

Color 5#E1BBEC

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

4.1:1AA18

7.8:1AAA

1.5:1Fail

1.8:1Fail

2.8:1Fail

5.4:1AA

2.6:1Fail

1.8:1Fail

1.6:1Fail

3:1AA18

4.1:1AA18

2.8:1Fail

1.6:1Fail

1.9:1Fail

7.8:1AAA

5.4:1AA

3:1AA18

1.9:1Fail

Similar palettes

More like Twilight Bloom Garden

View all dark

Midnight Bloom Garden

Midnight Cherry Blossom

Twilight Orchid Bloom

Celestial Night Garden

Gala Night Velvet

Gothic Rose Window