Palette

Cloudspun Morning

Gently mimics the soft, diffused light and delicate hues of a cloudy morning sky, inspiring tranquility.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0FFFF#C1E8E6#A7D4D0#B0DDE5#F5FFFF

Palette guide

How to use Cloudspun Morning

Overview

The Cloudspun Morning palette gently mimics the soft, diffused light and delicate hues of a cloudy morning sky, inspiring tranquility. This pastel collection features the almost-white #E0FFFF and #F5FFFF, complemented by serene blue-greens like #C1E8E6 and #A7D4D0. The overall impression is one of peace and lightness, perfect for designs that aim to soothe and refresh. Designers can leverage these hex codes for ethereal branding or calm digital experiences, while developers will find them suitable for creating user interfaces that feel gentle, spacious, and inviting, with #B0DDE5 offering a slightly deeper accent.

Best used for

wellness and meditation apps
baby care brands
spa and beauty websites
eco-friendly product packaging
personal blogs with a calm aesthetic
morning routine applications

Suggested color roles

primary

#B0DDE5 - A soft, clear blue-green, serving as the most prominent color for subtle headings or interactive elements.

secondary

#C1E8E6 - A slightly lighter, supportive blue-green, ideal for sub-sections or background panels.

accent

#A7D4D0 - The deepest, most saturated tone, providing a gentle accent for subtle highlights or important, yet calm, information.

background

#F5FFFF - An extremely light, almost pure white tone (White Smoke), offering a pristine and expansive canvas.

text

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

Accessibility notes

All colors are very light; use a very dark text color (e.g., black or dark charcoal) for any body text.
Avoid using any palette colors for text against other palette colors, except possibly #A7D4D0 on #F5FFFF for very large headings.
Ensure interactive elements have clear visual feedback beyond just color, as contrast is low.
Rely on size, placement, and iconography to convey meaning, as subtle color differences may not be sufficient for all users.

Recommended combinations

Misty Layers

For creating soft, layered backgrounds or subtle dividers in a tranquil interface.

#F5FFFF · #E0FFFF · #C1E8E6

Morning Dew

To introduce a gentle depth with the blues, suitable for banners or decorative elements.

#B0DDE5 · #A7D4D0 · #F5FFFF

Airy Fresh

Ideal for content blocks or feature cards, maintaining a light and refreshing aesthetic.

#C1E8E6 · #E0FFFF · #B0DDE5

CSS variables

:root {
  --cloudspun-morning-1: #E0FFFF;
  --cloudspun-morning-2: #C1E8E6;
  --cloudspun-morning-3: #A7D4D0;
  --cloudspun-morning-4: #B0DDE5;
  --cloudspun-morning-5: #F5FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudspun-morning": {
        1: "#E0FFFF",
        2: "#C1E8E6",
        3: "#A7D4D0",
        4: "#B0DDE5",
        5: "#F5FFFF",
      }
    }
  }
}

Hex values

Color 1#E0FFFF

Color 2#C1E8E6

Color 3#A7D4D0

Color 4#B0DDE5

Color 5#F5FFFF

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.4:1Fail

1:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

1.6:1Fail

1.4:1Fail

1.1:1Fail

1.4:1Fail

1:1Fail

1.3:1Fail

1.6:1Fail

1.4:1Fail

Similar palettes

More like Cloudspun Morning

Cloudspun Morning

See it in context.

Ready when you are.

Built with Cloudspun Morning.

How to use Cloudspun Morning

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Layers

Morning Dew

Airy Fresh

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cloudspun Morning