Back to palettes

Palette

Soft Cloud Touch

A soft, ethereal blend of sky blues and gentle whites, like a floating daydream.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6F0F5#DDEEFF#CCEEFF#BBDDFF#AACCFF

Palette guide

How to use Soft Cloud Touch

Overview

The Soft Cloud Touch palette is a dreamy collection of sky blues and gentle whites, designed to evoke a serene, floating daydream. Featuring a gradient from the airy #E6F0F5 to the deeper #AACCFF, with harmonious mid-tones like #CCEEFF, this palette provides a calming and expansive feel. It's an excellent choice for designers and developers aiming to create interfaces that are light, refreshing, and tranquil. The subtle progression of blues is ideal for conveying reliability, openness, and a sense of calm, making it suitable for a wide range of applications from digital services to brand identities.

Best used for

  • Cloud computing service websites
  • Healthcare application interfaces
  • Children's brand identity
  • Tranquil meditation apps
  • Spa and wellness digital presence
  • Educational content platforms

Suggested color roles

primary

Utilize #E6F0F5 as the main background color for a clean, expansive, and refreshing base.

secondary

Apply #DDEEFF for supporting elements, cards, or subtle section dividers, maintaining the light aesthetic.

accent

Employ #AACCFF for key interactive elements, headlines, or important icons, providing a calming yet distinct emphasis.

background

The lightest shade, #E6F0F5, serves as a pristine and airy background, perfect for a sense of openness.

text

For strong readability, use #AACCFF for headings and a dark gray or black for body text on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text, especially on the very light blues like #E6F0F5 and #DDEEFF.
  • Use #AACCFF for primary text on #E6F0F5 to achieve better readability and meet contrast standards.
  • Avoid using #DDEEFF and #CCEEFF for adjacent interactive elements without clear visual differentiation.
  • Consider providing hover states with a slightly darker blue from the palette to indicate interactivity.

Recommended combinations

Sky Gradient

Creates a smooth, ethereal transition, ideal for backgrounds, headers, or subtle graphical elements.

#E6F0F5 · #DDEEFF · #CCEEFF

Deep Blue Contrast

Provides a clear hierarchy and visual weight, suitable for calls to action, important titles, or navigation.

#E6F0F5 · #BBDDFF · #AACCFF

Airy Trio

Harmonious mid-tones for creating balanced sections, infographics, or layered UI components.

#DDEEFF · #CCEEFF · #BBDDFF

CSS variables

:root {
  --soft-cloud-touch-1: #E6F0F5;
  --soft-cloud-touch-2: #DDEEFF;
  --soft-cloud-touch-3: #CCEEFF;
  --soft-cloud-touch-4: #BBDDFF;
  --soft-cloud-touch-5: #AACCFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-cloud-touch": {
        1: "#E6F0F5",
        2: "#DDEEFF",
        3: "#CCEEFF",
        4: "#BBDDFF",
        5: "#AACCFF",
      }
    }
  }
}

Related searches

light blue color palettedreamy UI colorsserene web designcloud-inspired palettepastel blue scheme

Palette colors

Hex values

Color 1#E6F0F5
·
Color 2#DDEEFF
·
Color 3#CCEEFF
·
Color 4#BBDDFF
·
Color 5#AACCFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
2
1:1Fail
1:1Fail
1.2:1Fail
1.4:1Fail
3
1.1:1Fail
1:1Fail
1.2:1Fail
1.3:1Fail
4
1.2:1Fail
1.2:1Fail
1.2:1Fail
1.2:1Fail
5
1.4:1Fail
1.4:1Fail
1.3:1Fail
1.2:1Fail

Similar palettes

More like Soft Cloud Touch

View all pastel
Dreamy Cloud Haze
Ethereal Celestial Cloud
Ethereal Cloud Veil
Whispering Cloud Veil
Azure Dream Canvas
Cloud Berry Skies