Back to palettes

Palette

Cloud Cotton Sky

Light and airy blues, like a serene sky dotted with fluffy cotton candy clouds.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#E6F3FF#CCE7FF#B2DBFF#99CCFF

Palette guide

How to use Cloud Cotton Sky

Overview

The Cloud Cotton Sky palette delivers a serene and refreshing experience with its range of cool, airy blues. From the nearly white #F0F8FF (Alice Blue) to the more saturated #99CCFF (Light Sky Blue), these colors evoke a calm, expansive sky. Designers can utilize this palette to create clean, trustworthy, and sophisticated digital environments. The subtle variations, including #E6F3FF and #CCE7FF, allow for nuanced layering without overwhelming the user. This makes it particularly suitable for corporate websites, medical interfaces, or any project aiming for a sense of tranquility and clarity.

Best used for

  • Corporate websites and branding
  • Medical or wellness applications
  • Cloud service or tech company interfaces
  • Travel and leisure industry marketing
  • Minimalist interior design concepts
  • Educational platforms and materials

Suggested color roles

primary

Use #CCE7FF as a foundational color for large sections or main content areas, providing a soft, professional feel.

secondary

Apply #B2DBFF for secondary navigation, interactive elements, or as a slightly darker complement to the primary blue.

accent

Reserve #99CCFF for key calls-to-action or important highlights, offering the deepest blue for emphasis.

background

Utilize #F0F8FF or #E6F3FF for expansive background areas, ensuring a clean, light, and open feel.

text

For optimal readability, use a dark grey or black text color (e.g., #333333) against any of these light blues.

Accessibility notes

  • Ensure sufficient contrast when using #99CCFF for text against lighter backgrounds like #F0F8FF.
  • Avoid using lighter blues for text on similar light blue backgrounds; always pair with a dark text color.
  • The lighter shades, such as #F0F8FF and #E6F3FF, have very low contrast with white text.
  • When designing interactive elements, ensure hover states clearly differentiate from normal states due to the subtle color shifts.

Recommended combinations

Clean Interface

Excellent for modern UI design, providing a crisp, professional look.

#F0F8FF · #CCE7FF · #99CCFF

Sky Gradient

Creates a smooth, ethereal gradient effect for headers or visual elements.

#E6F3FF · #B2DBFF · #CCE7FF

Subtle Accents

Use the darkest blue for accents against the lightest backgrounds for clarity.

#F0F8FF · #99CCFF · #E6F3FF

CSS variables

:root {
  --cloud-cotton-sky-1: #F0F8FF;
  --cloud-cotton-sky-2: #E6F3FF;
  --cloud-cotton-sky-3: #CCE7FF;
  --cloud-cotton-sky-4: #B2DBFF;
  --cloud-cotton-sky-5: #99CCFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-cotton-sky": {
        1: "#F0F8FF",
        2: "#E6F3FF",
        3: "#CCE7FF",
        4: "#B2DBFF",
        5: "#99CCFF",
      }
    }
  }
}

Related searches

calm blue color schemelight sky blue paletteserene cloud colorsprofessional blue UI designminimalist cool tones

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E6F3FF
·
Color 3#CCE7FF
·
Color 4#B2DBFF
·
Color 5#99CCFF
·

Accessibility

Contrast checker

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

Similar palettes

More like Cloud Cotton Sky

View all pastel
Sky Bloom Veil
Cloud Dream Whisper
Cloudless Sky Wash
Dreamy Cloudscape Pastels
Dreamy Sky Bloom
Ethereal Cloud Swirl