Palette

Soft Cloud Wash

Gentle, dreamy blues and purples, like a delicate watercolor painting of a serene, cloudy sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Soft Cloud Wash 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 Soft Cloud Wash.

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

Data visualization

#E9F6F7#DCE9F2#CDDCEF#BDCCE7#AABBDD

Palette guide

How to use Soft Cloud Wash

Overview

The Soft Cloud Wash palette presents a collection of gentle, dreamy blues and subtle purples, reminiscent of a delicate watercolor painting of a serene, cloudy sky. Ranging from the light #E9F6F7 to the richer #AABBDD, with intermediate shades like #CDDCEF, this palette is ideal for designers and developers aiming to evoke calm, tranquility, and an ethereal aesthetic. Its muted yet sophisticated tones are perfect for creating soft, inviting user experiences across digital platforms, print materials, or branding initiatives that seek to convey peace and introspective beauty. The subtle color shifts ensure a harmonious and pleasing visual flow.

Best used for

Wellness and mindfulness applications
Art and photography portfolios
Tranquil digital experiences
Educational and learning platforms
Soft, inviting brand identities
Elegant print collateral

Suggested color roles

primary

Use #E9F6F7 as the expansive, light background color, setting a serene and clean tone.

secondary

Apply #DCE9F2 for subtle content sections, card backgrounds, or secondary navigation elements.

accent

Employ #AABBDD for key headings, interactive elements, or important data visualization, providing gentle emphasis.

background

The lightest shade, #E9F6F7, serves as an excellent, airy base, ensuring content feels light and uncluttered.

text

For clear readability, use #AABBDD for headings and a dark charcoal or black for body text on lighter backgrounds.

Accessibility notes

Ensure adequate contrast for text, especially when using lighter shades like #E9F6F7 and #DCE9F2.
Utilize #AABBDD for primary text on the lightest backgrounds to meet contrast requirements.
Avoid using adjacent very light shades for interactive elements without clear hover or focus states.
For critical information, consider using #BDCCE7 or #AABBDD against #E9F6F7 for better legibility.

Recommended combinations

Gentle Fade

Creates a smooth, ethereal progression, ideal for soft gradients, headers, or background textures.

#E9F6F7 · #DCE9F2 · #CDDCEF

Depth & Calm

Provides subtle yet impactful contrast for important sections, calls to action, or visual hierarchy.

#E9F6F7 · #BDCCE7 · #AABBDD

Watercolor Blend

Harmonious mid-tones suitable for layering, infographics, or creating balanced visual interest.

#DCE9F2 · #CDDCEF · #BDCCE7

CSS variables

:root {
  --soft-cloud-wash-1: #E9F6F7;
  --soft-cloud-wash-2: #DCE9F2;
  --soft-cloud-wash-3: #CDDCEF;
  --soft-cloud-wash-4: #BDCCE7;
  --soft-cloud-wash-5: #AABBDD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-cloud-wash": {
        1: "#E9F6F7",
        2: "#DCE9F2",
        3: "#CDDCEF",
        4: "#BDCCE7",
        5: "#AABBDD",
      }
    }
  }
}

Hex values

Color 1#E9F6F7

Color 2#DCE9F2

Color 3#CDDCEF

Color 4#BDCCE7

Color 5#AABBDD

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.7:1Fail

1.1:1Fail

1.3:1Fail

1.6:1Fail

1.3:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.5:1Fail

1.3:1Fail

1.2:1Fail

1.7:1Fail

1.6:1Fail

1.4:1Fail

1.2:1Fail

Similar palettes

More like Soft Cloud Wash

Soft Cloud Wash

See it in context.

Ready when you are.

Built with Soft Cloud Wash.

How to use Soft Cloud Wash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Gentle Fade

Depth & Calm

Watercolor Blend

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Soft Cloud Wash