Palette

Cloud Kissed Lavender

Soft, romantic purples and light blues that perfectly capture the essence of a tranquil lavender field under a gentle sky.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#E6E6FA#D8BFD8#DDA0DD#BA55D3

Palette guide

How to use Cloud Kissed Lavender

Overview

The Cloud Kissed Lavender palette offers soft, romantic purples and light blues, perfectly capturing the essence of a tranquil lavender field under a gentle sky. Ranging from the deep, vibrant #BA55D3 to the delicate #F0F8FF and #E6E6FA, with charming mid-tones like #D8BFD8 and #DDA0DD, this collection is ideal for evoking calm and whimsy. Designers and developers can leverage these ethereal hues to create enchanting digital experiences, romantic branding, or serene physical spaces. The palette's gentle yet expressive nature is perfect for projects seeking a feminine, dreamy, and subtly luxurious aesthetic, ensuring a captivating visual presence.

Best used for

Romantic wedding themes
Feminine beauty brands
Children's book illustrations
Spring fashion collections
Spa and relaxation products
Creative lifestyle blogs

Suggested color roles

primary

Use #BA55D3 as the dominant, vibrant color for main headers, key calls-to-action, or strong brand elements. It provides a luxurious focal point.

secondary

Employ #DDA0DD for supporting sections, subheadings, or secondary content. It offers a softer yet distinct purple presence.

accent

Apply #D8BFD8 for subtle highlights, interactive states, or decorative elements. Its lighter, muted lavender provides gentle contrast.

background

Utilize #F0F8FF for clean, expansive backgrounds. This very light, almost white-blue creates an airy, dreamlike canvas.

text

For body text on light backgrounds like #F0F8FF, #BA55D3 provides good readability. For darker backgrounds, a crisp white is recommended.

Accessibility notes

Ensure #BA55D3 text on #F0F8FF or #E6E6FA backgrounds meets WCAG contrast standards. Other purple-on-purple combinations will likely fail.
Avoid using #DDA0DD or #D8BFD8 text on the lightest backgrounds, as contrast will be insufficient.
Always use a contrast checker to verify all text and interactive element color combinations for accessibility compliance.
For critical text elements, consider using a very dark charcoal or black if palette colors don't provide enough contrast on the lightest shades.

Recommended combinations

Lavender Bloom

Ideal for a vibrant yet soft brand. #BA55D3 for primary, #DDA0DD for secondary, and #F0F8FF for a dreamy background.

#BA55D3 · #DDA0DD · #F0F8FF

Misty Petals

Excellent for subtle gradients or delicate illustrations, evoking softness and calm.

#E6E6FA · #D8BFD8 · #DDA0DD

Sky Kissed

Creates an airy, expansive feel. #DDA0DD for grounding, #E6E6FA for main content, and #F0F8FF as a soft background.

#DDA0DD · #E6E6FA · #F0F8FF

CSS variables

:root {
  --cloud-kissed-lavender-1: #F0F8FF;
  --cloud-kissed-lavender-2: #E6E6FA;
  --cloud-kissed-lavender-3: #D8BFD8;
  --cloud-kissed-lavender-4: #DDA0DD;
  --cloud-kissed-lavender-5: #BA55D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-kissed-lavender": {
        1: "#F0F8FF",
        2: "#E6E6FA",
        3: "#D8BFD8",
        4: "#DDA0DD",
        5: "#BA55D3",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#E6E6FA

Color 3#D8BFD8

Color 4#DDA0DD

Color 5#BA55D3

Accessibility

Contrast checker

1.1:1Fail

1.6:1Fail

1.9:1Fail

3.7:1AA18

1.1:1Fail

1.4:1Fail

1.7:1Fail

3.2:1AA18

1.6:1Fail

1.4:1Fail

1.2:1Fail

2.3:1Fail

1.9:1Fail

1.7:1Fail

1.2:1Fail

1.9:1Fail

3.7:1AA18

3.2:1AA18

2.3:1Fail

1.9:1Fail

Similar palettes

More like Cloud Kissed Lavender

Cloud Kissed Lavender

See it in context.

Ready when you are.

Built with Cloud Kissed Lavender.

How to use Cloud Kissed Lavender

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Lavender Bloom

Misty Petals

Sky Kissed

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cloud Kissed Lavender