Palette

Lavender Twilight Field

Soft and deep purples reflecting the enchanting calm of a lavender field bathed in twilight hues.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lavender Twilight Field 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 Lavender Twilight Field.

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

Data visualization

#EDE7F6#D1C4E9#9575CD#673AB7#4A148C

Palette guide

How to use Lavender Twilight Field

Overview

The Lavender Twilight Field palette captures the serene and enchanting calm of an evening landscape, featuring a gradient of captivating purples. From the deep, mysterious #4A148C to the vibrant #673AB7, and softening to the gentle #9575CD, #D1C4E9, and the almost-white #EDE7F6, this collection offers a rich, sophisticated spectrum. It’s ideal for projects aiming for a luxurious, spiritual, or deeply calming aesthetic. Designers and developers will appreciate its versatility for creating depth, elegance, and a truly immersive user experience.

Best used for

Luxury brand websites and apps
Spiritual or wellness content
Beauty and cosmetic packaging
Night mode user interfaces
Elegant event branding
Creative portfolio designs

Suggested color roles

primary

Use #673AB7 as the dominant color for striking calls-to-action or main navigation, providing a vibrant yet stable anchor.

secondary

Employ #9575CD for supporting elements, subheadings, or background sections that require a softer purple hue.

accent

Apply #4A148C for impactful accents, critical notifications, or deep shadows, adding dramatic depth.

background

The lightest shade, #EDE7F6, creates a clean, airy background that allows the deeper purples to truly shine.

text

Utilize #4A148C for primary text on lighter backgrounds to ensure excellent readability and maintain palette cohesion.

Accessibility notes

Ensure high contrast between #4A148C text and light backgrounds like #EDE7F6 or #D1C4E9 for optimal readability.
Avoid using very light text colors (e.g., #EDE7F6) directly on #4A148C for small text, as it might fail WCAG AA contrast ratios.
For interactive elements, always verify the contrast of button text and icons against their background colors, especially with #673AB7.
Consider larger font sizes when using mid-tone colors like #9575CD for body text to enhance legibility.

Recommended combinations

Deep Serenity

Excellent for a sophisticated header with #4A148C text, #673AB7 navigation, and a #EDE7F6 background.

#4A148C · #673AB7 · #EDE7F6

Twilight Glow

Ideal for a visually appealing card design, with #D1C4E9 as background, #9575CD for titles, and #4A148C for icons.

#D1C4E9 · #9575CD · #4A148C

Soft Transition

Perfect for creating subtle, elegant gradients in UI elements or background sections, offering gentle visual flow.

#EDE7F6 · #D1C4E9 · #9575CD

CSS variables

:root {
  --lavender-twilight-field-1: #EDE7F6;
  --lavender-twilight-field-2: #D1C4E9;
  --lavender-twilight-field-3: #9575CD;
  --lavender-twilight-field-4: #673AB7;
  --lavender-twilight-field-5: #4A148C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-twilight-field": {
        1: "#EDE7F6",
        2: "#D1C4E9",
        3: "#9575CD",
        4: "#673AB7",
        5: "#4A148C",
      }
    }
  }
}

Hex values

Color 1#EDE7F6

Color 2#D1C4E9

Color 3#9575CD

Color 4#673AB7

Color 5#4A148C

Accessibility

Contrast checker

1.4:1Fail

3:1AA18

6.1:1AA

9.8:1AAA

1.4:1Fail

2.2:1Fail

4.5:1AA18

7.2:1AAA

3:1AA18

2.2:1Fail

2:1Fail

3.2:1AA18

6.1:1AA

4.5:1AA18

2:1Fail

1.6:1Fail

9.8:1AAA

7.2:1AAA

3.2:1AA18

1.6:1Fail

Similar palettes

More like Lavender Twilight Field

View all Cool

Twilight Garden Whisper