Back to palettes

Palette

Pastel Cloud Dream

Soft and airy pinks that conjure images of whimsical, cotton candy clouds in a dreamy sky.

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

#FFF1F6#FFE4EC#FFD8E3#FFCBD9#FFBFD0

Palette guide

How to use Pastel Cloud Dream

Overview

The Pastel Cloud Dream palette (version 7) is a monochromatic journey through soft, airy pinks, conjuring images of whimsical, cotton candy clouds. This collection features a range from very pale pink (#FFF1F6) to slightly deeper pink (#FFBFD0), including pale pink (#FFE4EC), light pink (#FFD8E3), and medium light pink (#FFCBD9). It's designed for projects that require a delicate, feminine, and romantic aesthetic, perfect for evoking feelings of warmth and tenderness. 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

  • Feminine brand identities and logos
  • Wedding themes and bridal stationery
  • Beauty products and cosmetic packaging
  • Baby girl nurseries and children's decor
  • Romantic web designs and blogs
  • Delicate digital illustrations and art

Suggested color roles

primary

Utilize very pale pink (#FFF1F6) as the lightest, most ethereal base for main sections or expansive backgrounds, reflecting purity.

secondary

Light pink (#FFD8E3) provides a gentle, soft presence, excellent for secondary backgrounds, headers, or informational panels.

accent

Slightly deeper pink (#FFBFD0) introduces a subtle focal point, ideal for calls-to-action, highlights, or small decorative details.

background

Pale pink (#FFE4EC) serves as a warm, inviting canvas, enhancing the palette's gentle glow and soft appeal.

text

A dark gray, charcoal, or a muted plum (e.g., #5D4037) will provide essential contrast for body text, ensuring legibility against the light palette.

Accessibility notes

  • This palette is extremely light; high contrast text (darker shades) is essential for all readability, especially for small text.
  • Avoid using any of these palette colors for text, as they will likely fail WCAG contrast guidelines against each other or white.
  • For interactive elements, ensure clear visual feedback for states like hover or focus, perhaps by using a darker outline or shadow.
  • When using these colors for gradients or overlays, ensure any superimposed text or icons maintain sufficient contrast.

Recommended combinations

Blush Tones

Perfect for seamless, soft gradients or layered backgrounds that create a subtle, ethereal depth.

#FFF1F6 · #FFE4EC · #FFD8E3

Pink Layers

Combine for subtle depth in UI elements, decorative patterns, or gentle visual hierarchy where softness is key.

#FFCBD9 · #FFBFD0 · #FFF1F6

Gentle Hues

Use for a cohesive, soft visual, such as card backgrounds, headers, or illustrations that need a harmonious blend.

#FFE4EC · #FFD8E3 · #FFBFD0

CSS variables

:root {
  --pastel-cloud-dream-7-1: #FFF1F6;
  --pastel-cloud-dream-7-2: #FFE4EC;
  --pastel-cloud-dream-7-3: #FFD8E3;
  --pastel-cloud-dream-7-4: #FFCBD9;
  --pastel-cloud-dream-7-5: #FFBFD0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-cloud-dream-7": {
        1: "#FFF1F6",
        2: "#FFE4EC",
        3: "#FFD8E3",
        4: "#FFCBD9",
        5: "#FFBFD0",
      }
    }
  }
}

Related searches

all pink pastel palettesoft pink color schemefeminine branding colorscotton candy aestheticdelicate ui design

Palette colors

Hex values

Color 1#FFF1F6
·
Color 2#FFE4EC
·
Color 3#FFD8E3
·
Color 4#FFCBD9
·
Color 5#FFBFD0
·

Accessibility

Contrast checker

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

Similar palettes

More like Pastel Cloud Dream

View all pastel
Cotton Candy Hues
Enchanted Bloom Veil
Enchanted Fairy Dust
Ethereal Bloom Fae
Fairy Blossom Whisper
Pastel Cloud Dream