Palette

Pastel Cloud Dream

Gentle, airy hues paint a whimsical, dreamlike landscape of cotton candy clouds and soft skies.

pastelcalm5 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

#FFB7C5#FFD8D0#E6F7FF#D1FFB8#F8FFB7

Palette guide

How to use Pastel Cloud Dream

Overview

The Pastel Cloud Dream palette (version 6) paints a whimsical, dreamlike landscape with gentle, airy hues, reminiscent of cotton candy clouds and soft skies. This collection features sweet light pink (#FFB7C5), warm peach (#FFD8D0), refreshing light sky blue (#E6F7FF), cheerful mint green (#D1FFB8), and a subtle pale yellow-green (#F8FFB7). It's designed for projects that require a light, sweet, and approachable aesthetic, perfect for evoking feelings of joy and tranquility. Designers and developers can utilize these harmonious colors to craft inviting user interfaces, delightful branding, or charming visual content that feels both lighthearted and refined.

Best used for

Sweet treat branding and packaging
Baby apparel and accessories design
Spring fashion and beauty campaigns
Whimsical stationery and greeting cards
Cheerful mobile app themes and games
Children's party decor and invitations

Suggested color roles

primary

Utilize light pink (#FFB7C5) as a sweet, inviting base for main sections or prominent features, setting a gentle tone.

secondary

Light sky blue (#E6F7FF) adds a refreshing, airy contrast, excellent for secondary backgrounds, headers, or informational panels.

accent

Mint green (#D1FFB8) introduces a cheerful, natural highlight, ideal for icons, interactive elements, or small decorative details.

background

Pale yellow-green (#F8FFB7) serves as a subtle, sunny, and calming backdrop, enhancing the palette's dreamlike quality.

text

A dark gray or a rich berry tone (e.g., #8B0000) will ensure optimal readability for body text while maintaining the palette's charming character.

Accessibility notes

This is a very light palette; ensure dark, legible text is used for all critical information to meet contrast standards.
Avoid using any of the palette colors for small text elements, as they will likely fail WCAG contrast guidelines.
For interactive elements, ensure hover/focus states provide a clear visual change, perhaps by darkening the element slightly.
Consider using a slightly bolder font weight for headings or emphasis if they must be rendered in a lighter palette color to improve readability.

Recommended combinations

Cotton Candy

Perfect for soft, sweet designs, confectionery themes, or any visual needing a delicate, edible appeal.

#FFB7C5 · #FFD8D0 · #E6F7FF

Spring Sky

Great for creating fresh, open, or nature-inspired layouts, maintaining an airy and tranquil mood.

#E6F7FF · #D1FFB8 · #F8FFB7

Dreamy Layers

Combine for layered graphical elements, soft illustrations, or UI components needing subtle depth and harmony.

#FFD8D0 · #FFB7C5 · #D1FFB8

CSS variables

:root {
  --pastel-cloud-dream-6-1: #FFB7C5;
  --pastel-cloud-dream-6-2: #FFD8D0;
  --pastel-cloud-dream-6-3: #E6F7FF;
  --pastel-cloud-dream-6-4: #D1FFB8;
  --pastel-cloud-dream-6-5: #F8FFB7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-cloud-dream-6": {
        1: "#FFB7C5",
        2: "#FFD8D0",
        3: "#E6F7FF",
        4: "#D1FFB8",
        5: "#F8FFB7",
      }
    }
  }
}

Hex values

Color 1#FFB7C5

Color 2#FFD8D0

Color 3#E6F7FF

Color 4#D1FFB8

Color 5#F8FFB7

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.6:1Fail

1.2:1Fail

1.5:1Fail

1.2:1Fail

1:1Fail

1.5:1Fail

1.2:1Fail

1:1Fail

1.1:1Fail

1.6:1Fail

1.2:1Fail

1:1Fail

1.1: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

Cotton Candy

Spring Sky

Dreamy Layers

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pastel Cloud Dream