Back to palettes

Palette

Provence Lavender Haze

Soft and romantic hues, reminiscent of expansive lavender fields under a gentle, hazy sky in Provence.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Provence Lavender Haze 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 Provence Lavender Haze.

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

Data visualization

#E6E6FA#DDA0DD#C3B1E1#B2A4BE#F8F8FF

Palette guide

How to use Provence Lavender Haze

Overview

The "Provence Lavender Haze" palette offers a serene and delicate array of pastel purples and near-whites, perfect for designs requiring a soft, calming touch. Featuring ethereal shades like the very light #F8F8FF and #E6E6FA, alongside gentle lavenders such as #DDA0DD and the slightly muted #C3B1E1, this collection evokes tranquility. Designers can leverage this palette for creating airy, romantic, and minimalist interfaces. Developers will find these hex codes excellent for backgrounds, subtle UI elements, or themes that aim for a gentle, approachable aesthetic, ensuring a peaceful user experience across various digital platforms.

Best used for

  • Baby product branding and websites
  • Spa and wellness content
  • Wedding planning resources
  • Feminine lifestyle blogs
  • Minimalist app designs
  • Healthcare and calm-inducing interfaces

Suggested color roles

primary

#C3B1E1 - A soft, mid-tone lavender, suitable for primary content areas, navigation bars, or as a calming background that still offers a hint of color.

secondary

#DDA0DD - A slightly warmer, more noticeable pastel purple, effective for secondary headings, decorative elements, or subtle calls-to-action.

accent

#B2A4BE - A muted, almost grey-purple, ideal for subtle accents, borders, or text elements where a soft contrast is preferred over a stark one.

background

#F8F8FF - An almost pure white with a touch of purple, perfect for main page backgrounds, providing a clean and expansive canvas.

text

#4A3E5C (dark purple-grey) - For excellent readability against the lighter backgrounds like #F8F8FF or #E6E6FA. Avoid using light pastels for small text.

Accessibility notes

  • Ensure sufficient contrast when using #B2A4BE or #DDA0DD for text against #F8F8FF or #E6E6FA backgrounds.
  • Avoid placing light text on any of the pastel shades; always opt for darker text colors.
  • Use #C3B1E1 for larger headings or decorative text rather than body copy if paired with a light background.
  • Consider a near-black or deep charcoal for body text to guarantee readability across all light background options.

Recommended combinations

Gentle Serenity

Excellent for clean, airy layouts, using the light shades for background and the lavenders for soft content blocks or headings.

#F8F8FF · #C3B1E1 · #DDA0DD

Muted Depth

Suitable for subtle layering in UI design, where the muted tones provide depth without overwhelming the calm aesthetic.

#E6E6FA · #B2A4BE · #C3B1E1

Soft Highlight

Use the warmer lavender as a soft highlight against the near-white background, with the muted tone for secondary information or dividers.

#DDA0DD · #F8F8FF · #B2A4BE

CSS variables

:root {
  --provence-lavender-haze-1: #E6E6FA;
  --provence-lavender-haze-2: #DDA0DD;
  --provence-lavender-haze-3: #C3B1E1;
  --provence-lavender-haze-4: #B2A4BE;
  --provence-lavender-haze-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "provence-lavender-haze": {
        1: "#E6E6FA",
        2: "#DDA0DD",
        3: "#C3B1E1",
        4: "#B2A4BE",
        5: "#F8F8FF",
      }
    }
  }
}

Related searches

pastel lavender palettecalm purple colorssoft floral designromantic pastel schememinimalist purple UI

Palette colors

Hex values

Color 1#E6E6FA
·
Color 2#DDA0DD
·
Color 3#C3B1E1
·
Color 4#B2A4BE
·
Color 5#F8F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.6:1Fail
1.9:1Fail
1.2:1Fail
2
1.7:1Fail
1.1:1Fail
1.1:1Fail
2:1Fail
3
1.6:1Fail
1.1:1Fail
1.2:1Fail
1.9:1Fail
4
1.9:1Fail
1.1:1Fail
1.2:1Fail
2.2:1Fail
5
1.2:1Fail
2:1Fail
1.9:1Fail
2.2:1Fail

Similar palettes

More like Provence Lavender Haze

View all pastel
Lavender Field Dreams
Lavender Dream Haze
Lavender Field Dream
Lavender Field Haze
Lavender Field Haze
Lavender Field Peace