Back to palettes

Palette

Ethereal Cloud Swirl

Gossamer, light blues and whites that mirror the delicate, airy movement of chiffon fabric or clouds.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ethereal Cloud Swirl 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 Ethereal Cloud Swirl.

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

Data visualization

#F0F8FF#E6F3F7#D7E9F1#CCE0E8#F7FBFD

Palette guide

How to use Ethereal Cloud Swirl

Overview

The Ethereal Cloud Swirl palette offers a serene and delicate collection of light blues and near-whites, perfect for creating an atmosphere of calm and spaciousness. Dominated by hues like the almost pure white #F0F8FF and the slightly cooler #E6F3F7, it evokes the gentle movement of clouds or the softness of chiffon. Deeper shades such as #D7E9F1 and #CCE0E8 provide subtle contrast without sacrificing the overall airy feel. This palette, with its fifth color #F7FBFD echoing the lighter tones, is ideal for designs requiring a soft touch, making elements feel light and unburdened. Developers will find these hex codes easy to implement for backgrounds, subtle gradients, and UI elements where a clean, minimalist aesthetic is desired.

Best used for

  • Web design for spas, wellness, or meditation apps
  • Branding for eco-friendly or sustainable products
  • Baby product packaging or nursery decor concepts
  • Healthcare or mental health service websites
  • Minimalist UI design where spaciousness is key
  • Photography portfolios featuring light, airy subjects

Suggested color roles

primary

The lightest, almost pure white #F0F8FF, serving as the dominant background or canvas color to establish an airy, expansive feel.

secondary

A gentle, cool off-white #E6F3F7, perfect for subtle section dividers, card backgrounds, or secondary content areas, providing slight depth.

accent

The most saturated light blue #D7E9F1, used sparingly for interactive elements like subtle buttons, hover states, or progress indicators to add a touch of color without overpowering.

background

A very subtle, slightly warmer white #F7FBFD, ideal for main page backgrounds to provide a clean slate that feels welcoming and open.

text

For maximum readability against these light tones, avoid pure black. A deep charcoal or very dark gray (e.g., #333333) ensures good contrast and maintains the soft aesthetic.

Accessibility notes

  • Ensure sufficient contrast for all text elements. The palette's lightness means most text will need to be dark gray or black.
  • Use the darker blues like #CCE0E8 for larger text or headings only if paired with a very dark background, or primarily for graphical elements.
  • Avoid using light text on any of these light background colors; it will fail WCAG contrast guidelines.
  • Consider using a subtle border or shadow for interactive elements (e.g., buttons) if their background color is too close to the page background.

Recommended combinations

Airy Base

Ideal for foundational layouts, creating a sense of openness and clean space for content-heavy pages.

#F0F8FF · #F7FBFD · #E6F3F7

Subtle Depth

Great for distinguishing UI components like cards, panels, or secondary navigation, offering gentle visual hierarchy.

#E6F3F7 · #D7E9F1 · #CCE0E8

Highlight & Contrast

Use #F7FBFD as a background, #CCE0E8 for primary UI elements, and #D7E9F1 for subtle accents or hover states.

#F7FBFD · #CCE0E8 · #D7E9F1

CSS variables

:root {
  --ethereal-cloud-swirl-1: #F0F8FF;
  --ethereal-cloud-swirl-2: #E6F3F7;
  --ethereal-cloud-swirl-3: #D7E9F1;
  --ethereal-cloud-swirl-4: #CCE0E8;
  --ethereal-cloud-swirl-5: #F7FBFD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-cloud-swirl": {
        1: "#F0F8FF",
        2: "#E6F3F7",
        3: "#D7E9F1",
        4: "#CCE0E8",
        5: "#F7FBFD",
      }
    }
  }
}

Related searches

soft blue color palettelight airy design colorscalm pastel hex codesserene cloud aestheticminimalist white blue palette

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E6F3F7
·
Color 3#D7E9F1
·
Color 4#CCE0E8
·
Color 5#F7FBFD
·

Accessibility

Contrast checker

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

Similar palettes

More like Ethereal Cloud Swirl

View all pastel
Cloud Blossom Breeze
Cloud Cotton Sky
Dreamy Cloud Haze
Ethereal Celestial Cloud
Ethereal Cloud Veil
Ethereal Sky Whisp