Back to palettes

Palette

Summer Cloud Play

Gentle blues and aquamarines capture the ephemeral beauty of clouds drifting across a summer sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Summer Cloud Play 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 Summer Cloud Play.

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

Data visualization

#D3F1EE#A5E4E4#7ACBCD#4EC4C4#2EA4A4

Palette guide

How to use Summer Cloud Play

Overview

The Summer Cloud Play palette offers a serene and refreshing collection of gentle blues and aquamarines, perfectly capturing the ephemeral beauty of clouds drifting across a summer sky. With a soft, airy light blue #D3F1EE and a deeper, grounding teal #2EA4A4, this palette is ideal for designs aiming to evoke calmness, clarity, and a modern, clean aesthetic. The progressive shades of aqua, including #A5E4E4, #7ACBCD, and #4EC4C4, provide excellent depth and versatility, allowing for subtle gradients and harmonious layering. Designers can leverage these hues for wellness apps, minimalist web interfaces, or branding for products promoting tranquility and nature. This harmonious selection ensures a balanced and inviting visual presence, perfect for conveying a sense of peace.

Best used for

  • Wellness, meditation, or mindfulness apps
  • Clean, minimalist website designs
  • Branding for spas, resorts, or relaxation products
  • Environmental or nature-focused organizations
  • Interior design concepts for serene spaces
  • Digital interfaces requiring a calming user experience

Suggested color roles

primary

A deep, calming teal (#2EA4A4), excellent for main calls to action, prominent headlines, or brand identity.

secondary

A vibrant aqua (#4EC4C4), perfect for secondary navigation, interactive elements, or complementary sections.

accent

A bright, fresh turquoise (#7ACBCD), ideal for subtle highlights, icons, or to draw attention to specific details.

background

A very light, airy blue (#D3F1EE), providing a clean, refreshing base for content.

text

A deep teal (#2EA4A4), suitable for body text on light backgrounds like #D3F1EE. For maximum contrast, use black or very dark charcoal.

Accessibility notes

  • #D3F1EE and #A5E4E4 are very light; ensure text on them has high contrast (e.g., using #2EA4A4 or black).
  • Avoid using lighter shades like #D3F1EE for text on backgrounds like #A5E4E4 due to insufficient contrast.
  • #2EA4A4 provides excellent contrast on #D3F1EE for readability.
  • Ensure interactive elements using #7ACBCD or #4EC4C4 have adequate contrast against their background.

Recommended combinations

Sky & Sea

#2EA4A4 for strong headers, #D3F1EE as a clean background, and #4EC4C4 for interactive elements.

#2EA4A4 · #D3F1EE · #4EC4C4

Gentle Flow

#A5E4E4 for soft content blocks, #7ACBCD for subtle accents, and #2EA4A4 for clear text.

#A5E4E4 · #7ACBCD · #2EA4A4

Aqua Depth

#D3F1EE as a primary background, #7ACBCD for secondary content, and #4EC4C4 for stronger emphasis.

#D3F1EE · #7ACBCD · #4EC4C4

CSS variables

:root {
  --summer-cloud-play-1: #D3F1EE;
  --summer-cloud-play-2: #A5E4E4;
  --summer-cloud-play-3: #7ACBCD;
  --summer-cloud-play-4: #4EC4C4;
  --summer-cloud-play-5: #2EA4A4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "summer-cloud-play": {
        1: "#D3F1EE",
        2: "#A5E4E4",
        3: "#7ACBCD",
        4: "#4EC4C4",
        5: "#2EA4A4",
      }
    }
  }
}

Related searches

calm blue aqua paletteserene web design colorsminimalist cool tone palettenature inspired UI colorslight summer sky colors

Palette colors

Hex values

Color 1#D3F1EE
·
Color 2#A5E4E4
·
Color 3#7ACBCD
·
Color 4#4EC4C4
·
Color 5#2EA4A4
·

Accessibility

Contrast checker

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

Similar palettes

More like Summer Cloud Play

View all cool
Celestial Azure Drift
Celestial Glow
Cloudspun Serenity
Morning Cloud Ascent
Seaside Brunch
Skyward Echoes