Back to palettes

Palette

Cloudscape Dreamy Soft

Billowing, light hues that paint a picture of a tranquil and expansive cloudscape.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloudscape Dreamy Soft 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 Cloudscape Dreamy Soft.

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

Data visualization

#ADD8E6#F0FFFF#FFF0F5#E6E6FA#F5F5DC

Palette guide

How to use Cloudscape Dreamy Soft

Overview

The Cloudscape Dreamy Soft palette paints a picture of tranquil, expansive cloudscapes with its collection of exceptionally light and airy hues. Featuring the very pale blues of #F0FFFF and #E6E6FA, a hint of soft pink in #FFF0F5, and a touch of creamy beige from #F5F5DC, this palette evokes a serene and ethereal mood. Designers will find these hex codes perfect for creating gentle, inviting digital spaces or soft, understated branding. Developers can utilize these light tones to craft user interfaces that feel spacious, clean, and calming, making #ADD8E6 a potential subtle accent amidst the almost-white base colors.

Best used for

  • baby product branding
  • wedding stationery
  • spa and wellness websites
  • minimalist interior design concepts
  • delicate art installations
  • personal blogs and portfolios

Suggested color roles

primary

#ADD8E6 - A gentle light blue, serving as the most substantial color for subtle accents or primary graphic elements.

secondary

#E6E6FA - A very light lavender-blue, ideal for secondary backgrounds, subtle dividers, or hover states.

accent

#FFF0F5 - A delicate, almost white blush pink, perfect for highlighting very subtle details or adding a touch of warmth.

background

#F0FFFF - An extremely light, almost pure white tone (Honeydew), providing a spacious and pristine canvas.

text

A dark charcoal grey or deep navy, as the palette's colors are too light for body text readability.

Accessibility notes

  • All colors in this palette are extremely light; use a dark text color (e.g., black or dark charcoal) for any body text.
  • Ensure interactive elements have a clear visual state change, as color contrast within the palette is very low.
  • Avoid using any palette colors for text against other palette colors, except possibly #ADD8E6 on #F0FFFF for very large headings.
  • Rely on size, placement, and iconography, not just color, to convey meaning due to the subtle differences.

Recommended combinations

Airy Canvas

For creating expansive, dreamy backgrounds and subtle layered effects, almost like clouds.

#F0FFFF · #E6E6FA · #FFF0F5

Soft Contrast

To introduce a gentle blue element against warmer, light neutrals, maintaining a soft overall feel.

#ADD8E6 · #F5F5DC · #F0FFFF

Misty Horizon

For delicate gradients or visual transitions where a seamless, ethereal blend is desired.

#E6E6FA · #FFF0F5 · #ADD8E6

CSS variables

:root {
  --cloudscape-dreamy-soft-1: #ADD8E6;
  --cloudscape-dreamy-soft-2: #F0FFFF;
  --cloudscape-dreamy-soft-3: #FFF0F5;
  --cloudscape-dreamy-soft-4: #E6E6FA;
  --cloudscape-dreamy-soft-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudscape-dreamy-soft": {
        1: "#ADD8E6",
        2: "#F0FFFF",
        3: "#FFF0F5",
        4: "#E6E6FA",
        5: "#F5F5DC",
      }
    }
  }
}

Related searches

pastel cloud palettedreamy soft colorsminimalist light blue pinkairy web design colorsserene branding hues

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#F0FFFF
·
Color 3#FFF0F5
·
Color 4#E6E6FA
·
Color 5#F5F5DC
·

Accessibility

Contrast checker

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

Similar palettes

More like Cloudscape Dreamy Soft

View all pastel