Back to palettes

Palette

Misty Lavender Field

Soft, dreamy purples inspired by a tranquil lavender field shrouded in a gentle morning mist.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9370DB#C8A2C8#DDA0DD#BA8EEB#E6E6FA

Palette guide

How to use Misty Lavender Field

Overview

The Misty Lavender Field palette offers a soft, dreamy collection of purples, inspired by a tranquil lavender field shrouded in gentle morning mist. Featuring shades from the vibrant '#9370DB' to the ethereal '#E6E6FA', and including the delicate '#C8A2C8', '#DDA0DD', and '#BA8EEB', this palette is perfect for creating serene and inviting digital experiences. Designers and developers will find these colors ideal for projects requiring a touch of romance, calm, and natural beauty. The harmonious blend of pastels ensures a cohesive and visually pleasing aesthetic, making it excellent for personal branding, creative portfolios, or any platform seeking a gentle and evocative feel.

Best used for

  • Personal blogs and online diaries
  • Creative and artistic portfolios
  • Children's book illustrations
  • Event invitations and greeting cards
  • Handmade craft product showcases
  • Wellness and mindfulness applications

Suggested color roles

primary

Use '#9370DB' as the main vibrant lavender for key headings, buttons, or focal points, drawing attention softly.

secondary

Employ '#BA8EEB' for supporting content, subheadings, or secondary navigation, maintaining harmony.

accent

Apply '#DDA0DD' for delicate highlights, interactive states, or subtle decorative elements.

background

Utilize '#E6E6FA' as the lightest background, providing an airy and gentle canvas for content.

text

For good readability, use '#9370DB' or a deep purple for primary body text on lighter backgrounds.

Accessibility notes

  • Ensure '#9370DB' text on '#E6E6FA' background has sufficient contrast for readability.
  • Avoid using '#DDA0DD' or '#C8A2C8' for small, essential text due to their lightness.
  • Consider larger font sizes for lighter purple text to enhance legibility.
  • Provide clear visual cues for interactive states, such as hover and focus, beyond color alone.

Recommended combinations

Vibrant Bloom

Creates a lively yet harmonious feel, ideal for feature sections, call-to-action blocks, or engaging visuals.

#9370DB · #BA8EEB · #C8A2C8

Soft Dream

Perfect for delicate designs, airy layouts, and backgrounds that emphasize softness and light.

#E6E6FA · #DDA0DD · #C8A2C8

Misted Petals

Offers a subtle yet inviting combination, suitable for layered UI components or gentle gradients.

#BA8EEB · #DDA0DD · #9370DB

CSS variables

:root {
  --misty-lavender-field-1: #9370DB;
  --misty-lavender-field-2: #C8A2C8;
  --misty-lavender-field-3: #DDA0DD;
  --misty-lavender-field-4: #BA8EEB;
  --misty-lavender-field-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-lavender-field": {
        1: "#9370DB",
        2: "#C8A2C8",
        3: "#DDA0DD",
        4: "#BA8EEB",
        5: "#E6E6FA",
      }
    }
  }
}

Related searches

dreamy lavender palettesoft purple colorstranquil ui schemefloral web designpastel purple branding

Palette colors

Hex values

Color 1#9370DB
·
Color 2#C8A2C8
·
Color 3#DDA0DD
·
Color 4#BA8EEB
·
Color 5#E6E6FA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.8:1Fail
1.5:1Fail
3.1:1AA18
2
1.7:1Fail
1.1:1Fail
1.2:1Fail
1.8:1Fail
3
1.8:1Fail
1.1:1Fail
1.2:1Fail
1.7:1Fail
4
1.5:1Fail
1.2:1Fail
1.2:1Fail
2.1:1Fail
5
3.1:1AA18
1.8:1Fail
1.7:1Fail
2.1:1Fail

Similar palettes

More like Misty Lavender Field

View all pastel