Back to palettes

Palette

Pastel Cloud Dream

A whimsical and airy palette, like floating through a dream made of cotton candy clouds.

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

#FDC7DA#DCD0F0#A3D9E1#C3F0CC#F8F8F8

Palette guide

How to use Pastel Cloud Dream

Overview

The Pastel Cloud Dream palette (version 8) offers a whimsical and airy blend of soft pink, lavender, teal, mint, and near-white, creating a truly dreamlike atmosphere. This collection includes light pink (#FDC7DA), calming lavender (#DCD0F0), refreshing light teal (#A3D9E1), cheerful mint green (#C3F0CC), and clean GhostWhite (#F8F8F8). It's designed for projects that require a gentle, serene, and playful aesthetic, perfect for evoking feelings of calm and lightness. Designers and developers can leverage these harmonious hues to craft inviting user interfaces, elegant brand identities, or charming visual content that feels both lighthearted and refined.

Best used for

  • Spa and wellness branding and websites
  • Wedding stationery and event decor
  • Gentle mobile app interfaces and themes
  • Artistic portfolios and creative blogs
  • Serene home decor and interior design
  • Baby product designs and nursery themes

Suggested color roles

primary

Utilize light pink (#FDC7DA) as a warm, inviting, and soft base for main sections or prominent features, setting a gentle tone.

secondary

Lavender (#DCD0F0) adds a touch of calm sophistication, excellent for secondary backgrounds, headers, or informational panels.

accent

Light teal (#A3D9E1) introduces a refreshing and subtle highlight, ideal for icons, interactive elements, or small decorative details.

background

GhostWhite (#F8F8F8) serves as a clean, expansive, and very light canvas, enhancing the palette's dreamlike quality.

text

A dark gray or a deep indigo (e.g., #3F51B5) will ensure optimal readability for body text while maintaining the palette's elegant character.

Accessibility notes

  • Due to the lightness of all colors, ensure significant contrast for text elements; dark text is crucial for readability.
  • Avoid using these light colors for small, essential text or critical UI elements where clarity is paramount.
  • When layering colors, test contrast ratios for both foreground and background elements to meet WCAG standards.
  • Consider providing alternative text representations or larger hit areas for elements relying solely on color distinction.

Recommended combinations

Gentle Sky

Perfect for fresh, open layouts, backgrounds, or illustrations that evoke a clear, peaceful sky.

#A3D9E1 · #C3F0CC · #F8F8F8

Dreamy Sunset

Combine for soft, gradient accents, decorative elements, or illustrations depicting a gentle twilight.

#FDC7DA · #DCD0F0 · #F8F8F8

Ethereal Blend

Use for harmonious, layered designs, subtle gradients, or graphical elements that need a soft, cohesive look.

#DCD0F0 · #A3D9E1 · #FDC7DA

CSS variables

:root {
  --pastel-cloud-dream-8-1: #FDC7DA;
  --pastel-cloud-dream-8-2: #DCD0F0;
  --pastel-cloud-dream-8-3: #A3D9E1;
  --pastel-cloud-dream-8-4: #C3F0CC;
  --pastel-cloud-dream-8-5: #F8F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-cloud-dream-8": {
        1: "#FDC7DA",
        2: "#DCD0F0",
        3: "#A3D9E1",
        4: "#C3F0CC",
        5: "#F8F8F8",
      }
    }
  }
}

Related searches

pastel dream palettesoft pink lavendercalm ui colorswhimsical brandinglight teal mint white

Palette colors

Hex values

Color 1#FDC7DA
·
Color 2#DCD0F0
·
Color 3#A3D9E1
·
Color 4#C3F0CC
·
Color 5#F8F8F8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
2
1:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
3
1.1:1Fail
1.1:1Fail
1.2:1Fail
1.5:1Fail
4
1.2:1Fail
1.2:1Fail
1.2:1Fail
1.2:1Fail
5
1.4:1Fail
1.4:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Pastel Cloud Dream

View all Pastel
Evening Dewdrop Garden
Frost Kissed Petals
Macaron Cloud Dream
Azure Serene Dawn
Cherry Blossom Festival
Candy Floss Sunset