Back to palettes

Palette

Ethereal Cloud Veil

Delicate, light blues and whites, capturing the translucent beauty and airy feel of a high, wispy cloud.

pastelminimal5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#E6F3FF#CCE7FF#B3DBFF#99CEFF

Palette guide

How to use Ethereal Cloud Veil

Overview

The Ethereal Cloud Veil palette offers a serene collection of delicate light blues, perfect for evoking a sense of calm, airiness, and sophisticated minimalism. With shades ranging from the almost-white #F0F8FF to the gentle sky blue of #CCE7FF and the slightly deeper #99CEFF, this palette is ideal for creating soft, inviting digital and physical spaces. Designers and developers can leverage its translucent beauty to build interfaces that feel expansive and unobtrusive, or brand identities that convey purity and tranquility. It's a fantastic choice for projects aiming for a light, dreamy aesthetic without being overly vibrant.

Best used for

  • Spa and wellness branding or websites
  • Baby product packaging and marketing
  • Wedding invitations and event decor
  • Minimalist UI/UX designs for apps
  • Cloud computing dashboard interfaces
  • Serene interior design mood boards

Suggested color roles

primary

Use #B3DBFF as the dominant color for larger sections or main content blocks, providing a gentle yet distinct blue foundation.

secondary

Apply #E6F3FF for supporting elements, sidebars, or less prominent sections to maintain the light, airy feel while adding subtle variation.

accent

Employ #99CEFF sparingly for subtle highlights, interactive elements like hover states, or small icons where a touch more saturation is desired without disrupting tranquility.

background

Utilize #F0F8FF as the primary background color to achieve a clean, expansive canvas, mimicking a clear, high sky.

text

Given the extreme lightness of the palette, use a dark contrasting color like charcoal grey (#333333) or deep navy for all body text to ensure readability, while reserving the palette's blues for headings or decorative elements.

Accessibility notes

  • Ensure all text (especially small text) uses a dark color with sufficient contrast against any palette background, following WCAG AA or AAA guidelines.
  • Avoid using any of the palette's colors for critical interactive elements unless paired with a strong visual indicator other than color.
  • The contrast between colors within this palette is very low; rely on size, placement, and iconography to differentiate elements rather than color alone.
  • Consider using the deepest blue, #99CEFF, for subtle borders or outlines to provide a hint of definition without overwhelming the lightness.

Recommended combinations

Airy Foundation

Ideal for creating a super-light, almost monochromatic base for websites or print, emphasizing spaciousness.

#F0F8FF · #E6F3FF · #CCE7FF

Sky Depth

Combine these for a slightly more dynamic blue gradient, suitable for headers, subtle graphics, or visual hierarchy in UI.

#E6F3FF · #B3DBFF · #99CEFF

Soft Accents

Use the lightest shade as a background, #99CEFF for a gentle accent, and #E6F3FF for secondary elements, creating a delicate contrast.

#F0F8FF · #99CEFF · #E6F3FF

CSS variables

:root {
  --ethereal-cloud-veil-1: #F0F8FF;
  --ethereal-cloud-veil-2: #E6F3FF;
  --ethereal-cloud-veil-3: #CCE7FF;
  --ethereal-cloud-veil-4: #B3DBFF;
  --ethereal-cloud-veil-5: #99CEFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-cloud-veil": {
        1: "#F0F8FF",
        2: "#E6F3FF",
        3: "#CCE7FF",
        4: "#B3DBFF",
        5: "#99CEFF",
      }
    }
  }
}

Related searches

light blue color schemespastel sky paletteairy web design colorsdreamy UI colorsminimalist blue aesthetic

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E6F3FF
·
Color 3#CCE7FF
·
Color 4#B3DBFF
·
Color 5#99CEFF
·

Accessibility

Contrast checker

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

Similar palettes

More like Ethereal Cloud Veil

View all pastel
Azure Dream Canvas
Chiffon Cloud Dance
Ethereal Cloud Veil
Pastel Cloud Canvas
Cloud Berry Skies
Desert Rose Mirage