Palette

Twilight Garden Veil

Soft purples and deep indigos capture the serene mystery of a garden at dusk.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A4D7B#8C78B7#D0C9DF#3C345C#A294C6

Palette guide

How to use Twilight Garden Veil

Overview

The "Twilight Garden Veil" palette offers a captivating range of soft purples and deep indigos, perfect for designers and developers aiming to evoke a serene and mystical ambiance. From the profound #3C345C to the gentle #D0C9DF, this collection beautifully captures the mystery of a garden at dusk. Shades like #5A4D7B and #8C78B7 provide versatile mid-tones, ideal for crafting layered UIs and harmonious visual narratives. This palette is excellent for projects requiring elegance, a touch of enchantment, and a calm, contemplative mood, suitable for spiritual, artistic, or luxury digital experiences.

Best used for

Meditation and mindfulness apps
Mystical or spiritual websites
High-end stationery design
Ethereal brand identities
Art gallery online exhibitions
Gentle lifestyle or wellness blogs

Suggested color roles

primary

#3C345C - A deep, grounding indigo-purple, excellent for main backgrounds, headers, or dominant brand elements, conveying depth.

secondary

#5A4D7B - A slightly lighter purple, ideal for secondary content blocks, card backgrounds, or subtle interactive components.

accent

#D0C9DF - A very light lavender, perfect for subtle highlights, active states, or light text on darker backgrounds to ensure clarity.

background

#3C345C - Establishes a rich, deep background, providing a strong foundation for a mystical and immersive experience.

text

#D0C9DF - The lightest shade, providing excellent contrast for primary body text against dark backgrounds like #3C345C or #5A4D7B.

Accessibility notes

Ensure #D0C9DF text has sufficient contrast against all darker shades for WCAG AA compliance.
Avoid pairing #A294C6 with #8C78B7 for text/background without careful contrast checking.
For critical information or headlines, consider using a near-white (e.g., #F8F8F8) on the darkest backgrounds.
Ensure interactive elements have clear visual states and sufficient contrast from surrounding elements.

Recommended combinations

Mystic Depths

Deep backgrounds with layered content and crisp, readable light text.

#3C345C · #5A4D7B · #D0C9DF

Serene Layering

Card backgrounds, panel headers, and grounding text or borders.

#5A4D7B · #A294C6 · #3C345C

Soft Interaction

UI elements like buttons and input fields with clear states and supporting information.

#8C78B7 · #D0C9DF · #5A4D7B

CSS variables

:root {
  --twilight-garden-veil-1: #5A4D7B;
  --twilight-garden-veil-2: #8C78B7;
  --twilight-garden-veil-3: #D0C9DF;
  --twilight-garden-veil-4: #3C345C;
  --twilight-garden-veil-5: #A294C6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-garden-veil": {
        1: "#5A4D7B",
        2: "#8C78B7",
        3: "#D0C9DF",
        4: "#3C345C",
        5: "#A294C6",
      }
    }
  }
}

Hex values

Color 1#5A4D7B

Color 2#8C78B7

Color 3#D0C9DF

Color 4#3C345C

Color 5#A294C6

Accessibility

Contrast checker

2:1Fail

4.7:1AA

1.5:1Fail

2.7:1Fail

2:1Fail

2.4:1Fail

3:1Fail

1.4:1Fail

4.7:1AA

2.4:1Fail

7.1:1AAA

1.7:1Fail

1.5:1Fail

3:1Fail

7.1:1AAA

4.1:1AA18

2.7:1Fail

1.4:1Fail

1.7:1Fail

4.1:1AA18

Similar palettes

More like Twilight Garden Veil

View all cool

Twilight Garden Path

Twilight Garden Serene

Twilight Bloom Garden

Twilight Horizon Bloom

Desert Twilight Sky

Dusky Horizon Glow