Palette

Sweet Lavender Bloom

Soft and sweet, inspired by fields of blooming lavender under a serene, early evening sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sweet Lavender 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 Sweet Lavender Bloom.

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

Data visualization

#8A2BE2#9370DB#C0C0D8#E6E6FA#F8F8FF

Palette guide

How to use Sweet Lavender Bloom

Overview

The "Sweet Lavender Bloom" palette offers a sophisticated gradient of purples, evoking the serene beauty of lavender fields under an early evening sky. Anchored by a deep violet (#8A2BE2), it transitions through a softer medium purple (#9370DB) to lighter, airy shades like #C0C0D8, #E6E6FA, and a near-white (#F8F8FF). This collection is perfect for projects requiring a sense of calm, elegance, and natural tranquility. Designers can effectively use these hues for branding, sophisticated UI elements, or serene digital illustrations, creating a cohesive and visually appealing experience that brings a gentle, soothing atmosphere to any design.

Best used for

High-end beauty and skincare brands
Meditation and wellness apps
Luxury lifestyle blogs
Elegant event invitations
Interior design mood boards
Sophisticated digital art

Suggested color roles

primary

Utilize #8A2BE2 (Blue Violet) for commanding headlines, key graphical elements, or brand logos, providing a strong visual anchor.

secondary

Apply #9370DB (Medium Purple) for subheadings, secondary interactive elements, or significant content blocks to add depth.

accent

Employ #C0C0D8 (Light Grey-Purple) sparingly for subtle highlights, hover states, or decorative patterns to add refinement.

background

Use #F8F8FF (Ghost White) as a pristine, airy backdrop that ensures maximum readability for darker text and allows the purples to shine.

text

For primary body text, a dark charcoal or black (e.g., #222222) offers optimal contrast. #8A2BE2 can be used for impactful headings on light backgrounds.

Accessibility notes

Ensure sufficient contrast between any text and backgrounds, especially when using lighter shades like #E6E6FA or #C0C0D8.
Avoid placing #E6E6FA and #F8F8FF text on very light backgrounds as contrast may be insufficient for readability.
When using #8A2BE2 for text, ensure the background is light enough (e.g., #F8F8FF) to meet WCAG contrast guidelines.
Test color combinations for readability, particularly for users with color vision deficiencies, as similar purples can be challenging.

Recommended combinations

Evening Calm

Creates a soft, tranquil backdrop with a gentle transition, ideal for backgrounds and subtle branding.

#F8F8FF · #E6E6FA · #9370DB

Rich Depth

Offers a sophisticated, layered purple combination for impactful sections or artistic elements.

#8A2BE2 · #9370DB · #C0C0D8

Airy Elegance

Use the lightest color as a base, with the deep violet for strong accents and the soft lavender for supporting details.

#F8F8FF · #8A2BE2 · #E6E6FA

CSS variables

:root {
  --sweet-lavender-bloom-3-1: #8A2BE2;
  --sweet-lavender-bloom-3-2: #9370DB;
  --sweet-lavender-bloom-3-3: #C0C0D8;
  --sweet-lavender-bloom-3-4: #E6E6FA;
  --sweet-lavender-bloom-3-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-lavender-bloom-3": {
        1: "#8A2BE2",
        2: "#9370DB",
        3: "#C0C0D8",
        4: "#E6E6FA",
        5: "#F8F8FF",
      }
    }
  }
}

Hex values

Color 1#8A2BE2

Color 2#9370DB

Color 3#C0C0D8

Color 4#E6E6FA

Color 5#F8F8FF

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

4.8:1AA

5.6:1AA

1.6:1Fail

2.1:1Fail

3.1:1AA18

3.6:1AA18

3.3:1AA18

2.1:1Fail

1.4:1Fail

1.7:1Fail