Palette

Dreamy Cloud Swirl

A whimsical collection of soft, airy pastels evoking the innocence and joy of childhood dreams.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dreamy Cloud Swirl 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 Dreamy Cloud Swirl.

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

Data visualization

#FFD6E1#C7EEFF#FFECB3#E0FFD4#D5C7FF

Palette guide

How to use Dreamy Cloud Swirl

Overview

The Dreamy Cloud Swirl palette is a whimsical collection of soft, airy pastels, including the playful #FFD6E1, serene #C7EEFF, and cheerful #FFECB3. This palette is designed for creators looking to evoke a sense of innocence, joy, and lightheartedness in their projects. Its diverse range of pastel hues, from the gentle pink of #FFD6E1 to the soft green of #E0FFD4 and the subtle purple of #D5C7FF, offers immense flexibility for vibrant yet delicate designs. Developers can implement these hex codes for engaging user interfaces, delightful illustrations, or playful branding that stands out with its unique charm and inviting aesthetic.

Best used for

Children's clothing and toy brands
Baby product packaging
Sweet treats and bakery branding
Creative blog or portfolio sites
Whimsical digital illustrations
Playful event invitations

Suggested color roles

primary

#FFD6E1 (Pale Pink): A warm, inviting primary tone for hero sections, main navigation, or prominent graphic elements.

secondary

#C7EEFF (Sky Blue): A refreshing and calming secondary color, excellent for subheadings, background panels, or supporting visuals.

accent

#FFECB3 (Soft Yellow): Provides a cheerful and bright accent, perfect for calls-to-action, highlights, or interactive elements.

background

#E0FFD4 (Mint Green): A gentle and airy background color that brings a fresh, natural feel to the overall design.

text

A deep charcoal like #333333 or a rich brown is recommended for clear and readable text against these light pastels.

Accessibility notes

All palette colors are very light; ensure text has strong contrast with a dark color for readability.
Avoid pairing two light pastel colors for text and background without careful contrast checking.
Use these colors primarily for backgrounds, illustrations, or large decorative elements, not small text.
Consider using a dark neutral like #333333 for all body text to ensure WCAG AA compliance.

Recommended combinations

Cotton Candy Sky

Ideal for soft, multi-color background gradients, children's art, or playful branding that needs a sweet, dreamy feel.

#FFD6E1 · #C7EEFF · #D5C7FF

Sunshine Meadow

Perfect for creating a cheerful and natural aesthetic, such as website banners or playful illustrations with a spring feel.

#FFECB3 · #E0FFD4 · #C7EEFF

Pastel Play

Use #FFD6E1 for main elements, #D5C7FF for secondary, and a dark charcoal for text to create a playful yet legible interface.

#FFD6E1 · #D5C7FF · #FFECB3

CSS variables

:root {
  --dreamy-cloud-swirl-1: #FFD6E1;
  --dreamy-cloud-swirl-2: #C7EEFF;
  --dreamy-cloud-swirl-3: #FFECB3;
  --dreamy-cloud-swirl-4: #E0FFD4;
  --dreamy-cloud-swirl-5: #D5C7FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-cloud-swirl": {
        1: "#FFD6E1",
        2: "#C7EEFF",
        3: "#FFECB3",
        4: "#E0FFD4",
        5: "#D5C7FF",
      }
    }
  }
}

Hex values

Color 1#FFD6E1

Color 2#C7EEFF

Color 3#FFECB3

Color 4#E0FFD4

Color 5#D5C7FF

Accessibility

Contrast checker

1.1:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1.4:1Fail

1.2:1Fail

1.3:1Fail

1.4:1Fail

Similar palettes

More like Dreamy Cloud Swirl

Dreamy Cloud Swirl

See it in context.

Ready when you are.

Built with Dreamy Cloud Swirl.

How to use Dreamy Cloud Swirl

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cotton Candy Sky

Sunshine Meadow

Pastel Play

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Dreamy Cloud Swirl