Back to palettes

Palette

Ethereal Cloud Veil

A soft, airy blend of blues and whites, reminiscent of wispy clouds drifting in a serene sky.

pastelcalm5 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#DCEEFF#D2E9FF#C8E4FF

Palette guide

How to use Ethereal Cloud Veil

Overview

The Ethereal Cloud Veil palette offers a serene collection of soft, airy blues, perfect for evoking calm and purity. Centered around shades like the almost-white #F0F8FF, the gentle #E6F3FF, and the subtly deeper #C8E4FF, this palette is ideal for designs requiring a light, minimalist aesthetic. Developers will find these hex codes easy to implement for clean interfaces, while designers can leverage their tranquil nature for backgrounds, delicate illustrations, or subtle branding. This guide helps you harness the full potential of these cloud-like hues for a harmonious and inviting user experience across various platforms.

Best used for

  • Wellness and meditation apps
  • Baby product branding and websites
  • Cloud computing service interfaces
  • Minimalist website designs
  • Spa and relaxation resort branding
  • Serene interior design concepts

Suggested color roles

primary

#E6F3FF - Ideal for main content areas or large sections where a soft, clean base is needed, promoting a sense of calm and openness.

secondary

#D2E9FF - Use for secondary information panels, subtle dividers, or backgrounds of minor UI components to add gentle visual separation.

accent

#C8E4FF - Best for subtle highlights, interactive elements like hover states, or small decorative touches to provide a touch more visual weight without being overpowering.

background

#F0F8FF - The lightest shade, perfect for a pristine, airy main background, setting a clean, expansive, and inviting tone for any interface.

text

For optimal readability, pair these light colors with a dark charcoal or near-black text color (e.g., #333333 or #222222) as the palette itself lacks sufficient contrast for text.

Accessibility notes

  • Ensure sufficient contrast between text and background, as all palette colors are very light. Dark text (e.g., black or dark charcoal) is essential.
  • Avoid using the lighter palette colors (e.g., #F0F8FF on #E6F3FF) for critical UI elements or small text, as contrast will be extremely low.
  • Consider larger font sizes or bolding for important information when using the slightly darker blues for text against the lightest backgrounds.
  • Always test color combinations with WCAG contrast checkers, especially for interactive elements and crucial information display, to meet accessibility standards.

Recommended combinations

Soft Gradient

Create subtle background gradients for headers, banners, or section separators, providing gentle depth without strong contrast.

#F0F8FF · #E6F3FF · #DCEEFF

UI Elements

Use #E6F3FF for card backgrounds, #D2E9FF for borders or inactive states, and #C8E4FF for subtle button backgrounds or active indicators.

#E6F3FF · #D2E9FF · #C8E4FF

Highlight & Base

Apply #F0F8FF as the main page background, #DCEEFF for content panels, and #C8E4FF for very light borders or decorative elements.

#F0F8FF · #DCEEFF · #C8E4FF

CSS variables

:root {
  --ethereal-cloud-veil-2-1: #F0F8FF;
  --ethereal-cloud-veil-2-2: #E6F3FF;
  --ethereal-cloud-veil-2-3: #DCEEFF;
  --ethereal-cloud-veil-2-4: #D2E9FF;
  --ethereal-cloud-veil-2-5: #C8E4FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-cloud-veil-2": {
        1: "#F0F8FF",
        2: "#E6F3FF",
        3: "#DCEEFF",
        4: "#D2E9FF",
        5: "#C8E4FF",
      }
    }
  }
}

Related searches

pastel blue color schemeairy light blue palettecalm sky blue colorsminimalist blue white paletteethereal design colors

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#E6F3FF
·
Color 3#DCEEFF
·
Color 4#D2E9FF
·
Color 5#C8E4FF
·

Accessibility

Contrast checker

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

Similar palettes

More like Ethereal Cloud Veil

View all pastel
Azure Dream Canvas
Cloud Blossom Breeze
Dreamy Cloud Haze
Ethereal Celestial Cloud
Soft Cloud Touch
Whispering Cloud Veil