Back to palettes

Palette

Morning Haze Pastel

A gentle, dreamlike palette reflecting the soft, muted colors of a peaceful morning haze.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Morning Haze Pastel 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 Morning Haze Pastel.

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

Data visualization

#E0E7E9#B8D8D8#A4B0BE#C1C8E4#F4CFD2

Palette guide

How to use Morning Haze Pastel

Overview

The Morning Haze Pastel palette offers a serene and ethereal collection of soft, muted tones perfect for creating calm and inviting digital experiences. Featuring a tranquil light blue-grey (#E0E7E9), a gentle teal-grey (#B8D8D8), a sophisticated medium blue-grey (#A4B0BE), a dreamy lavender-blue (#C1C8E4), and a delicate blush pink (#F4CFD2), this palette evokes the peaceful glow of an early morning sky. Designers and developers can leverage these hues to build interfaces that feel light, airy, and non-intrusive. It's an excellent choice for projects requiring a touch of elegance and quiet sophistication, ensuring a soothing visual journey for users.

Best used for

  • Wellness and meditation apps
  • Baby product branding or websites
  • Wedding invitations and event design
  • Minimalist lifestyle blogs or e-commerce
  • Spa and beauty salon branding
  • Art gallery or photography portfolio sites

Suggested color roles

primary

#E0E7E9 - Ideal as a foundational canvas color for backgrounds and large UI areas, offering a clean, expansive feel.

secondary

#A4B0BE - Excellent for section headers, secondary buttons, or subtle dividing lines, providing gentle structure.

accent

#F4CFD2 - Use sparingly for call-to-action elements, interactive states, or decorative illustrations to add warmth and a soft highlight.

background

#E0E7E9 - Serves as a light, airy base for web pages or applications, promoting readability and a sense of openness.

text

A dark charcoal or near-black, such as #333333, provides optimal contrast against all palette colors for body text and headings.

Accessibility notes

  • Ensure sufficient contrast between text and background colors, especially when using #E0E7E9 or #F4CFD2 as backgrounds.
  • Use darker palette shades like #A4B0BE for essential UI elements or active states to improve visibility.
  • Avoid using #F4CFD2 or #C1C8E4 for small text against light backgrounds due to potential readability issues.
  • Test color combinations with accessibility tools to meet WCAG AA or AAA standards for text contrast.

Recommended combinations

Soft Horizon

Perfect for serene landing pages or background gradients, creating a seamless, atmospheric blend.

#E0E7E9 · #B8D8D8 · #C1C8E4

Gentle Touch

Use #E0E7E9 for background, #A4B0BE for headings, and #F4CFD2 for subtle accents or interactive elements.

#E0E7E9 · #A4B0BE · #F4CFD2

Misty Depths

A sophisticated combination for data visualization or layered UI components, offering depth without harshness.

#B8D8D8 · #A4B0BE · #C1C8E4

CSS variables

:root {
  --morning-haze-pastel-1: #E0E7E9;
  --morning-haze-pastel-2: #B8D8D8;
  --morning-haze-pastel-3: #A4B0BE;
  --morning-haze-pastel-4: #C1C8E4;
  --morning-haze-pastel-5: #F4CFD2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-haze-pastel": {
        1: "#E0E7E9",
        2: "#B8D8D8",
        3: "#A4B0BE",
        4: "#C1C8E4",
        5: "#F4CFD2",
      }
    }
  }
}

Related searches

pastel color schemessoft ethereal palettecalm UI colorsmuted morning huesgentle web design colors

Palette colors

Hex values

Color 1#E0E7E9
·
Color 2#B8D8D8
·
Color 3#A4B0BE
·
Color 4#C1C8E4
·
Color 5#F4CFD2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.8:1Fail
1.3:1Fail
1.1:1Fail
2
1.2:1Fail
1.5:1Fail
1.1:1Fail
1.1:1Fail
3
1.8:1Fail
1.5:1Fail
1.3:1Fail
1.5:1Fail
4
1.3:1Fail
1.1:1Fail
1.3:1Fail
1.2:1Fail
5
1.1:1Fail
1.1:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Morning Haze Pastel

View all pastel
Misty Morning
Soft Cloud Wash
Aurora Shimmer
Cloud Shimmer Dawn
Cloud Soft Dawn
Cloudless Sky Wash