Palette

Garden Mist Morning

Captures the cool, soft hues of a misty garden at dawn, with delicate freshness.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C4D3D4#7EA0B7#BCD2E8#A4C4B5#E8ECEB

Palette guide

How to use Garden Mist Morning

Overview

The 'Garden Mist Morning' palette captures the cool, soft hues of a misty garden at dawn, exuding delicate freshness and tranquility. It features a harmonious blend of muted blues and greens, including the serene #C4D3D4 (light blue-gray), the deeper #7EA0B7 (slate blue), and the calming #BCD2E8 (light cornflower blue). These are beautifully complemented by the gentle #A4C4B5 (sage green) and the almost-white #E8ECEB (misty white), creating an atmosphere of calm and elegance. This palette is ideal for designers seeking to evoke a sense of peace, sophistication, and a connection to a serene natural environment in their projects.

Best used for

Spa and wellness branding and websites
Minimalist and clean UI/UX design
Calming interior design schemes
Meditation or mindfulness app interfaces
Elegant stationery and print materials
Serene photography backdrops

Suggested color roles

primary

Use #7EA0B7 (slate blue) for main headers, navigation, or to define primary sections, providing a calm anchor.

secondary

Apply #A4C4B5 (sage green) for supportive elements, subheadings, or to introduce a subtle organic touch.

accent

Incorporate #BCD2E8 (light cornflower blue) for interactive elements, highlights, or to add a refreshing, airy pop.

background

Utilize #E8ECEB (misty white) or #C4D3D4 (light blue-gray) as soft, expansive backgrounds for a serene feel.

text

A dark gray or black provides the best readability for body text. #7EA0B7 can be used for larger headings on very light backgrounds.

Accessibility notes

All colors are relatively light; ensure strong contrast for text by using dark gray or black.
Avoid using #E8ECEB or #C4D3D4 for text on similarly light backgrounds, as contrast will be insufficient.
When using #A4C4B5 or #BCD2E8 as backgrounds, pair with darker text for readability.
Test all color pairings for text and interactive elements against WCAG guidelines to ensure accessibility.

Recommended combinations

Misty Serenity

Ideal for creating a peaceful and sophisticated atmosphere in web layouts or branding materials.

#E8ECEB · #7EA0B7 · #A4C4B5

Cool Dawn

Perfect for evoking a fresh, crisp morning feel, suitable for elegant digital interfaces or print.

#C4D3D4 · #BCD2E8 · #7EA0B7

Tranquil Blend

Offers a soft, harmonious balance, excellent for backgrounds, delicate illustrations, or calming user interfaces.

#A4C4B5 · #E8ECEB · #C4D3D4

CSS variables

:root {
  --garden-mist-morning-1: #C4D3D4;
  --garden-mist-morning-2: #7EA0B7;
  --garden-mist-morning-3: #BCD2E8;
  --garden-mist-morning-4: #A4C4B5;
  --garden-mist-morning-5: #E8ECEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "garden-mist-morning": {
        1: "#C4D3D4",
        2: "#7EA0B7",
        3: "#BCD2E8",
        4: "#A4C4B5",
        5: "#E8ECEB",
      }
    }
  }
}

Hex values

Color 1#C4D3D4

Color 2#7EA0B7

Color 3#BCD2E8

Color 4#A4C4B5

Color 5#E8ECEB

Accessibility

Contrast checker

1.8:1Fail

1:1Fail

1.2:1Fail

1.3:1Fail

1.8:1Fail

1.5:1Fail

2.3:1Fail

1:1Fail

1.8:1Fail

1.2:1Fail

1.3:1Fail

1.2:1Fail

1.5:1Fail

1.2:1Fail

1.6:1Fail

1.3:1Fail

2.3:1Fail

1.3:1Fail

1.6:1Fail

Similar palettes

More like Garden Mist Morning

Garden Mist Morning

See it in context.

Ready when you are.

Built with Garden Mist Morning.

How to use Garden Mist Morning

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Serenity

Cool Dawn

Tranquil Blend

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Garden Mist Morning