Palette

Ethereal Sky Whisp

Delicate blues and whites, capturing the light and airy feel of a cloud drifting across a clear sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ethereal Sky Whisp 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 Sky Whisp.

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

Data visualization

#F0F8FF#E0FFFF#ADD8E6#DCDCDC#AFEEEE

Palette guide

How to use Ethereal Sky Whisp

Overview

The Ethereal Sky Whisp palette captures the delicate and airy essence of clouds drifting across a clear sky, blending soft blues with gentle greys. This versatile palette includes the pristine #F0F8FF (Alice Blue) and #E0FFFF (Light Cyan), offering bright, clean bases. The subtle inclusion of #DCDCDC (Gainsboro) introduces a sophisticated, neutral grey, complementing the light blues like #ADD8E6 (Light Blue) and #AFEEEE (Pale Turquoise). Designers can leverage this palette to create serene, clean, and modern interfaces, branding, or editorial content. It’s particularly effective for projects that require a sense of calm, spaciousness, and understated elegance, providing a refreshing alternative to stark whites. Developers will find these hex codes useful for creating harmonious UI elements and backgrounds.

Best used for

Minimalist website designs and portfolios
Photography and art gallery online presentations
Wellness and meditation app interfaces
Baby product or children's wear branding
Cloud storage or data management dashboards
Clean, modern architectural rendering backgrounds

Suggested color roles

primary

A soft, inviting light blue, #ADD8E6, suitable for main headings, calls-to-action, or key graphical elements, drawing attention gently.

secondary

A pale turquoise, #AFEEEE, excellent for subheadings, secondary buttons, or decorative elements, offering a harmonious contrast.

accent

A light, neutral grey, #DCDCDC, perfect for subtle highlights, borders, or hover states, adding a touch of sophistication without distracting.

background

A very light Alice Blue, #F0F8FF, providing an expansive, clean canvas that enhances content readability and offers an airy feel.

text

A dark, readable charcoal grey like #36454F is recommended for body text to ensure strong contrast against the light background colors.

Accessibility notes

Ensure text contrast when using #ADD8E6 or #AFEEEE on lighter backgrounds like #F0F8FF or #E0FFFF.
#DCDCDC (Gainsboro) should not be used as text on light backgrounds due to insufficient contrast.
Always use a dark text color (e.g., black or dark grey) for body content against any of the palette's light blues or greys.
Check contrast ratios carefully, especially for smaller text or non-essential elements using lighter colors.

Recommended combinations

Cloudy Sky

Ideal for subtle background patterns, section dividers, or a minimalist aesthetic that uses soft transitions.

#F0F8FF · #E0FFFF · #DCDCDC

Aqua Grey

Great for UI elements like cards, navigation items, or data display where a soft, cool, and neutral balance is desired.

#ADD8E6 · #AFEEEE · #DCDCDC

Sky Drift

Perfect for illustrating light, airy concepts, or creating a fresh, clean visual identity.

#F0F8FF · #ADD8E6 · #AFEEEE

CSS variables

:root {
  --ethereal-sky-whisp-1: #F0F8FF;
  --ethereal-sky-whisp-2: #E0FFFF;
  --ethereal-sky-whisp-3: #ADD8E6;
  --ethereal-sky-whisp-4: #DCDCDC;
  --ethereal-sky-whisp-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-sky-whisp": {
        1: "#F0F8FF",
        2: "#E0FFFF",
        3: "#ADD8E6",
        4: "#DCDCDC",
        5: "#AFEEEE",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#E0FFFF

Color 3#ADD8E6

Color 4#DCDCDC

Color 5#AFEEEE

Accessibility

Contrast checker

1:1Fail

1.4:1Fail

1.3:1Fail

1.2:1Fail

1:1Fail

1.4:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Ethereal Sky Whisp

Ethereal Sky Whisp

See it in context.

Ready when you are.

Built with Ethereal Sky Whisp.

How to use Ethereal Sky Whisp

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cloudy Sky

Aqua Grey

Sky Drift

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Ethereal Sky Whisp