Back to palettes

Palette

Lavender Stone Pathway

Soft lavenders and gentle grays create a tranquil path through a fragrant garden, marked by peaceful stone.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lavender Stone Pathway 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 Stone Pathway.

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

Data visualization

#8C7A9C#B3A2C7#D9CCEE#6E5E7A#52455C

Palette guide

How to use Lavender Stone Pathway

Overview

The Lavender Stone Pathway palette offers a tranquil blend of sophisticated purples and grounding grays, perfect for creating serene and elegant designs. Featuring a harmonious range from the deep, muted #52455C to the soft, ethereal #D9CCEE, and balanced by shades like #8C7A9C and #B3A2C7, this palette evokes a sense of calm and natural beauty. It's an excellent choice for projects seeking a refined yet approachable aesthetic. Designers and developers will find these colors versatile for conveying peace, luxury, or a gentle, earthy sophistication.

Best used for

  • Wellness and spa branding
  • Luxury home decor designs
  • Nature-inspired web interfaces
  • Elegant event invitations
  • Feminine fashion and beauty products
  • Calm mobile app themes

Suggested color roles

primary

Use #8C7A9C as a dominant color for branding or main content areas, offering a balanced and sophisticated lavender-grey.

secondary

Employ #B3A2C7 for supporting elements, subheadings, or background sections that need a softer, lighter touch.

accent

Apply #D9CCEE sparingly for subtle highlights, delicate borders, or hover states, adding an ethereal pop.

background

The lightest shade, #D9CCEE, makes an excellent clean and airy background, allowing darker elements to stand out.

text

Utilize #52455C for primary text to ensure readability against lighter backgrounds, or a dark charcoal for better contrast.

Accessibility notes

  • Ensure sufficient contrast between #52455C text and lighter backgrounds like #D9CCEE or #B3A2C7 for readability.
  • Avoid using #D9CCEE for small text as its lightness may not meet WCAG contrast standards without a very dark background.
  • For interactive elements, test the contrast of #8C7A9C and #B3A2C7 against their surrounding colors.
  • Consider using a near-black (e.g., #333333) for body text if the palette's darkest color, #52455C, doesn't provide enough contrast on lighter shades.

Recommended combinations

Subtle Depth

Ideal for elegant dashboards where #52455C is text, #8C7A9C is primary UI, and #D9CCEE is the background.

#52455C · #8C7A9C · #D9CCEE

Gentle Gradient

Perfect for soft web banners or hero sections, transitioning from a medium tone to a light, airy finish.

#6E5E7A · #B3A2C7 · #D9CCEE

Accented Contrast

Effective for call-to-action buttons where #52455C is text on a #D9CCEE button, with #B3A2C7 for hover states.

#52455C · #D9CCEE · #B3A2C7

CSS variables

:root {
  --lavender-stone-pathway-1: #8C7A9C;
  --lavender-stone-pathway-2: #B3A2C7;
  --lavender-stone-pathway-3: #D9CCEE;
  --lavender-stone-pathway-4: #6E5E7A;
  --lavender-stone-pathway-5: #52455C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-stone-pathway": {
        1: "#8C7A9C",
        2: "#B3A2C7",
        3: "#D9CCEE",
        4: "#6E5E7A",
        5: "#52455C",
      }
    }
  }
}

Related searches

lavender grey palettetranquil color schemesophisticated purple colorsstone path colorsmuted garden palette

Palette colors

Hex values

Color 1#8C7A9C
·
Color 2#B3A2C7
·
Color 3#D9CCEE
·
Color 4#6E5E7A
·
Color 5#52455C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.6:1Fail
1.5:1Fail
2.3:1Fail
2
1.7:1Fail
1.6:1Fail
2.5:1Fail
3.8:1AA18
3
2.6:1Fail
1.6:1Fail
3.9:1AA18
5.8:1AA
4
1.5:1Fail
2.5:1Fail
3.9:1AA18
1.5:1Fail
5
2.3:1Fail
3.8:1AA18
5.8:1AA
1.5:1Fail

Similar palettes

More like Lavender Stone Pathway

View all pastel
Lavender Haze Garden
Wisteria Garden Bloom
Amethyst Haze Veil
Aura Amethyst Dream
Dreamy Lavender Field
Dreamy Lavender Field