Palette

Twilight Garden Serenade

Deep, enigmatic purples transitioning to soft lavenders, capturing the mystic beauty of a garden at twilight.

DarkElegant5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F172C#5A355A#8F5B8A#C28FC0#E1C4E0

Palette guide

How to use Twilight Garden Serenade

Overview

The "Twilight Garden Serenade" palette offers an elegant spectrum of deep, enigmatic purples to soft, ethereal lavenders, ideal for designers and developers seeking a mystic and refined aesthetic. Ranging from the profound #2F172C to the delicate #E1C4E0, this collection captures the serene beauty of a garden at twilight. Mid-tones like #5A355A and #8F5B8A provide excellent versatility for creating layered UIs and harmonious branding. This palette is perfect for projects that demand sophistication, a hint of mystery, and a gentle, floral undertone, suitable for luxury, beauty, or artistic contexts.

Best used for

High-end beauty product branding
Elegant wedding stationery or websites
Luxury event design
Artistic portfolio presentations
Feminine-focused lifestyle blogs
Sophisticated mobile app interfaces

Suggested color roles

primary

#2F172C - A deep, rich purple that serves as a luxurious background or dominant brand color, providing an elegant foundation.

secondary

#5A355A - Ideal for secondary content areas, card backgrounds, or navigation, offering a soft transition from the primary.

accent

#C28FC0 - A delicate lavender, perfect for call-to-action buttons, interactive elements, or subtle graphic highlights.

background

#2F172C - Establishes a dark, mysterious canvas for entire pages or significant sections, enhancing depth.

text

#E1C4E0 - An almost white lavender, providing excellent contrast and readability for primary text on darker backgrounds.

Accessibility notes

Ensure #E1C4E0 text has strong contrast against #2F172C and #5A355A for WCAG AA compliance.
Avoid using #8F5B8A for small text on #5A355A due to potential low contrast; check thoroughly.
Consider a pure white (#FFFFFF) for critical headings on the darkest shades if #E1C4E0 feels too soft.
Verify interactive element states (hover, active) maintain sufficient contrast and visibility.

Recommended combinations

Elegant Base

Dark, sophisticated background with layered content and clear, light text.

#2F172C · #5A355A · #E1C4E0

Floral Accent

Mid-tone panels with a vibrant accent and deep, grounding text or borders.

#8F5B8A · #C28FC0 · #2F172C

Soft UI

Card elements, forms, and interactive components for a gentle, approachable UI.

#5A355A · #E1C4E0 · #C28FC0

CSS variables

:root {
  --twilight-garden-serenade-1: #2F172C;
  --twilight-garden-serenade-2: #5A355A;
  --twilight-garden-serenade-3: #8F5B8A;
  --twilight-garden-serenade-4: #C28FC0;
  --twilight-garden-serenade-5: #E1C4E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-garden-serenade": {
        1: "#2F172C",
        2: "#5A355A",
        3: "#8F5B8A",
        4: "#C28FC0",
        5: "#E1C4E0",
      }
    }
  }
}

Hex values

Color 1#2F172C

Color 2#5A355A

Color 3#8F5B8A

Color 4#C28FC0

Color 5#E1C4E0

Accessibility

Contrast checker

1.6:1Fail

3.2:1AA18

6.2:1AA

10.3:1AAA

1.6:1Fail

1.9:1Fail

3.8:1AA18

6.3:1AA

3.2:1AA18

1.9:1Fail

2:1Fail

3.3:1AA18

6.2:1AA

3.8:1AA18

2:1Fail

1.7:1Fail

10.3:1AAA

6.3:1AA

3.3:1AA18

1.7:1Fail

Similar palettes

More like Twilight Garden Serenade

View all Dark

Midnight Orchid Bloom

Midnight Velvet Aura

Amethyst Star Cluster

Aurora Borealis Dream

Baroque Night Grandeur

Celestial Dust Cloud