Palette

Pastel Cloud Dream

A dreamy array of soft blues, pinks, and creams, evoking a whimsical landscape of cotton candy clouds.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#DDA0DD#FFFACD#F0FFF0#FFE4E1

Palette guide

How to use Pastel Cloud Dream

Overview

The Pastel Cloud Dream palette (version 3) presents a playful yet soft array of blues, purples, creams, and pinks, perfect for whimsical and inviting designs. This collection includes refreshing LightBlue (#ADD8E6), enchanting Plum (#DDA0DD), sunny LemonChiffon (#FFFACD), delicate Honeydew (#F0FFF0), and warm MistyRose (#FFE4E1). It evokes a whimsical landscape of cotton candy clouds, making it highly versatile for creative and friendly projects. Designers and developers can utilize these hues to craft engaging user experiences, delightful branding, or charming visual content that feels both lighthearted and sophisticated.

Best used for

Creative blogs and online portfolios
Whimsical product packaging and branding
Greeting cards and stationery design
Children's book illustrations and media
Spring event promotions and marketing
Artistic and craft-related websites

Suggested color roles

primary

Utilize LightBlue (#ADD8E6) as a fresh and inviting primary color for main sections or prominent features, setting a cheerful tone.

secondary

Plum (#DDA0DD) adds a touch of sophistication and gentle depth, ideal for secondary headings or subtle interactive elements.

accent

LemonChiffon (#FFFACD) provides a sunny, cheerful highlight, perfect for calls-to-action or small, attention-grabbing details.

background

Honeydew (#F0FFF0) serves as a very subtle, clean, and unobtrusive background, allowing other colors to gently pop.

text

A dark gray or a muted plum (e.g., #5D4037) will ensure clear readability for body text while maintaining the palette's gentle aesthetic.

Accessibility notes

Due to the lightness of many colors, ensure text on backgrounds has high contrast, especially for smaller font sizes.
Avoid using very light colors for critical information or interactive elements where clarity is paramount.
When layering colors, test contrast ratios for both foreground and background elements to meet accessibility standards.
Consider using a slightly bolder font weight for headings or emphasis if rendered in a lighter palette color.

Recommended combinations

Spring Meadow

Excellent for fresh, natural, or outdoor-themed designs, creating a bright and airy feel.

#ADD8E6 · #F0FFF0 · #FFFACD

Twilight Bloom

Combine for soft, romantic designs or decorative elements that evoke a gentle evening sky.

#DDA0DD · #FFE4E1 · #ADD8E6

Gentle Radiance

Use for delicate highlights, subtle gradients, or background textures that need a warm, luminous quality.

#FFFACD · #F0FFF0 · #FFE4E1

CSS variables

:root {
  --pastel-cloud-dream-3-1: #ADD8E6;
  --pastel-cloud-dream-3-2: #DDA0DD;
  --pastel-cloud-dream-3-3: #FFFACD;
  --pastel-cloud-dream-3-4: #F0FFF0;
  --pastel-cloud-dream-3-5: #FFE4E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-cloud-dream-3": {
        1: "#ADD8E6",
        2: "#DDA0DD",
        3: "#FFFACD",
        4: "#F0FFF0",
        5: "#FFE4E1",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#DDA0DD

Color 3#FFFACD

Color 4#F0FFF0

Color 5#FFE4E1

Accessibility

Contrast checker

1.4:1Fail

1.5:1Fail

1.3:1Fail

1.4:1Fail

2:1Fail

1.7:1Fail

1.4:1Fail

2:1Fail

1:1Fail

1.1:1Fail

1.5:1Fail

2:1Fail

1:1Fail

1.2:1Fail

1.3:1Fail

1.7:1Fail

1.1:1Fail

1.2:1Fail

Similar palettes

More like Pastel Cloud Dream

Pastel Cloud Dream

See it in context.

Ready when you are.

Built with Pastel Cloud Dream.

How to use Pastel Cloud Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Spring Meadow

Twilight Bloom

Gentle Radiance

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pastel Cloud Dream