Back to palettes

Palette

Misty Morning

Gentle and ethereal tones capturing the tranquil, hushed atmosphere of a foggy morning at dawn.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#87CEEB#B0C4DE#ADD8E6#F0B5B3#D8BFD8

Palette guide

How to use Misty Morning

Overview

The Misty Morning palette offers gentle and ethereal pastel tones, perfectly capturing the tranquil, hushed atmosphere of a foggy morning at dawn. Featuring delicate blues like #87CEEB and #ADD8E6, alongside soft pink (#F0B5B3) and lavender (#D8BFD8), this palette is a designer's delight for creating dreamy, soft, and inviting visuals. It's ideal for projects that aim to evoke a sense of calm, innocence, or lightheartedness, making it versatile for both digital platforms and print materials where a gentle touch is paramount.

Best used for

  • Children's product branding
  • Feminine and beauty websites
  • Art and creative portfolios
  • Wellness and mindfulness apps
  • Personal blogs with a soft aesthetic
  • Ethereal event invitations

Suggested color roles

primary

Utilize #87CEEB as a main color for headers or significant design elements, providing a cheerful yet serene base.

secondary

Employ #B0C4DE for supporting visuals, background sections, or subheadings, adding a touch of cool comfort.

accent

Reserve #F0B5B3 for soft highlights, interactive states, or decorative elements, introducing a warm, gentle pop.

background

Choose #ADD8E6 as a light, ethereal background, creating an airy and open canvas for your content.

text

For readable body text on light backgrounds like #ADD8E6, use #87CEEB or a dark charcoal to ensure legibility while maintaining the palette's gentle mood.

Accessibility notes

  • Most colors are very light; ensure sufficient contrast for text. Use a dark neutral (e.g., charcoal) for body text.
  • Avoid using #F0B5B3 or #D8BFD8 for any text, especially small text, as they will likely fail contrast guidelines.
  • When designing interactive elements, ensure their color differences from the background are clear and provide feedback.
  • Prioritize using #87CEEB or #B0C4DE for larger headings if they are to be colored from the palette, but always check contrast.

Recommended combinations

Pastel Harmony

Ideal for soft background gradients, decorative patterns, or layered elements that blend seamlessly.

#ADD8E6 · #B0C4DE · #D8BFD8

Ethereal Pop

Use for icons, illustrations, or small interactive elements to add a playful yet gentle contrast.

#87CEEB · #F0B5B3 · #D8BFD8

Misty Wash

Excellent for large background areas, overlays, or header sections, creating an expansive, calming feel.

#ADD8E6 · #87CEEB · #B0C4DE

CSS variables

:root {
  --misty-morning-1: #87CEEB;
  --misty-morning-2: #B0C4DE;
  --misty-morning-3: #ADD8E6;
  --misty-morning-4: #F0B5B3;
  --misty-morning-5: #D8BFD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-morning": {
        1: "#87CEEB",
        2: "#B0C4DE",
        3: "#ADD8E6",
        4: "#F0B5B3",
        5: "#D8BFD8",
      }
    }
  }
}

Related searches

pastel misty paletteethereal morning colorssoft tranquil tonesgentle ui designlight romantic colors

Palette colors

Hex values

Color 1#87CEEB
·
Color 2#B0C4DE
·
Color 3#ADD8E6
·
Color 4#F0B5B3
·
Color 5#D8BFD8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.1:1Fail
1:1Fail
1:1Fail
2
1:1Fail
1.2:1Fail
1:1Fail
1:1Fail
3
1.1:1Fail
1.2:1Fail
1.1:1Fail
1.1:1Fail
4
1:1Fail
1:1Fail
1.1:1Fail
1:1Fail
5
1:1Fail
1:1Fail
1.1:1Fail
1:1Fail

Similar palettes

More like Misty Morning

View all pastel
Morning Haze Pastel
Aurora Shimmer
Dawn Cloud Whisper
Dawn Serenity
Ethereal Mist Dream
Lavender Morning Mist