Back to palettes

Palette

Ethereal Cloud Veil

Wispy and delicate shades of blue and white, capturing the ethereal beauty of a veiled, cloudy sky.

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

#E0FFFF#ADD8E6#B0E0E6#F0F8FF#C0C0C0

Palette guide

How to use Ethereal Cloud Veil

Overview

The Ethereal Cloud Veil palette offers a serene collection of cool, muted tones, perfect for creating an atmosphere of calm and sophistication. Featuring delicate blues like #ADD8E6 and #B0E0E6, alongside the airy whites of #E0FFFF and #F0F8FF, and a soft silver-grey #C0C0C0, this guide helps designers and developers craft visually soothing experiences. Its light, almost translucent quality makes it ideal for minimalist aesthetics, digital interfaces, and branding that aims for elegance and tranquility. Use these exact hex codes to ensure consistency and capture the palette's dreamy essence across various applications, from web design to print media.

Best used for

  • Minimalist website design
  • Spa and wellness branding
  • Wedding invitations and stationery
  • Baby product packaging
  • Cloud-based software UI
  • Serene interior design concepts

Suggested color roles

primary

Use #ADD8E6 as a gentle, foundational blue for main calls to action, prominent headers, or key graphical elements, establishing the palette's core identity.

secondary

Apply #B0E0E6 for supporting content blocks, secondary buttons, or subtle graphical accents, providing variation while maintaining harmony.

accent

Utilize #C0C0C0, a subtle silver-grey, for outlines, dividers, small icons, or to provide understated emphasis without overpowering the light blues.

background

Employ #F0F8FF or #E0FFFF as the primary background color, offering an expansive, clean, and airy canvas that enhances the ethereal quality.

text

For optimal readability, use a dark charcoal or near-black, such as #333333, for body text and critical information against the very light backgrounds.

Accessibility notes

  • Ensure all text, especially smaller fonts, has sufficient contrast against the very light backgrounds like #F0F8FF or #E0FFFF for WCAG compliance.
  • Avoid using #C0C0C0 for critical text or small interactive elements on light backgrounds, as its low contrast can hinder readability for some users.
  • When using #ADD8E6 or #B0E0E6 for text, verify contrast against both white and other light blue backgrounds.
  • Provide clear visual cues beyond color alone for interactive elements, such as underlines for links or hover states, to aid users with color vision deficiencies.

Recommended combinations

Sky Gradient

Ideal for soft background gradients, subtle transitions, or layered UI elements, creating a sense of depth and fluidity.

#E0FFFF · #ADD8E6 · #B0E0E6

Minimalist Focus

Perfect for clean layouts where #ADD8E6 highlights key information against a #F0F8FF background, accented by #C0C0C0 for subtle details.

#F0F8FF · #ADD8E6 · #C0C0C0

Airy Structure

Creates subtle depth and structure using #B0E0E6 for secondary panels or cards, framed by lighter tones and grounded by #C0C0C0.

#E0FFFF · #B0E0E6 · #C0C0C0

CSS variables

:root {
  --ethereal-cloud-veil-3-1: #E0FFFF;
  --ethereal-cloud-veil-3-2: #ADD8E6;
  --ethereal-cloud-veil-3-3: #B0E0E6;
  --ethereal-cloud-veil-3-4: #F0F8FF;
  --ethereal-cloud-veil-3-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-cloud-veil-3": {
        1: "#E0FFFF",
        2: "#ADD8E6",
        3: "#B0E0E6",
        4: "#F0F8FF",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

soft blue color paletteethereal web design colorspastel sky huesminimalist light blue themeairy UI color scheme

Palette colors

Hex values

Color 1#E0FFFF
·
Color 2#ADD8E6
·
Color 3#B0E0E6
·
Color 4#F0F8FF
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

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

Similar palettes

More like Ethereal Cloud Veil

View all pastel
Pastel Cloud Canvas
Chiffon Cloud Dance
Ethereal Cloud Veil
Desert Bloom Pastel
Desert Rose Mirage
Porcelain Bloom Garden