Palette

Dreamy Sky Puff

An ethereal collection of light blues and purples, like fluffy clouds drifting gently in a serene, dreamlike sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dreamy Sky Puff 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 Sky Puff.

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

Data visualization

#F0F8FF#E6E6FA#D8BFD8#ADD8E6#B0E0E6

Palette guide

How to use Dreamy Sky Puff

Overview

The "Dreamy Sky Puff" palette is an ethereal collection of light blues and purples, reminiscent of fluffy clouds drifting in a serene, dreamlike sky. This pastel scheme, featuring the near-white #F0F8FF, a gentle lavender #E6E6FA, and soft blues like #ADD8E6 and #B0E0E6, is perfect for designs that aim for softness, calm, and a touch of whimsy. The inclusion of #D8BFD8 adds a unique, muted purple depth. Designers can utilize this palette for delicate branding, children's products, or any interface where a gentle, inviting atmosphere is key. Developers will find these hex codes ideal for creating soothing user experiences with a consistent, light aesthetic.

Best used for

Baby product packaging and branding
Children's clothing or toy design
Meditation app interfaces or wellness websites
Feminine or delicate branding for boutiques
Illustrations for fantasy or dream-themed content
Soft home decor accents and textile patterns

Suggested color roles

primary

#ADD8E6 - A clear, light sky blue, excellent for large background areas or primary graphical elements to establish a serene base.

secondary

#E6E6FA - A soft lavender, perfect for subheadings, subtle dividers, or areas needing a gentle touch of color.

accent

#D8BFD8 - A muted purple, ideal for small interactive elements, highlights, or decorative flourishes that need a bit more presence.

background

#F0F8FF - A very light, almost white blue, serving as an expansive and clean canvas for all content.

text

#2C3E50 (dark navy) - A deep, calming navy blue provides strong contrast for readability against all light colors in the palette.

Accessibility notes

Text in #D8BFD8 or #E6E6FA on #F0F8FF will likely have insufficient contrast for body text; use a darker text color.
For optimal readability, use a dark text color (e.g., #2C3E50) against all backgrounds in this very light palette.
Ensure interactive elements using #ADD8E6 or #B0E0E6 have clear focus states with good contrast.
Avoid pairing #ADD8E6 text on #B0E0E6 as the subtle difference may cause readability issues.

Recommended combinations

Cloud Whisper

Creates a dreamy, layered background effect or soft UI components where subtlety is key.

#F0F8FF · #E6E6FA · #ADD8E6

Gentle Play

Use for playful illustrations, decorative patterns, or to bring gentle contrast to elements.

#D8BFD8 · #ADD8E6 · #B0E0E6

Serene Base

A light base with two soft contrasting shades, suitable for headers, footers, and content blocks.

#F0F8FF · #B0E0E6 · #E6E6FA

CSS variables

:root {
  --dreamy-sky-puff-1: #F0F8FF;
  --dreamy-sky-puff-2: #E6E6FA;
  --dreamy-sky-puff-3: #D8BFD8;
  --dreamy-sky-puff-4: #ADD8E6;
  --dreamy-sky-puff-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-sky-puff": {
        1: "#F0F8FF",
        2: "#E6E6FA",
        3: "#D8BFD8",
        4: "#ADD8E6",
        5: "#B0E0E6",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#E6E6FA

Color 3#D8BFD8

Color 4#ADD8E6

Color 5#B0E0E6

Accessibility

Contrast checker

1.1:1Fail

1.6:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

1.4:1Fail

1.2:1Fail

1.6:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Dreamy Sky Puff

Dreamy Sky Puff

See it in context.

Ready when you are.

Built with Dreamy Sky Puff.

How to use Dreamy Sky Puff

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cloud Whisper

Gentle Play

Serene Base

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Dreamy Sky Puff