Back to palettes

Palette

Gossamer Cloud Veil

A light, airy collection of soft blues and purples, like ethereal clouds drifting across a gentle morning sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gossamer Cloud Veil 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 Gossamer Cloud Veil.

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

Data visualization

#BEE3DB#F0FFF4#D7BCE8#C5E0D8#A5DEE4

Palette guide

How to use Gossamer Cloud Veil

Overview

The Gossamer Cloud Veil palette is a collection of soft, ethereal pastels, perfect for creating a sense of calm, dreaminess, and delicate lightness. Featuring the serene #BEE3DB, the almost-white #F0FFF4, the gentle lavender of #D7BCE8, a refreshing #C5E0D8, and the slightly deeper #A5DEE4, this palette evokes a tranquil morning sky. It's an excellent choice for designs that aim for a gentle, understated elegance, providing a soothing and airy aesthetic that feels both modern and timeless.

Best used for

  • Baby product branding and nurseries
  • Spa and wellness retreat websites
  • Wedding invitations and decor with a delicate touch
  • Feminine fashion or lingerie brands
  • Tranquil digital interfaces and app designs
  • Art and photography portfolios emphasizing softness

Suggested color roles

primary

Use #A5DEE4 for main sections or larger design elements, providing a calming yet noticeable presence.

secondary

Employ #BEE3DB or #C5E0D8 for supporting graphics, background sections, or subtle accents, maintaining harmony.

accent

Apply #D7BCE8 for a delicate touch of color in illustrations, icons, or subtle highlights.

background

Utilize #F0FFF4 for clean, expansive backgrounds, creating an airy and extremely light foundation.

text

For readability, always use a dark gray or charcoal for text on these very light backgrounds. Avoid white or light gray text entirely.

Accessibility notes

  • Text contrast is critical. Use only dark gray or black text on these light backgrounds to ensure readability.
  • Avoid using any of the palette's colors for text on the #F0FFF4 background; the contrast will be insufficient.
  • For interactive elements, ensure a clear visual distinction, as color contrast alone may be challenging.
  • Always test color combinations with accessibility tools to ensure sufficient contrast for all users.

Recommended combinations

Ethereal Blend

Create soft, dreamy gradients or layered elements that evoke clouds and air.

#F0FFF4 · #BEE3DB · #C5E0D8

Dreamy Contrast

For subtle distinctions between sections or to highlight a delicate element.

#A5DEE4 · #D7BCE8 · #F0FFF4

Gentle Sky

A balanced trio for main branding, offering light, airy, and calming tones.

#A5DEE4 · #C5E0D8 · #F0FFF4

CSS variables

:root {
  --gossamer-cloud-veil-1: #BEE3DB;
  --gossamer-cloud-veil-2: #F0FFF4;
  --gossamer-cloud-veil-3: #D7BCE8;
  --gossamer-cloud-veil-4: #C5E0D8;
  --gossamer-cloud-veil-5: #A5DEE4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gossamer-cloud-veil": {
        1: "#BEE3DB",
        2: "#F0FFF4",
        3: "#D7BCE8",
        4: "#C5E0D8",
        5: "#A5DEE4",
      }
    }
  }
}

Related searches

pastel cloud colorssoft ethereal palettedreamy baby colorslight delicate huescalming pastel scheme

Palette colors

Hex values

Color 1#BEE3DB
·
Color 2#F0FFF4
·
Color 3#D7BCE8
·
Color 4#C5E0D8
·
Color 5#A5DEE4
·

Accessibility

Contrast checker

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

Similar palettes

More like Gossamer Cloud Veil

View all pastel
Dreamy Sky Puff
Ethereal Bloom Mist
Aurora Shimmer
Blushing Petal Softness
Celestial Dream Dust
Cloud Dream Whisper