Palette

Lavender Sky Drift

Soft purples and blues blend to create a dreamy atmosphere, like clouds drifting across a lavender sunset sky.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lavender Sky Drift 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 Sky Drift.

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

Data visualization

#E0E6FA#D8BFD8#DDA0DD#BA55D3#9966CC

Palette guide

How to use Lavender Sky Drift

Overview

The "Lavender Sky Drift" palette (ID: lavender-sky-drift-2) is a soft and serene collection of purples that evoke the gentle movement of clouds across a lavender-hued sky. From the airy #E0E6FA to the deeper #9966CC, this palette offers a harmonious blend of light and medium tones, including #D8BFD8, #DDA0DD, and #BA55D3. It's an excellent choice for designs that aim to convey tranquility, dreaminess, and a touch of subtle elegance. Designers can utilize these shades to create calming interfaces, inviting branding, or soothing digital content that resonates with peaceful introspection and natural beauty.

Best used for

Relaxation and wellness apps
Cloud photography websites
Gentle children's book illustrations
Spa and beauty product packaging
Serene personal journaling apps
Artistic and creative portfolios

Suggested color roles

primary

#9966CC - A deep, grounding purple, ideal for main headings, important UI elements, or brand logos, providing a sense of stability.

secondary

#BA55D3 - A vibrant medium purple, perfect for subheadings, secondary navigation, or supporting graphics, adding a gentle energy.

accent

#DDA0DD - A light medium purple-pink, excellent for calls-to-action, buttons, or subtle highlights, adding a soft, inviting pop.

background

#E0E6FA - A very light, almost white lavender, providing an expansive and calming backdrop that enhances content readability.

text

#9966CC - This deep purple offers strong readability for body text on very light backgrounds, or a dark charcoal for contrast.

Accessibility notes

Ensure #9966CC text on #E0E6FA backgrounds meets WCAG AA contrast standards; it should pass.
Avoid using #D8BFD8 or #DDA0DD for small text on #E0E6FA due to potential readability issues.
Interactive elements should clearly stand out using #9966CC or #BA55D3.
Be mindful of color combinations for users with color vision deficiencies, especially similar purple tones.

Recommended combinations

Misty Layers

Creates smooth, atmospheric background gradients or layered UI elements, evoking a soft sky.

#E0E6FA · #D8BFD8 · #DDA0DD

Anchored Content

Ideal for main content blocks and headings, providing strong readability with deep, calming purples.

#E0E6FA · #9966CC · #BA55D3

Soft Interaction

Suited for interactive elements or subtle highlights, offering a gentle yet clear visual cue.

#D8BFD8 · #DDA0DD · #BA55D3

CSS variables

:root {
  --lavender-sky-drift-2-1: #E0E6FA;
  --lavender-sky-drift-2-2: #D8BFD8;
  --lavender-sky-drift-2-3: #DDA0DD;
  --lavender-sky-drift-2-4: #BA55D3;
  --lavender-sky-drift-2-5: #9966CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-sky-drift-2": {
        1: "#E0E6FA",
        2: "#D8BFD8",
        3: "#DDA0DD",
        4: "#BA55D3",
        5: "#9966CC",
      }
    }
  }
}

Hex values

Color 1#E0E6FA

Color 2#D8BFD8

Color 3#DDA0DD

Color 4#BA55D3

Color 5#9966CC

Accessibility

Contrast checker

1.4:1Fail

1.7:1Fail

3.2:1AA18

3.3:1AA18

1.4:1Fail

1.2:1Fail

2.3:1Fail

2.4:1Fail

1.7:1Fail

1.2:1Fail

1.9:1Fail

2:1Fail

3.2:1AA18

2.3:1Fail

1.9:1Fail

1:1Fail

3.3:1AA18

2.4:1Fail

2:1Fail

1:1Fail

Similar palettes

More like Lavender Sky Drift