Back to palettes

Palette

Dreamy Cotton

An ethereal collection of light blues and turquoises, as soft and serene as wisps of cotton in the sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#E0FFFF#AFEEEE#ADD8E6#B0E0E6

Palette guide

How to use Dreamy Cotton

Overview

The Dreamy Cotton palette is an ethereal collection of light blues and turquoises, as soft and serene as wisps of cotton in the sky. Featuring tranquil hues like #F0F8FF, #E0FFFF, and #AFEEEE, this palette is perfect for designers and developers seeking to create calm, airy, and inviting digital experiences. The consistent lightness across shades such as #ADD8E6 and #B0E0E6 makes it ideal for seamless gradients and expansive backgrounds. These hex codes provide a refreshing aesthetic, fostering a sense of peace and clarity across websites, apps, or brand materials, while ensuring excellent readability when paired with dark, contrasting text.

Best used for

  • Wellness and mindfulness apps
  • Spa or relaxation brand identities
  • Baby product websites and packaging
  • Minimalist website designs
  • Cloud-themed digital art
  • Interior design inspiration platforms

Suggested color roles

primary

#AFEEEE (Pale Turquoise): A refreshing primary color for main sections or prominent UI elements, establishing calm.

secondary

#B0E0E6 (Powder Blue): A versatile supporting shade, excellent for secondary buttons, subheadings, or background panels.

accent

#ADD8E6 (Light Blue): Use for subtle highlights, interactive elements, or to add a delicate shimmer to your designs.

background

#F0F8FF (Alice Blue): A very light, almost white background that provides a clean canvas and enhances readability.

text

A deep charcoal like #333333 or pure black will provide optimal contrast and legibility against these light hues.

Accessibility notes

  • All colors are very light; ensure any text placed directly on these colors uses a very dark contrasting color for readability.
  • Avoid using #F0F8FF or #E0FFFF for text, as they lack sufficient contrast against most backgrounds.
  • Ensure interactive elements using #AFEEEE or #B0E0E6 have a clear focus state with adequate contrast.
  • When designing, always check text-to-background contrast ratios, especially for smaller font sizes.

Recommended combinations

Sky Whispers

Perfect for soft, subtle background gradients, hero sections, or large visual elements to create an airy, expansive feel.

#F0F8FF · #E0FFFF · #AFEEEE

Cotton Layers

Ideal for creating depth in UI elements like cards or modals, providing a gentle hierarchy with subtle color shifts.

#B0E0E6 · #ADD8E6 · #F0F8FF

Serene Readability

Use #AFEEEE for headings, #F0F8FF as the primary background, and dark text for a crisp, calming, and readable interface.

#AFEEEE · #F0F8FF · #ADD8E6

CSS variables

:root {
  --dreamy-cotton-1: #F0F8FF;
  --dreamy-cotton-2: #E0FFFF;
  --dreamy-cotton-3: #AFEEEE;
  --dreamy-cotton-4: #ADD8E6;
  --dreamy-cotton-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-cotton": {
        1: "#F0F8FF",
        2: "#E0FFFF",
        3: "#AFEEEE",
        4: "#ADD8E6",
        5: "#B0E0E6",
      }
    }
  }
}

Related searches

pastel blue calm paletteairy turquoise color schemedreamy light UI designsoft sky brand colorsminimalist blue white theme

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E0FFFF
·
Color 3#AFEEEE
·
Color 4#ADD8E6
·
Color 5#B0E0E6
·

Accessibility

Contrast checker

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

Similar palettes

More like Dreamy Cotton

View all pastel
Cloud Dream Whisper
Dreamy Cloudscape
Dreamy Sky Puff
Hazy Sunset Horizon
Lavender Sky Drift
Lavender Sky Dusk