Palette

Wisteria Garden Bloom

Soft, delicate hues capturing the enchanting beauty of a wisteria-filled garden in full bloom.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Wisteria Garden 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 Wisteria Garden Bloom.

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

Data visualization

#5B3E6E#7B68EE#9370DB#B0E0E6#DDA0DD

Palette guide

How to use Wisteria Garden Bloom

Overview

The Wisteria Garden Bloom palette captures the enchanting beauty of a wisteria-filled garden in full bloom, blending soft lavenders with a touch of serene blue. This vibrant yet harmonious collection ranges from the deep, rich #5B3E6E to the ethereal #B0E0E6. The bright #7B68EE provides a striking accent, while #9370DB offers a balanced, elegant purple. The delicate #DDA0DD adds a romantic, soft touch. This palette is ideal for designs that aim for a magical, lively, and sophisticated feel, perfect for conveying the lushness of a spring garden with a contemporary edge.

Best used for

Spring or garden-themed events and branding
Creative digital art and illustrations
Fashion and lifestyle brands
Unique wedding stationery
Children's book illustrations
Lush, inviting website designs

Suggested color roles

primary

#5B3E6E, a deep, rich indigo-purple, ideal for impactful headings, brand logos, or foundational elements that need to convey luxury and depth.

secondary

#7B68EE, a vibrant, medium blue-violet, excellent for subheadings, call-to-action buttons, or key interactive elements to add energy and a modern touch.

accent

#9370DB, a soft, elegant lavender-purple, perfect for subtle highlights, decorative motifs, or secondary accents to provide gentle contrast.

background

#B0E0E6, a very light, airy sky blue, serving as a crisp, fresh canvas that enhances readability and creates a spacious feel.

text

Use a dark charcoal like #333333 or the deep #5B3E6E for body text against #B0E0E6 for optimal legibility and a refined aesthetic.

Accessibility notes

Ensure sufficient contrast between #DDA0DD text and #B0E0E6 background, as it will likely be too low for body text.
#5B3E6E and #7B68EE offer good contrast against #B0E0E6 for text.
Be mindful of the vibrancy of #7B68EE; use it strategically to avoid visual clutter.
Always verify contrast ratios for all text and interactive elements.

Recommended combinations

Garden Vibrance

A dynamic combination for web interfaces; #B0E0E6 as background, #7B68EE for interactive elements, and #5B3E6E for headings.

#B0E0E6 · #7B68EE · #5B3E6E

Wisteria Layers

Creates a sophisticated layered effect for branding, using #5B3E6E for depth and the lighter purples for elegant transitions.

#5B3E6E · #9370DB · #DDA0DD

Dreamy Bloom

Ideal for delicate and romantic designs, with #DDA0DD and #B0E0E6 as soft bases, accented by the vibrant #7B68EE.

#DDA0DD · #B0E0E6 · #7B68EE

CSS variables

:root {
  --wisteria-garden-bloom-1: #5B3E6E;
  --wisteria-garden-bloom-2: #7B68EE;
  --wisteria-garden-bloom-3: #9370DB;
  --wisteria-garden-bloom-4: #B0E0E6;
  --wisteria-garden-bloom-5: #DDA0DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "wisteria-garden-bloom": {
        1: "#5B3E6E",
        2: "#7B68EE",
        3: "#9370DB",
        4: "#B0E0E6",
        5: "#DDA0DD",
      }
    }
  }
}

Hex values

Color 1#5B3E6E

Color 2#7B68EE

Color 3#9370DB

Color 4#B0E0E6

Color 5#DDA0DD

Accessibility

Contrast checker

2.1:1Fail

2.4:1Fail

6.2:1AA

4.3:1AA18

2.1:1Fail

1.1:1Fail

2.9:1Fail

2:1Fail

2.4:1Fail

1.1:1Fail

2.6:1Fail

1.8:1Fail

6.2:1AA

2.9:1Fail

2.6:1Fail

1.4:1Fail

4.3:1AA18

2:1Fail

1.8:1Fail

1.4:1Fail

Similar palettes

More like Wisteria Garden Bloom

View all pastel

Lavender Bloom Field

Lavender Bloom Morning

Lavender Field Breeze

Lavender Haze Garden

Aura Amethyst Dream

Cottage Garden Blush