Back to palettes

Palette

Lavender Fields Dream

Soft, ethereal purples and cool grays inspired by vast lavender fields under a hazy sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A393BF#C0B7D1#DDD6E5#B0C4DE#8C7B9F

Palette guide

How to use Lavender Fields Dream

Overview

This "Lavender Fields Dream" palette offers a serene and ethereal blend of soft purples and cool grays, perfect for evoking tranquility. Featuring a gentle mid-tone like #A393BF, a lighter, airy shade such as #C0B7D1, and the very subtle #DDD6E5, it creates a harmonious, dreamlike atmosphere. The inclusion of a muted blue-gray #B0C4DE adds a cool, expansive touch, while the deeper #8C7B9F provides a grounding element. Designers and developers can leverage these hues for projects requiring a sense of calm, sophistication, and understated beauty, from web interfaces to branding that aims for a gentle, inviting feel.

Best used for

  • Spa and wellness brand identity
  • E-commerce sites for artisan crafts or home decor
  • Wedding invitations and event branding
  • Mobile app interfaces for meditation or relaxation
  • Interior design visualization
  • Feminine fashion or beauty product packaging

Suggested color roles

primary

#A393BF - Ideal for main sections or prominent UI elements, offering a soft yet distinct presence.

secondary

#C0B7D1 - Excellent for supporting elements, subheadings, or backgrounds that need a gentle lift without overpowering.

accent

#B0C4DE - Use this cool blue-gray for subtle highlights, interactive states, or icons to add a refreshing touch.

background

#DDD6E5 - Provides a very light, almost off-white canvas, ensuring content remains readable and the overall feel stays airy.

text

#8C7B9F - A deeper, muted purple for body copy, offering good readability against lighter backgrounds without harsh contrast.

Accessibility notes

  • Ensure sufficient contrast between #8C7B9F text and #DDD6E5 background, especially for smaller font sizes.
  • Avoid using #C0B7D1 on #DDD6E5 for critical information due to low contrast.
  • Test color combinations with accessibility tools, particularly for users with low vision or color blindness.
  • Consider using a darker, near-black for essential text if legibility becomes an issue with palette colors.

Recommended combinations

Dreamy Base

Perfect for light background, subtle UI elements, and primary content blocks.

#DDD6E5 · #C0B7D1 · #A393BF

Cool Contrast

Provides a gentle contrast for headers or call-to-action buttons.

#DDD6E5 · #B0C4DE · #8C7B9F

Ethereal Depth

Suitable for layered graphics or gradients, adding sophisticated depth.

#C0B7D1 · #A393BF · #8C7B9F

CSS variables

:root {
  --lavender-fields-dream-1: #A393BF;
  --lavender-fields-dream-2: #C0B7D1;
  --lavender-fields-dream-3: #DDD6E5;
  --lavender-fields-dream-4: #B0C4DE;
  --lavender-fields-dream-5: #8C7B9F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-fields-dream": {
        1: "#A393BF",
        2: "#C0B7D1",
        3: "#DDD6E5",
        4: "#B0C4DE",
        5: "#8C7B9F",
      }
    }
  }
}

Related searches

soft lavender color schemedreamy pastel palettecalm purple gray colorsethereal design colorsspring aesthetic palette

Palette colors

Hex values

Color 1#A393BF
·
Color 2#C0B7D1
·
Color 3#DDD6E5
·
Color 4#B0C4DE
·
Color 5#8C7B9F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
1.6:1Fail
1.4:1Fail
2
1.5:1Fail
1.4:1Fail
1.1:1Fail
2:1Fail
3
2:1Fail
1.4:1Fail
1.3:1Fail
2.7:1Fail
4
1.6:1Fail
1.1:1Fail
1.3:1Fail
2.2:1Fail
5
1.4:1Fail
2:1Fail
2.7:1Fail
2.2:1Fail

Similar palettes

More like Lavender Fields Dream

View all pastel