Palette

Ethereal Dreamscape

Whisper-soft pastels create a serene, dreamlike atmosphere, like clouds at dawn.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A7CCD0#C9E1E4#E1EFF2#F5F8FA#E4D6ED

Palette guide

How to use Ethereal Dreamscape

Overview

The 'Ethereal Dreamscape' palette offers a whisper-soft collection of pastels, perfect for creating serene and dreamlike atmospheres. Dominated by gentle blue-greens like #A7CCD0 and #C9E1E4, alongside airy off-whites such as #F5F8FA and a delicate lavender-hinted #E4D6ED, this palette evokes the calming beauty of clouds at dawn. Designers and developers can leverage its light and airy quality for projects requiring a touch of peaceful elegance and subtle sophistication, ensuring a soft visual experience without harsh contrasts. It's ideal for conveying tranquility and softness in digital and print mediums.

Best used for

Wedding invitations and stationery
Spa and wellness branding
Baby product packaging
Meditation app interfaces
Serene website backgrounds
Delicate lifestyle blogs

Suggested color roles

primary

Use #A7CCD0 (a soft blue-green) as a foundational color for large sections or headers, establishing a calm and stable presence.

secondary

Employ #E4D6ED (a light lavender) for softer accents, secondary buttons, or decorative elements to add an inviting, gentle contrast.

accent

Apply #C9E1E4 (a lighter blue-green) for subtle highlights, interactive states, or delicate graphic details that require a faint pop.

background

Utilize #F5F8FA (a near-white) as the primary background color to ensure an airy, clean canvas that allows other colors to float.

text

For body text on light backgrounds, a dark charcoal or deep gray is recommended for readability. Use #A7CCD0 for headings or important text on #F5F8FA.

Accessibility notes

Ensure sufficient contrast for text on very light backgrounds like #F5F8FA; aim for dark gray or black for body text.
The very light colors, such as #E1EFF2 and #F5F8FA, have minimal contrast with each other; avoid using them for critical information side-by-side.
Use bolder font weights or larger text sizes when applying lighter colors like #C9E1E4 for information display.
Check WCAG contrast ratios for interactive elements, especially buttons and links, to ensure they are discernible.

Recommended combinations

Soft Serenity

Ideal for clean UI layouts, emphasizing space and tranquility with a gentle color hierarchy.

#F5F8FA · #E1EFF2 · #A7CCD0

Dreamy Fade

Excellent for gradients or subtle transitions in illustrations, creating a soft, ethereal depth.

#E4D6ED · #C9E1E4 · #A7CCD0

Airy Contrast

Effective for branding elements where a light background meets a soft, yet distinct, primary and secondary color.

#F5F8FA · #A7CCD0 · #E4D6ED

CSS variables

:root {
  --ethereal-dreamscape-1: #A7CCD0;
  --ethereal-dreamscape-2: #C9E1E4;
  --ethereal-dreamscape-3: #E1EFF2;
  --ethereal-dreamscape-4: #F5F8FA;
  --ethereal-dreamscape-5: #E4D6ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ethereal-dreamscape": {
        1: "#A7CCD0",
        2: "#C9E1E4",
        3: "#E1EFF2",
        4: "#F5F8FA",
        5: "#E4D6ED",
      }
    }
  }
}

Hex values

Color 1#A7CCD0

Color 2#C9E1E4

Color 3#E1EFF2

Color 4#F5F8FA

Color 5#E4D6ED

Accessibility

Contrast checker

1.3:1Fail

1.5:1Fail

1.6:1Fail

1.2:1Fail

1.3:1Fail

1.2:1Fail

1.3:1Fail

1:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.6:1Fail

1.3:1Fail

1.1:1Fail

1.3:1Fail

1.2:1Fail

1:1Fail

1.2:1Fail

1.3:1Fail

Similar palettes

More like Ethereal Dreamscape

Ethereal Dreamscape

See it in context.

Ready when you are.

Built with Ethereal Dreamscape.

How to use Ethereal Dreamscape

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Serenity

Dreamy Fade

Airy Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Ethereal Dreamscape