Palette

Cloudless Sky Wash

The gentle, boundless expanse of a cloudless sky, with serene and soft blue shades creating a tranquil atmosphere.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloudless Sky 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 Cloudless Sky Wash.

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

Data visualization

#B0E0E6#ADD8E6#E0FFFF#87CEEB#6A5ACD

Palette guide

How to use Cloudless Sky Wash

Overview

The Cloudless Sky Wash palette captures the serene, boundless expanse of a clear sky with its tranquil and soft blue shades. Featuring the light and airy #E0FFFF, the classic sky blue of #ADD8E6, and the striking deep periwinkle of #6A5ACD, this collection inspires a calm and ethereal atmosphere. Designers can leverage these hex codes for projects requiring a sense of peace and openness, from digital backgrounds to brand identities. Developers will find these harmonious tones excellent for creating user interfaces that feel light, clean, and inviting, with #B0E0E6 providing a gentle base and #87CEEB offering a vibrant accent.

Best used for

children's brands
wellness apps
medical and healthcare websites
summer-themed designs
spa and relaxation branding
educational platforms

Suggested color roles

primary

#87CEEB - A vibrant yet soft sky blue, perfect for main headings, prominent buttons, or key visual elements.

secondary

#ADD8E6 - A slightly lighter, more muted blue, excellent for sub-sections, background panels, or supportive graphics.

accent

#6A5ACD - A deep periwinkle, offering a powerful accent for calls-to-action, important links, or focal points due to its contrast.

background

#E0FFFF - A very light, almost white tone (Honeydew), serving as a clean, expansive canvas for content.

text

A dark charcoal grey or deep navy for optimal readability against lighter blues like #E0FFFF.

Accessibility notes

Ensure any text in #6A5ACD has sufficient contrast against very light backgrounds like #E0FFFF.
Avoid using #B0E0E6 or #ADD8E6 for small text on #E0FFFF due to low contrast.
Use a color contrast checker for all text and background pairings to meet WCAG AA standards.
Provide alternative text for color-coded information, especially when using similar light blues.

Recommended combinations

Sky Gradient

For subtle background gradients or layered elements, creating an airy and open visual flow.

#E0FFFF · #ADD8E6 · #87CEEB

Pop of Depth

To highlight key information or interactive elements, using the deep periwinkle for impact.

#B0E0E6 · #87CEEB · #6A5ACD

Soft Serenity

Ideal for tranquil banners or decorative elements where a light, cohesive blue theme is desired.

#ADD8E6 · #E0FFFF · #B0E0E6

CSS variables

:root {
  --cloudless-sky-wash-1: #B0E0E6;
  --cloudless-sky-wash-2: #ADD8E6;
  --cloudless-sky-wash-3: #E0FFFF;
  --cloudless-sky-wash-4: #87CEEB;
  --cloudless-sky-wash-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudless-sky-wash": {
        1: "#B0E0E6",
        2: "#ADD8E6",
        3: "#E0FFFF",
        4: "#87CEEB",
        5: "#6A5ACD",
      }
    }
  }
}

Hex values

Color 1#B0E0E6

Color 2#ADD8E6

Color 3#E0FFFF

Color 4#87CEEB

Color 5#6A5ACD

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

1.2:1Fail

3.7:1AA18

1.1:1Fail

1.4:1Fail

1.1:1Fail

3.5:1AA18

1.4:1Fail

1.7:1Fail

5:1AA

1.2:1Fail

1.1:1Fail

1.7:1Fail

3:1AA18

3.7:1AA18

3.5:1AA18

5:1AA

3:1AA18

Similar palettes

More like Cloudless Sky Wash

Cloudless Sky Wash

See it in context.

Ready when you are.

Built with Cloudless Sky Wash.

How to use Cloudless Sky Wash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky Gradient

Pop of Depth

Soft Serenity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cloudless Sky Wash