Palette

Garden Vista Mist

Gentle, ethereal blues and muted whites recreate the delicate, dreamlike quality of a misty garden at dawn.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Garden Vista Mist 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 Garden Vista Mist.

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

Data visualization

#ADD8E6#B0E0E6#C6E2EE#E0FFFF#F0F8FF

Palette guide

How to use Garden Vista Mist

Overview

The Garden Vista Mist palette offers a serene collection of gentle, ethereal blues and muted whites, perfectly capturing the delicate, dreamlike quality of a misty garden at dawn. This calming array features a range from the soft sky blue of #ADD8E6 and #B0E0E6, through the slightly cooler #C6E2EE, to the near-white tranquility of #E0FFFF and #F0F8FF. These hues work together to create a sense of peace, spaciousness, and understated beauty, making the Garden Vista Mist palette ideal for designs that aim to evoke calm, clarity, and a light, airy feel. It's particularly useful for conveying freshness and a touch of subtle sophistication.

Best used for

Spa and wellness branding or website design
Healthcare and medical facility interiors
Baby product packaging and nursery decor
Cloud-based software interfaces and app design
Ethereal photography backdrops or filters
Coastal-themed home decor branding

Suggested color roles

primary

Use #F0F8FF as a primary background, establishing a clean, open, and airy foundation for any design.

secondary

Employ #C6E2EE for secondary elements, panels, or large sections of content, offering subtle depth without heaviness.

accent

Introduce #ADD8E6 or #B0E0E6 sparingly for interactive elements, links, or important highlights to draw attention gently.

background

#E0FFFF provides a very light, almost white background that feels fresh and expansive.

text

For optimal readability, pair these light blues with a dark grey like charcoal or a deep navy. Avoid light text on light backgrounds.

Accessibility notes

The very light nature of this palette means most color pairings will lack sufficient contrast for small text. Prioritize larger fonts or UI elements.
When using #F0F8FF or #E0FFFF as a background, ensure text colors like #ADD8E6 are reserved for large headings only, or use a dark neutral.
For body text, a dark grey or black against any of the lighter blues is essential for WCAG AA compliance.
Be mindful of contrast for interactive elements; ensure clickable areas are clearly distinguishable, perhaps with a darker border or shadow.

Recommended combinations

Misty Morning

Perfect for creating a soft, inviting atmosphere in web backgrounds or subtle branding.

#F0F8FF · #C6E2EE · #ADD8E6

Sky & Cloud

Excellent for clean user interfaces or digital art where a sense of lightness is desired.

#E0FFFF · #B0E0E6 · #C6E2EE

Ethereal Calm

Suitable for wellness applications or designs promoting relaxation and tranquility.

#ADD8E6 · #F0F8FF · #B0E0E6

CSS variables

:root {
  --garden-vista-mist-1: #ADD8E6;
  --garden-vista-mist-2: #B0E0E6;
  --garden-vista-mist-3: #C6E2EE;
  --garden-vista-mist-4: #E0FFFF;
  --garden-vista-mist-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "garden-vista-mist": {
        1: "#ADD8E6",
        2: "#B0E0E6",
        3: "#C6E2EE",
        4: "#E0FFFF",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#B0E0E6

Color 3#C6E2EE

Color 4#E0FFFF

Color 5#F0F8FF

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

1.1:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

1.3:1Fail

1.4:1Fail

1.3:1Fail

1:1Fail

1.4:1Fail

1.3:1Fail

1:1Fail

Similar palettes

More like Garden Vista Mist

Garden Vista Mist

See it in context.

Ready when you are.

Built with Garden Vista Mist.

How to use Garden Vista Mist

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Morning

Sky & Cloud

Ethereal Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Garden Vista Mist