Palette

Velvet Bloom Shadows

Luxurious and deep, like the soft, shadowed petals of a rare bloom under moonlight, mysterious and inviting.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Velvet Bloom Shadows 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 Velvet Bloom Shadows.

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

Data visualization

#3A004C#5A1C6D#7B3B8F#C29BB8#E9D2E6

Palette guide

How to use Velvet Bloom Shadows

Overview

The Velvet Bloom Shadows palette is a luxurious and deep collection, reminiscent of soft, shadowed petals under moonlight. It features a range of rich purples, starting from the profound #3A004C and progressing through #5A1C6D, #7B3B8F, to the softer #C29BB8, culminating in the delicate, near-white #E9D2E6. This scheme is perfect for designers aiming to convey elegance, mystery, and a sophisticated femininity. Its moody yet inviting tones are ideal for creating designs that feel both opulent and subtly romantic, with excellent depth and nuanced transitions.

Best used for

High-end beauty and cosmetics branding
Elegant fashion and apparel design
Sophisticated event invitations and decor
Luxury interior design concepts
Art gallery websites and portfolios
Nocturnal-themed digital interfaces

Suggested color roles

primary

Utilize #3A004C as the dominant background or primary branding color to establish a profound, elegant base.

secondary

Employ #5A1C6D and #7B3B8F for secondary content areas, panels, or detailed graphic elements, adding depth.

accent

The soft #C29BB8 can highlight key information or interactive elements, providing a gentle contrast.

background

Deep #3A004C or #5A1C6D creates a luxurious and moody backdrop, allowing lighter elements to shine.

text

For maximum readability on dark backgrounds, use #E9D2E6. For headings, #C29BB8 can offer a softer, elegant touch.

Accessibility notes

Ensure #E9D2E6 text on #3A004C or #5A1C6D backgrounds meets WCAG contrast requirements (at least 4.5:1).
Avoid pairing #C29BB8 text with mid-tone purples like #7B3B8F, as contrast may be insufficient for legibility.
Interactive elements should have clearly discernible states, especially if using a lighter purple on a darker one.
Consider providing a strong contrast option for body text, potentially using a very dark grey if #3A004C is not used.

Recommended combinations

Deep Elegance

Ideal for main content sections, offering a strong, elegant base with clear, readable text.

#3A004C · #7B3B8F · #E9D2E6

Soft Transition

Excellent for subtle gradients, layered UI components, or creating depth in illustrations without harsh lines.

#5A1C6D · #7B3B8F · #C29BB8

Moonlit Accent

Perfect for drawing attention to key details, navigation elements, or delicate graphic motifs.

#3A004C · #C29BB8 · #E9D2E6

CSS variables

:root {
  --velvet-bloom-shadows-1: #3A004C;
  --velvet-bloom-shadows-2: #5A1C6D;
  --velvet-bloom-shadows-3: #7B3B8F;
  --velvet-bloom-shadows-4: #C29BB8;
  --velvet-bloom-shadows-5: #E9D2E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-bloom-shadows": {
        1: "#3A004C",
        2: "#5A1C6D",
        3: "#7B3B8F",
        4: "#C29BB8",
        5: "#E9D2E6",
      }
    }
  }
}

Hex values

Color 1#3A004C

Color 2#5A1C6D

Color 3#7B3B8F

Color 4#C29BB8

Color 5#E9D2E6

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

6.8:1AA

11.5:1AAA

1.4:1Fail

1.6:1Fail

4.8:1AA

8.1:1AAA

2.2:1Fail

1.6:1Fail

3:1AA18

5.2:1AA

6.8:1AA

4.8:1AA

3:1AA18

1.7:1Fail

11.5:1AAA

8.1:1AAA

5.2:1AA

1.7:1Fail

Similar palettes

More like Velvet Bloom Shadows

View all dark

Gothic Cathedral Glow

Japanese Kimono Silk

Regal Brocade Weave

Twilight Orchid Bloom

Velvet Theater Seats

Antique Velvet Drapes