Back to palettes

Palette

Lavender Petal Field

Gentle lavenders and rosy blushes capture the essence of a serene floral garden.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lavender Petal Field 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 Petal Field.

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

Data visualization

#E6E6FA#D8BFD8#FFD9EC#F4C4F4#C6A3C6

Palette guide

How to use Lavender Petal Field

Overview

The "Lavender Petal Field" palette is a delightful and romantic collection, blending soft lavenders with gentle rosy pinks. Featuring the airy #E6E6FA and the sweet #FFD9EC, alongside the delicate #D8BFD8 and the charming #F4C4F4, this palette evokes the serene beauty of a blooming garden. The inclusion of #C6A3C6 provides a grounding, slightly deeper tone. This harmonious mix is perfect for designs that aim to convey femininity, tenderness, and a touch of whimsical elegance. Designers can use these colors to create inviting, soft, and visually appealing interfaces for various creative and lifestyle applications.

Best used for

  • Floral design and wedding industries
  • Baby product branding or nurseries
  • Women's fashion and beauty blogs
  • Romantic stationery and greeting cards
  • Dessert and pastry shop branding
  • Craft and DIY project websites

Suggested color roles

primary

#C6A3C6 - A gentle yet grounding medium purple, excellent for main headings, brand logos, or prominent graphic elements.

secondary

#D8BFD8 - A soft, muted lavender, ideal for subheadings, background sections, or supporting visual elements.

accent

#F4C4F4 - A cheerful, medium light pink-purple, perfect for calls-to-action, buttons, or highlighting key information with a sweet touch.

background

#E6E6FA - A very light, almost ethereal lavender, creating a clean, airy, and inviting canvas for content.

text

#C6A3C6 - This medium purple offers good readability for body text on very light backgrounds, or a dark charcoal for contrast.

Accessibility notes

  • Ensure #C6A3C6 text on #E6E6FA backgrounds meets WCAG AA contrast standards.
  • Avoid using #FFD9EC or #F4C4F4 for small text against #E6E6FA due to low contrast.
  • Interactive elements should use #C6A3C6 or #D8BFD8 with clear visual cues.
  • Be mindful of color combinations for users with color vision deficiencies, especially pinks and purples.

Recommended combinations

Floral Blush

Creates a soft, romantic background or header area, perfect for feminine themes.

#E6E6FA · #FFD9EC · #F4C4F4

Petal Contrast

Ideal for body text and navigation, providing readability with a gentle, harmonious feel.

#E6E6FA · #C6A3C6 · #D8BFD8

Sweet Highlight

Suited for accentuating specific sections or interactive elements with a delicate pop of color.

#D8BFD8 · #F4C4F4 · #C6A3C6

CSS variables

:root {
  --lavender-petal-field-1: #E6E6FA;
  --lavender-petal-field-2: #D8BFD8;
  --lavender-petal-field-3: #FFD9EC;
  --lavender-petal-field-4: #F4C4F4;
  --lavender-petal-field-5: #C6A3C6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-petal-field": {
        1: "#E6E6FA",
        2: "#D8BFD8",
        3: "#FFD9EC",
        4: "#F4C4F4",
        5: "#C6A3C6",
      }
    }
  }
}

Related searches

romantic lavender pink palettefloral pastel color schemesweet feminine hex colorsdreamy garden ui palettesoft purple pink branding

Palette colors

Hex values

Color 1#E6E6FA
·
Color 2#D8BFD8
·
Color 3#FFD9EC
·
Color 4#F4C4F4
·
Color 5#C6A3C6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1:1Fail
1.2:1Fail
1.8:1Fail
2
1.4:1Fail
1.3:1Fail
1.1:1Fail
1.3:1Fail
3
1:1Fail
1.3:1Fail
1.2:1Fail
1.7:1Fail
4
1.2:1Fail
1.1:1Fail
1.2:1Fail
1.5:1Fail
5
1.8:1Fail
1.3:1Fail
1.7:1Fail
1.5:1Fail

Similar palettes

More like Lavender Petal Field

View all pastel