Palette

Lilac Cloud Dream

A soothing palette of soft purples and blues, evoking the tranquil beauty of a lavender-hued cloudscape.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lilac Cloud Dream 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 Lilac Cloud Dream.

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

Data visualization

#E6E6FA#D8BFD8#DDA0DD#B0E0E6#C7CEEA

Palette guide

How to use Lilac Cloud Dream

Overview

The Lilac Cloud Dream palette is a gentle, ethereal collection of soft purples and blues, designed to evoke tranquility and serenity. From the airy #E6E6FA to the calming #B0E0E6, these hues are perfect for creating designs that feel light, dreamy, and soothing. Designers and developers can utilize the delicate interplay between shades like #D8BFD8 and #DDA0DD to build harmonious interfaces that are visually appealing and stress-reducing. This palette is especially useful for projects requiring a soft, feminine touch or an atmosphere of calm, making it ideal for wellness, baby products, or romantic themes where a gentle aesthetic is paramount.

Best used for

Spa and wellness brand identity
Baby product packaging and websites
Wedding invitations and event decor
Relaxation apps or meditation interfaces
Creative blogs with a soft, ethereal style
Children's book illustrations

Suggested color roles

primary

Use #C7CEEA for a foundational soft blue-purple, providing a calming and stable element in your design.

secondary

Employ #DDA0DD for secondary sections or key graphical elements, adding a slightly richer, more vibrant lilac touch.

accent

Apply #B0E0E6 sparingly for subtle highlights, interactive elements, or delicate iconography, introducing a refreshing cool blue note.

background

The lightest shade, #E6E6FA, is perfect for expansive, airy backgrounds, creating a sense of openness and tranquility.

text

A dark charcoal or soft black is recommended for primary text on these light backgrounds, ensuring optimal readability against the gentle hues.

Accessibility notes

Be very mindful of contrast when using light pastels; ensure text is dark enough on all background colors.
Avoid using light text colors on any of these pastels; always opt for a dark charcoal or black for readability.
Check contrast ratios carefully between any two colors from this palette, especially for interactive elements or small text.
Consider using a subtle dark border or shadow for text elements if they are placed over complex pastel gradients.

Recommended combinations

Airy Base

Creates a light, dreamy base: #E6E6FA as background, #C7CEEA for main content blocks, and #DDA0DD for subtle headers.

#E6E6FA · #C7CEEA · #DDA0DD

Soft Contrast

Ideal for a gentle visual hierarchy: #D8BFD8 for a card, #B0E0E6 for an icon, and #C7CEEA for accompanying text.

#D8BFD8 · #B0E0E6 · #C7CEEA

Dreamy Gradient

Use these three for a soft, blending gradient effect in hero sections or background elements, creating depth.

#E6E6FA · #DDA0DD · #B0E0E6

CSS variables

:root {
  --lilac-cloud-dream-1: #E6E6FA;
  --lilac-cloud-dream-2: #D8BFD8;
  --lilac-cloud-dream-3: #DDA0DD;
  --lilac-cloud-dream-4: #B0E0E6;
  --lilac-cloud-dream-5: #C7CEEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lilac-cloud-dream": {
        1: "#E6E6FA",
        2: "#D8BFD8",
        3: "#DDA0DD",
        4: "#B0E0E6",
        5: "#C7CEEA",
      }
    }
  }
}

Hex values

Color 1#E6E6FA

Color 2#D8BFD8

Color 3#DDA0DD

Color 4#B0E0E6

Color 5#C7CEEA

Accessibility

Contrast checker

1.4:1Fail

1.7:1Fail

1.2:1Fail

1.3:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.7:1Fail

1.2:1Fail

1.4:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

Similar palettes

More like Lilac Cloud Dream

Lilac Cloud Dream

See it in context.

Ready when you are.

Built with Lilac Cloud Dream.

How to use Lilac Cloud Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Airy Base

Soft Contrast

Dreamy Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lilac Cloud Dream