Back to palettes

Palette

Meadow Petal Path

Soft, gentle pastels that evoke the delicate beauty of wildflowers swaying in a sunny spring meadow.

pastelnatural5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Meadow Petal Path 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 Meadow Petal Path.

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

Data visualization

#8FBC8F#BC8F8F#E6E6FA#D8BFD8#ADD8E6

Palette guide

How to use Meadow Petal Path

Overview

The 'Meadow Petal Path' color palette offers a serene collection of soft pastels, perfect for designs requiring a gentle, inviting touch. Inspired by sun-drenched spring gardens, this palette features the calming green of #8FBC8F, reminiscent of fresh foliage, alongside the warm, delicate pink of #BC8F8F, echoing soft petals. A light, airy base is provided by #E6E6FA, a subtle lavender mist, which beautifully complements the gentle purple of #D8BFD8 and the clear sky blue of #ADD8E6. Designers and developers can leverage these hues to create harmonious, tranquil user experiences, evoking feelings of peace, natural beauty, and delicate charm across various digital and print applications.

Best used for

  • Wedding stationery and invitations
  • Baby product branding and websites
  • Spa and wellness center design
  • Delicate floral illustrations and patterns
  • Spring event marketing materials
  • Gentle, user-friendly mobile app interfaces

Suggested color roles

primary

Use this medium sea green (#8FBC8F) as the foundational color for natural elements, backgrounds, or primary brand identity where a calming, organic feel is desired.

secondary

This rosy brown (#BC8F8F) offers a warm, soft counterpoint. Ideal for secondary UI elements, accents, or to introduce a touch of delicate warmth in layouts.

accent

The thistle purple (#D8BFD8) provides a subtle, sophisticated accent. Perfect for calls-to-action, small icons, or decorative elements that need a gentle pop without being overpowering.

background

This very light lavender shade (#E6E6FA) serves as an excellent, airy background. It provides a clean canvas that enhances the delicate nature of the other palette colors without feeling stark.

text

Consider a dark charcoal or near-black (#333333) for primary body text to ensure optimal readability against the light backgrounds. For headings or larger display text, #8FBC8F can be effective.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter palette colors on backgrounds like #E6E6FA.
  • Avoid placing #BC8F8F text directly on #D8BFD8 backgrounds without checking WCAG contrast ratios.
  • Use a darker, high-contrast color for essential UI elements and interactive components for clear visibility.
  • For users with color vision deficiencies, differentiate interactive elements not solely by color but also by iconography or underline.

Recommended combinations

Fresh Meadow

Ideal for clean, refreshing digital interfaces, nature-inspired blogs, or light branding that emphasizes openness.

#8FBC8F · #E6E6FA · #ADD8E6

Soft Bloom

Excellent for feminine brands, wedding designs, or any project requiring a tender, romantic, and elegant aesthetic.

#BC8F8F · #D8BFD8 · #E6E6FA

Balanced Pastel

Creates harmonious and inviting layouts, suitable for lifestyle websites, children's products, or soft illustration work.

#8FBC8F · #BC8F8F · #ADD8E6

CSS variables

:root {
  --meadow-petal-path-1: #8FBC8F;
  --meadow-petal-path-2: #BC8F8F;
  --meadow-petal-path-3: #E6E6FA;
  --meadow-petal-path-4: #D8BFD8;
  --meadow-petal-path-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "meadow-petal-path": {
        1: "#8FBC8F",
        2: "#BC8F8F",
        3: "#E6E6FA",
        4: "#D8BFD8",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

pastel color schemesspring meadow palettegentle floral colorsdelicate ui colorsnature inspired pastels

Palette colors

Hex values

Color 1#8FBC8F
·
Color 2#BC8F8F
·
Color 3#E6E6FA
·
Color 4#D8BFD8
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

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

Similar palettes

More like Meadow Petal Path

View all pastel