Palette

Lavender Fields Mist

Gentle purples and soft greys capture the serene essence of lavender fields kissed by morning mist.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lavender Fields Mist 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 Fields Mist.

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

Data visualization

#6A5ACD#9370DB#B19CD9#CDCEDF#E6E6FA

Palette guide

How to use Lavender Fields Mist

Overview

The "Lavender Fields Mist" palette beautifully captures the tranquil essence of dawn over a lavender field, blending gentle purples with soft grays. It features a rich, deep lavender like #6A5ACD, a vibrant medium purple #9370DB, and a lighter, muted violet #B19CD9. Complementing these are the subtle, almost neutral #CDCEDF and the very light, airy #E6E6FA. This collection is ideal for designers and developers seeking to convey serenity, sophistication, and a touch of natural beauty in their projects. It's particularly effective for creating soft, inviting user interfaces or elegant branding.

Best used for

Yoga studio or meditation app design
Luxury skincare or aromatherapy packaging
Wedding photography websites
Children's book illustrations or nursery decor
Editorial design for lifestyle magazines
Brand identity for wellness coaches

Suggested color roles

primary

#9370DB - A prominent, inviting purple suitable for main headings, interactive elements, and key visual features.

secondary

#6A5ACD - Use this deeper shade for important calls-to-action, navigation, or as a strong accent against lighter tones.

accent

#B19CD9 - Perfect for subtle highlights, hover states, or decorative graphics without overwhelming the design.

background

#E6E6FA - A very pale, almost white lavender that serves as an excellent, soft canvas for content.

text

#6A5ACD - A rich, readable purple that offers good contrast against light backgrounds for body text and headings.

Accessibility notes

Ensure sufficient contrast when using #B19CD9 on #E6E6FA; it may require larger text.
The dark #6A5ACD provides excellent contrast for text on #E6E6FA or #CDCEDF.
Avoid using #CDCEDF as text color on #E6E6FA for critical information due to low contrast.
Consider using a standard dark gray or black for extensive body text if #6A5ACD proves too light for some users.

Recommended combinations

Misty Base

Creates a soft, ethereal background and supporting element structure.

#E6E6FA · #CDCEDF · #B19CD9

Vibrant Depth

Ideal for impactful headings, buttons, and visual hierarchy.

#E6E6FA · #9370DB · #6A5ACD

Subtle Harmony

Use for delicate patterns, secondary information, or subtle gradients.

#B19CD9 · #CDCEDF · #9370DB

CSS variables

:root {
  --lavender-fields-mist-1: #6A5ACD;
  --lavender-fields-mist-2: #9370DB;
  --lavender-fields-mist-3: #B19CD9;
  --lavender-fields-mist-4: #CDCEDF;
  --lavender-fields-mist-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-fields-mist": {
        1: "#6A5ACD",
        2: "#9370DB",
        3: "#B19CD9",
        4: "#CDCEDF",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#6A5ACD

Color 2#9370DB

Color 3#B19CD9

Color 4#CDCEDF

Color 5#E6E6FA

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

3.4:1AA18

4.3:1AA18

1.4:1Fail

1.5:1Fail

2.4:1Fail

3.1:1AA18

2.2:1Fail

1.5:1Fail

1.6:1Fail

2:1Fail