Back to palettes

Palette

Cotton Cloud Morning

A gentle and ethereal palette, capturing the serene stillness of a soft, cloudy morning sky.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#F8F8FF#FFFACD#E0FFFF#E6E6FA

Palette guide

How to use Cotton Cloud Morning

Overview

The 'Cotton Cloud Morning' palette is a gentle and ethereal collection, capturing the serene stillness of a soft, cloudy morning sky. Comprising a crisp alice blue (#F0F8FF), a subtle ghost white (#F8F8FF), a warm light yellow (#FFFACD), a cool aqua (#E0FFFF), and a delicate lavender blush (#E6E6FA), this palette is perfect for designers and developers seeking a calm, airy, and minimalist aesthetic. Its muted, light tones create an expansive and tranquil user experience, ideal for projects that prioritize softness, clarity, and a refreshing sense of peace across digital interfaces and print materials.

Best used for

  • Spa and wellness branding
  • Minimalist website designs
  • Baby product packaging
  • Meditation or mindfulness apps
  • Serene interior design concepts
  • Cloud-based service interfaces

Suggested color roles

primary

#F0F8FF (Alice Blue) - A clean, expansive primary for main backgrounds, providing an airy and fresh canvas.

secondary

#E6E6FA (Lavender Blush) - Offers a gentle, complementary tone for secondary content areas or soft accents.

accent

#E0FFFF (Aqua) - A subtle, cool accent ideal for interactive elements, icons, or a touch of refreshing detail.

background

#F8F8FF (Ghost White) - An almost-white base that ensures maximum clarity and a spacious feel for content.

text

#FFFACD (Light Yellow) - Best for decorative, very large text. For readability, use a dark neutral like charcoal (#333333) or a deep grey against lighter backgrounds.

Accessibility notes

  • Due to the extreme lightness of all colors, achieving sufficient contrast for text is challenging; prioritize dark text.
  • Avoid using #FFFACD for any body text; it has very poor contrast against other light palette colors.
  • For all crucial text, use a strong contrasting color like black or very dark grey (e.g., #222222) on #F0F8FF or #F8F8FF.
  • Reserve the light colors for backgrounds, large headings, or decorative elements where contrast is less critical.

Recommended combinations

Sky Whisper

Ideal for clean, minimalist web layouts, subtle branding, or serene digital art.

#F0F8FF · #E6E6FA · #F8F8FF

Morning Glow

Great for adding a delicate warmth to backgrounds, soft illustrations, or decorative elements.

#FFFACD · #E0FFFF · #F0F8FF

Cloud Layers

Perfect for creating depth in UI components, soft gradients, or ethereal visual narratives.

#F8F8FF · #E6E6FA · #E0FFFF

CSS variables

:root {
  --cotton-cloud-morning-1: #F0F8FF;
  --cotton-cloud-morning-2: #F8F8FF;
  --cotton-cloud-morning-3: #FFFACD;
  --cotton-cloud-morning-4: #E0FFFF;
  --cotton-cloud-morning-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cotton-cloud-morning": {
        1: "#F0F8FF",
        2: "#F8F8FF",
        3: "#FFFACD",
        4: "#E0FFFF",
        5: "#E6E6FA",
      }
    }
  }
}

Related searches

airy neutral palettesoft light colorscalm serene aestheticminimalist cloud huesethereal morning design

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#F8F8FF
·
Color 3#FFFACD
·
Color 4#E0FFFF
·
Color 5#E6E6FA
·

Accessibility

Contrast checker

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

Similar palettes

More like Cotton Cloud Morning

View all neutral