Back to palettes

Palette

Pastel Cloud Serene

Gentle, ethereal blues and grays that evoke the serene tranquility of a cloudy, soft sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pastel Cloud Serene 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 Pastel Cloud Serene.

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

Data visualization

#F0F8FF#E6EBF5#D2D6EB#BDC0D6#A8AABD

Palette guide

How to use Pastel Cloud Serene

Overview

The Pastel Cloud Serene palette offers a gentle and ethereal blend of blues and grays, designed to evoke the tranquility of a soft, cloudy sky. With hues like the crisp #F0F8FF, the subtle #E6EBF5, and the grounding #A8AABD, this collection is perfect for designs aiming for calm and sophistication. Developers can use these muted tones for clean, minimalist interfaces, while designers will find them ideal for creating a sense of peace and understated elegance. This palette excels in projects requiring a serene, mature pastel aesthetic without being overly vibrant.

Best used for

  • Minimalist website designs and app interfaces
  • Corporate branding seeking a calm, professional feel
  • Wellness and meditation app aesthetics
  • Luxury product packaging and presentation
  • Editorial layouts for sophisticated content
  • Interior design themes for serene living spaces

Suggested color roles

primary

Utilize #BDC0D6 as a foundational color for main sections or prominent UI elements, establishing calm.

secondary

Employ #D2D6EB for supporting blocks of content, secondary navigation, or subtle visual separation.

accent

Use #A8AABD sparingly for key interactive elements like buttons or important icons to add depth.

background

Apply #F0F8FF for expansive background areas, providing a clean, airy, and very light canvas.

text

For crisp readability, use a dark gray or black text color, ensuring strong contrast against these very light hues.

Accessibility notes

  • Most colors in this palette are very light; ensure text has high contrast by using dark charcoal or black.
  • Avoid using any of the lighter palette colors for text, especially small text, as it will lack readability.
  • When using #F0F8FF or #E6EBF5 as backgrounds, always pair with a significantly darker text color like #A8AABD or black.
  • Consider applying a subtle shadow or outline to text when placed over busy or gradient backgrounds to enhance legibility.

Recommended combinations

Subtle Depth

Create layered backgrounds or subtle visual hierarchies in UI design.

#E6EBF5 · #D2D6EB · #BDC0D6

Calm Accent

Highlight key information or interactive elements against a clean backdrop.

#F0F8FF · #A8AABD · #BDC0D6

Soft Transition

Develop smooth, gradient transitions for hero sections or brand visuals.

#D2D6EB · #BDC0D6 · #A8AABD

CSS variables

:root {
  --pastel-cloud-serene-1: #F0F8FF;
  --pastel-cloud-serene-2: #E6EBF5;
  --pastel-cloud-serene-3: #D2D6EB;
  --pastel-cloud-serene-4: #BDC0D6;
  --pastel-cloud-serene-5: #A8AABD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-cloud-serene": {
        1: "#F0F8FF",
        2: "#E6EBF5",
        3: "#D2D6EB",
        4: "#BDC0D6",
        5: "#A8AABD",
      }
    }
  }
}

Related searches

serene pastel blue graycalm cloud aestheticminimalist pastel palettesubtle blue design colorstranquil soft color scheme

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E6EBF5
·
Color 3#D2D6EB
·
Color 4#BDC0D6
·
Color 5#A8AABD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.7:1Fail
2.1:1Fail
2
1.1:1Fail
1.2:1Fail
1.5:1Fail
1.9:1Fail
3
1.3:1Fail
1.2:1Fail
1.2:1Fail
1.6:1Fail
4
1.7:1Fail
1.5:1Fail
1.2:1Fail
1.3:1Fail
5
2.1:1Fail
1.9:1Fail
1.6:1Fail
1.3:1Fail

Similar palettes

More like Pastel Cloud Serene

View all pastel
Cloud Dream Whisper
Sky Bloom Veil
Azure Dream Canvas
Cloud Cotton Sky
Cosmic Cloud Drift
Dreamy Cloudscape Pastels