Back to palettes

Palette

Sweet Lavender Bloom

Soft, gentle lavenders and light purples capture the delicate fragrance and serene beauty of blooming lavender fields.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sweet Lavender Bloom 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 Sweet Lavender Bloom.

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

Data visualization

#8F6A9F#B191C3#D3B8D9#E8D5ED#F6E9FA

Palette guide

How to use Sweet Lavender Bloom

Overview

The "Sweet Lavender Bloom" palette offers a beautifully soft and harmonious gradient of purples, capturing the delicate fragrance and serene beauty of blooming lavender fields. Ranging from a deeper, muted violet (#8F6A9F) to an almost ethereal light lavender (#F6E9FA), this collection includes inviting shades like #B191C3, #D3B8D9, and #E8D5ED. This palette is ideal for projects seeking to convey tranquility, natural elegance, and a gentle, inviting atmosphere. Designers can effectively use these hues for wellness brands, sophisticated feminine products, or serene digital environments, ensuring a cohesive and calming visual experience.

Best used for

  • Spa and aromatherapy product branding
  • Yoga and meditation app interfaces
  • Feminine fashion and lifestyle blogs
  • Wedding stationery and decor
  • Calming interior design concepts
  • Gentle digital illustrations

Suggested color roles

primary

Utilize #8F6A9F (Muted Violet) for dominant headers, key graphical elements, or as a sophisticated background for content blocks.

secondary

Apply #B191C3 (Medium Lavender) for subheadings, secondary UI elements, or larger content areas to create a balanced look.

accent

Employ #D3B8D9 (Soft Lavender) sparingly for subtle highlights, interactive elements, or decorative patterns to add refinement.

background

Use #F6E9FA (Pale Lavender) as a clean, airy backdrop that ensures good contrast for darker text while maintaining the palette's gentle mood.

text

For primary body text, a dark grey or charcoal (e.g., #4A4A4A) is recommended for optimal readability. #8F6A9F can be used for significant headings on light backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter purples like #E8D5ED with white text; dark text is always preferable.
  • Avoid using #D3B8D9 and #E8D5ED directly adjacent for small text or critical information due to their similar lightness.
  • When using #8F6A9F for text, ensure the background is light enough (e.g., #F6E9FA) to meet WCAG contrast standards.
  • Test the readability of smaller font sizes, especially with mid-range purples like #B191C3, against various backgrounds.

Recommended combinations

Soft Transition

Creates a gentle, ethereal gradient, perfect for backgrounds, headers, or subtle UI elements.

#F6E9FA · #E8D5ED · #D3B8D9

Elegant Depth

Offers a sophisticated, layered purple combination for impactful sections or design elements requiring more presence.

#8F6A9F · #B191C3 · #D3B8D9

Airy Contrast

Use the palest color as a base, with the muted violet for strong accents and the soft lavender for supporting details.

#F6E9FA · #8F6A9F · #E8D5ED

CSS variables

:root {
  --sweet-lavender-bloom-1: #8F6A9F;
  --sweet-lavender-bloom-2: #B191C3;
  --sweet-lavender-bloom-3: #D3B8D9;
  --sweet-lavender-bloom-4: #E8D5ED;
  --sweet-lavender-bloom-5: #F6E9FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-lavender-bloom": {
        1: "#8F6A9F",
        2: "#B191C3",
        3: "#D3B8D9",
        4: "#E8D5ED",
        5: "#F6E9FA",
      }
    }
  }
}

Related searches

gentle lavender color palettecalm pastel purple schemefloral sweet colorsserene violet web designmuted lavender ui

Palette colors

Hex values

Color 1#8F6A9F
·
Color 2#B191C3
·
Color 3#D3B8D9
·
Color 4#E8D5ED
·
Color 5#F6E9FA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.2:1AA18
3.8:1AA18
2
1.6:1Fail
1.5:1Fail
2:1Fail
2.3:1Fail
3
2.5:1Fail
1.5:1Fail
1.3:1Fail
1.5:1Fail
4
3.2:1AA18
2:1Fail
1.3:1Fail
1.2:1Fail
5
3.8:1AA18
2.3:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Sweet Lavender Bloom

View all pastel
Lavender Field Dreams
Lavender Field Peace
Lavender Field Whisper
Provence Lavender Haze
Sugared Petal Dust
Sweet Lavender Bloom