Palette

Lavender Field Dream

A serene, dreamlike wash of soft lavenders and purples, evoking a tranquil floral field.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A5ACD#8A2BE2#9370DB#DDA0DD#E6E6FA

Palette guide

How to use Lavender Field Dream

Overview

The Lavender Field Dream palette offers a serene collection of purples, perfect for evoking tranquility and softness. Featuring shades like the deep wisteria of #6A5ACD, the vibrant violet of #8A2BE2, and the gentle thistle of #DDA0DD, alongside the airy #E6E6FA, this palette is ideal for designers seeking a harmonious and calming aesthetic. Developers will find these hues well-suited for creating graceful user interfaces, particularly for wellness, bridal, or artistic applications where a touch of elegance is desired. The soft transitions between #9370DB and lighter tones ensure a cohesive visual experience.

Best used for

Spa and wellness branding
Wedding invitations and decor
Feminine product packaging
Soft UI themes for apps
Botanical art and illustration
Meditation and mindfulness platforms

Suggested color roles

primary

#6A5ACD for authoritative headers or key branding elements, providing a sophisticated purple anchor.

secondary

#9370DB works as a versatile supporting hue for subheadings or prominent UI components, maintaining calm.

accent

#8A2BE2 adds a vibrant, energetic pop, perfect for call-to-action buttons or interactive highlights.

background

#E6E6FA offers a clean, ethereal canvas, ensuring readability and a light, spacious feel.

text

#6A5ACD is suitable for headings, while a near-black or charcoal color is recommended for body text against light backgrounds for optimal readability.

Accessibility notes

Ensure sufficient contrast between #E6E6FA backgrounds and any text, especially with lighter purples like #DDA0DD.
Use #6A5ACD or #8A2BE2 for text on #E6E6FA backgrounds to meet WCAG AA standards.
Avoid placing light text (e.g., #DDA0DD) on light backgrounds (e.g., #E6E6FA) for critical information.
Test contrast ratios for interactive elements to ensure they are discernible for all users.

Recommended combinations

Dreamy UI

Ideal for soft, airy interfaces where #E6E6FA is background, #DDA0DD for cards, and #9370DB for prominent text.

#E6E6FA · #DDA0DD · #9370DB

Elegant Contrast

For striking headers or call-to-action sections with #E6E6FA as base, #6A5ACD for titles, and #8A2BE2 for accents.

#E6E6FA · #6A5ACD · #8A2BE2

Muted Depth

Creates subtle depth, with #9370DB as a deeper background, #DDA0DD for overlay elements, and #E6E6FA for light text.

#9370DB · #DDA0DD · #E6E6FA

CSS variables

:root {
  --lavender-field-dream-3-1: #6A5ACD;
  --lavender-field-dream-3-2: #8A2BE2;
  --lavender-field-dream-3-3: #9370DB;
  --lavender-field-dream-3-4: #DDA0DD;
  --lavender-field-dream-3-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-field-dream-3": {
        1: "#6A5ACD",
        2: "#8A2BE2",
        3: "#9370DB",
        4: "#DDA0DD",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#6A5ACD

Color 2#8A2BE2

Color 3#9370DB

Color 4#DDA0DD

Color 5#E6E6FA

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

2.6:1Fail

4.3:1AA18

1.1:1Fail

1.6:1Fail

2.9:1Fail

4.8:1AA

1.4:1Fail

1.6:1Fail

1.8:1Fail

3.1:1AA18

2.6:1Fail

2.9:1Fail

1.8:1Fail

1.7:1Fail

4.3:1AA18

4.8:1AA

3.1:1AA18

1.7:1Fail

Similar palettes

More like Lavender Field Dream

View all Pastel

Lavender Haze Dreams

Lavender Mist Dream

Cloud Kissed Lavender

Spring Thistle Bloom

Aqua Blossom Dream

Blossom Blush Breeze