Back to palettes

Palette

Ethereal Dream Mists

A soft, enchanting collection of blues and purples, like wandering through a whimsical, misty dream.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ethereal Dream Mists 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 Dream Mists.

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

Data visualization

#9FA8DA#C6D3EF#E3F2FD#D1C4E9#B39DDB

Palette guide

How to use Ethereal Dream Mists

Overview

The 'Ethereal Dream Mists' palette offers a serene and sophisticated blend of soft blues and purples, evoking a tranquil, dreamy atmosphere. This collection, featuring shades like the gentle indigo #9FA8DA, the delicate sky blue #C6D3EF, and the almost-white #E3F2FD, is perfect for designs seeking a touch of calm elegance. Complementing these are the soothing lavender tones of #D1C4E9 and the deeper, grounding #B39DDB. Designers can leverage this palette to create spacious, airy interfaces, while developers will appreciate its harmonious nature for consistent branding across various digital platforms. It's an ideal choice for projects aiming for a light, inviting, and visually peaceful aesthetic.

Best used for

  • Spa and wellness branding
  • Children's book illustrations
  • Cloud-based software interfaces
  • Wedding invitations and decor
  • Meditation app design
  • Feminine fashion or beauty product packaging

Suggested color roles

primary

Establish a soft yet noticeable brand presence; ideal for main headers or key interactive elements using #B39DDB without being overwhelming.

secondary

Provide visual depth and structure; excellent for subheadings, navigation links, or prominent card backgrounds with #9FA8DA.

accent

Draw attention to calls-to-action, small icons, or highlights that require a gentle pop against lighter backgrounds using #D1C4E9.

background

Serve as a clean, airy canvas, promoting readability and a sense of openness across web pages or app screens with #E3F2FD.

text

For optimal readability of main body content, a dark charcoal or black is recommended. Lighter shades like #C6D3EF can be used for subtle, decorative text elements or secondary information against a darker background.

Accessibility notes

  • Ensure sufficient contrast when pairing any of the light palette colors with white text; most will fail WCAG AA guidelines.
  • Always use a dark text color (e.g., black or dark gray) for readability against #E3F2FD, #C6D3EF, and #D1C4E9 backgrounds.
  • The contrast between #B39DDB and #9FA8DA might be low for small text; test with WCAG tools to ensure compliance.
  • Reserve the palest color, #E3F2FD, strictly for backgrounds or very large, non-critical design elements to avoid readability issues.

Recommended combinations

Dreamy UI Base

An airy foundation for web interfaces, using the palest blue as background, light blue for cards, and the indigo for subtle dividers or borders.

#E3F2FD · #C6D3EF · #9FA8DA

Mystic Lavender Focus

Emphasize a soft, spiritual feel. #B39DDB for primary elements, #D1C4E9 for secondary accents, and #E3F2FD as a clean background.

#B39DDB · #D1C4E9 · #E3F2FD

Soft Gradient Blend

Create smooth, gentle gradients or visual transitions, perfect for hero sections or subtle branding elements that flow seamlessly.

#9FA8DA · #D1C4E9 · #B39DDB

CSS variables

:root {
  --ethereal-dream-mists-1: #9FA8DA;
  --ethereal-dream-mists-2: #C6D3EF;
  --ethereal-dream-mists-3: #E3F2FD;
  --ethereal-dream-mists-4: #D1C4E9;
  --ethereal-dream-mists-5: #B39DDB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-dream-mists": {
        1: "#9FA8DA",
        2: "#C6D3EF",
        3: "#E3F2FD",
        4: "#D1C4E9",
        5: "#B39DDB",
      }
    }
  }
}

Related searches

soft pastel color schemesdreamy blue purple palettecalming website colorslavender and blue designethereal UI color inspiration

Palette colors

Hex values

Color 1#9FA8DA
·
Color 2#C6D3EF
·
Color 3#E3F2FD
·
Color 4#D1C4E9
·
Color 5#B39DDB
·

Accessibility

Contrast checker

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

Similar palettes

More like Ethereal Dream Mists

View all pastel
Aura Amethyst Dream
Celestial Dream Dust
Cloud Blossom Breeze
Cloudscape Dreamy Soft
Dreamy Lavender Field
Ethereal Whispering Veil