Back to palettes

Palette

Tranquil Lavender Mist

Soft and calming, capturing the gentle fragrance and misty allure of a lavender field at dawn.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A5ACD#9370DB#C8A2C8#E0BBE4#483D8B

Palette guide

How to use Tranquil Lavender Mist

Overview

The Tranquil Lavender Mist palette offers a delicate and soothing collection of purples, from the deep #483D8B to the soft #E0BBE4, including #6A5ACD, #9370DB, and #C8A2C8. This palette beautifully captures the gentle, ethereal quality of a lavender field at dawn, making it perfect for designs seeking to evoke calm, creativity, and a touch of luxury. Designers and developers can leverage these harmonious shades to create interfaces and branding that feel inviting, sophisticated, and distinctly feminine or artistic. Its pastel leanings ensure a soft visual impact, ideal for serene user experiences.

Best used for

  • Beauty and cosmetic product branding
  • Wellness and aromatherapy websites
  • Floral design and event planning materials
  • Creative arts portfolios or galleries
  • Boutique fashion and accessory brands
  • Meditation or relaxation app interfaces

Suggested color roles

primary

Use #483D8B as the grounding primary color for strong text, navigation, or foundational elements. It offers a deep, stable presence.

secondary

Employ #6A5ACD for supportive sections, subheadings, or larger blocks of color. It's a rich purple that complements the primary.

accent

Apply #9370DB or #C8A2C8 for highlights, interactive elements, or decorative details. These softer purples add a touch of whimsy and warmth.

background

Utilize #E0BBE4 for light, airy backgrounds. Its pale, almost pastel quality provides a gentle canvas for darker text.

text

For optimal readability on light backgrounds like #E0BBE4, use #483D8B or #6A5ACD. For light text on darker backgrounds, #E0BBE4 or a crisp white provides clear contrast.

Accessibility notes

  • Ensure sufficient contrast when using #C8A2C8 or #E0BBE4 for text on other light palette colors.
  • Text in #483D8B or #6A5ACD on #E0BBE4 background should provide good readability.
  • Avoid pairing #E0BBE4 text directly with #C8A2C8 background without checking WCAG AA contrast ratios.
  • For body text, prioritize the darkest colors on the lightest backgrounds to ensure legibility.

Recommended combinations

Deep Bloom Contrast

Classic setup for clarity: deep purple text on a light background, with a vibrant mid-tone accent.

#483D8B · #E0BBE4 · #9370DB

Misty Gradient

Excellent for soft background gradients or ethereal illustrations, creating a dreamy visual flow.

#6A5ACD · #C8A2C8 · #E0BBE4

Lavender Accents

Use the softer purples for UI elements, grounded by the darkest purple for clear headings or icons.

#9370DB · #C8A2C8 · #483D8B

CSS variables

:root {
  --tranquil-lavender-mist-1: #6A5ACD;
  --tranquil-lavender-mist-2: #9370DB;
  --tranquil-lavender-mist-3: #C8A2C8;
  --tranquil-lavender-mist-4: #E0BBE4;
  --tranquil-lavender-mist-5: #483D8B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-lavender-mist": {
        1: "#6A5ACD",
        2: "#9370DB",
        3: "#C8A2C8",
        4: "#E0BBE4",
        5: "#483D8B",
      }
    }
  }
}

Related searches

calm purple color palettelavender web designserene pastel brand colorsmisty purple ui themefloral color scheme

Palette colors

Hex values

Color 1#6A5ACD
·
Color 2#9370DB
·
Color 3#C8A2C8
·
Color 4#E0BBE4
·
Color 5#483D8B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.4:1Fail
3.1:1AA18
1.7:1Fail
2
1.4:1Fail
1.7:1Fail
2.2:1Fail
2.4:1Fail
3
2.4:1Fail
1.7:1Fail
1.3:1Fail
4.1:1AA18
4
3.1:1AA18
2.2:1Fail
1.3:1Fail
5.4:1AA
5
1.7:1Fail
2.4:1Fail
4.1:1AA18
5.4:1AA

Similar palettes

More like Tranquil Lavender Mist

View all pastel
Gentle Lavender Haze
Lavender Field Dreams
Lavender Field Whisper
Misty Lavender Farm
Provence Lavender Haze
Dreamy Lavender Field