Back to palettes

Palette

Soft Lavender Cloud

Dreamy pastel purples creating a serene, cloud-like ambiance.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Soft Lavender Cloud 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 Soft Lavender Cloud.

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

Data visualization

#D7BDE2#C3A9D7#A98CD1#8A6FC2#6C52B0

Palette guide

How to use Soft Lavender Cloud

Overview

The Soft Lavender Cloud palette features dreamy pastel purples, expertly crafted to create a serene, cloud-like ambiance. From the ethereal #D7BDE2 to the deep #6C52B0, with captivating mid-tones like #A98CD1, this collection offers a blend of calm and sophistication. Designers and developers can leverage these soft, inviting hues to build enchanting user interfaces, develop unique brand identities, or create digital experiences that convey creativity and tranquility. The progression of lavender shades ensures a harmonious visual flow, perfect for projects requiring a touch of elegance and a soothing presence.

Best used for

  • Creative branding and marketing
  • Beauty and cosmetic product design
  • Spiritual and wellness applications
  • Artistic portfolios and galleries
  • Feminine and elegant web designs
  • Dreamy event invitations

Suggested color roles

primary

Use #D7BDE2 as the light, ethereal background for an expansive and soothing canvas.

secondary

Apply #C3A9D7 for subtle content sections, card backgrounds, or secondary navigation elements.

accent

Employ #6C52B0 as a deep, rich accent for primary calls to action, headlines, or key icons, providing strong emphasis.

background

The lightest shade, #D7BDE2, is ideal for primary backgrounds, setting a soft and inviting mood.

text

For optimal readability, use #6C52B0 for body text and headings on lighter backgrounds like #D7BDE2.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter shades such as #D7BDE2 and #C3A9D7.
  • Utilize #6C52B0 for primary text on #D7BDE2 to meet WCAG contrast guidelines for legibility.
  • Avoid using #C3A9D7 and #A98CD1 for adjacent interactive elements without clear visual differentiation.
  • For smaller text, always opt for the darkest shades against the lightest backgrounds to maintain readability.

Recommended combinations

Lavender Haze

Creates a smooth, dreamy blend, ideal for soft gradients, headers, or subtle background elements.

#D7BDE2 · #C3A9D7 · #A98CD1

Deep Contrast

Adds depth and focus, excellent for headlines, calls to action, or important visual elements.

#D7BDE2 · #8A6FC2 · #6C52B0

Mid-tone Harmony

Balanced purple tones for creating harmonious sections, detailed components, or layered UI elements.

#C3A9D7 · #A98CD1 · #8A6FC2

CSS variables

:root {
  --soft-lavender-cloud-1: #D7BDE2;
  --soft-lavender-cloud-2: #C3A9D7;
  --soft-lavender-cloud-3: #A98CD1;
  --soft-lavender-cloud-4: #8A6FC2;
  --soft-lavender-cloud-5: #6C52B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-lavender-cloud": {
        1: "#D7BDE2",
        2: "#C3A9D7",
        3: "#A98CD1",
        4: "#8A6FC2",
        5: "#6C52B0",
      }
    }
  }
}

Related searches

pastel lavender palettedreamy purple colorsserene UI designfeminine color schemecloud purple hues

Palette colors

Hex values

Color 1#D7BDE2
·
Color 2#C3A9D7
·
Color 3#A98CD1
·
Color 4#8A6FC2
·
Color 5#6C52B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.7:1Fail
2.4:1Fail
3.5:1AA18
2
1.2:1Fail
1.4:1Fail
1.9:1Fail
2.9:1Fail
3
1.7:1Fail
1.4:1Fail
1.4:1Fail
2.1:1Fail
4
2.4:1Fail
1.9:1Fail
1.4:1Fail
1.5:1Fail
5
3.5:1AA18
2.9:1Fail
2.1:1Fail
1.5:1Fail

Similar palettes

More like Soft Lavender Cloud

View all pastel
Aura Amethyst Dream
Dreamy Lavender Field
Lavender Fields Dream
Lavender Haze Dream
Lavender Misty Dream
Lavender Morning Mist