Back to palettes

Palette

Misty Morning Horizon

Gentle, hazy blues and greys depicting a cool, quiet morning sky veiled in mist.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A5B4C2#C9D4DF#E6ECF1#BBCBD7#9DAEBB

Palette guide

How to use Misty Morning Horizon

Overview

The Misty Morning Horizon palette captures the gentle, hazy blues and greys of a cool, quiet morning sky veiled in mist. This serene collection, featuring prominent shades like the tranquil #A5B4C2, the softest #E6ECF1, and the grounding #9DAEBB, is ideal for creating designs that evoke calmness and clarity. Designers and developers can leverage these cool, atmospheric tones to build user interfaces, branding, or digital art that feels expansive yet comforting, providing a gentle visual experience without harsh contrasts.

Best used for

  • Minimalist UI design
  • Wellness and meditation apps
  • Nature-inspired branding
  • Photography backdrops
  • Spa and relaxation websites
  • Soft-toned digital illustrations

Suggested color roles

primary

Use #A5B4C2 as a foundational color for large UI elements, main sections, or primary branding accents, providing a sense of calm stability.

secondary

Employ #BBCBD7 for supporting elements, secondary headers, or subtle call-to-action buttons, offering a gentle contrast.

accent

Apply #9DAEBB for subtle highlights, interactive states, or icons where a slightly deeper, grounding tone is desired.

background

Utilize #E6ECF1 as a light, airy canvas for backgrounds, ensuring content stands out without feeling heavy.

text

For readable body text on light backgrounds like #E6ECF1, use #A5B4C2 or a dark charcoal to maintain the palette's gentle feel while ensuring legibility.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter shades like #E6ECF1 with other light colors, especially for text.
  • Use #9DAEBB or a darker neutral for body text to meet WCAG contrast guidelines on backgrounds like #E6ECF1.
  • Avoid using #C9D4DF for small text or critical information on light backgrounds; it may lack sufficient contrast.
  • Prioritize higher contrast ratios for interactive elements to clearly indicate their functionality.

Recommended combinations

Soft Gradient

Ideal for subtle background gradients or layered UI elements that transition smoothly.

#E6ECF1 · #C9D4DF · #A5B4C2

Subtle Contrast

Effective for card backgrounds, section dividers, or secondary navigation where gentle differentiation is key.

#BBCBD7 · #9DAEBB · #A5B4C2

Highlight & Base

Pairing a light background with a strong accent and a stable primary for buttons or emphasized content.

#E6ECF1 · #9DAEBB · #A5B4C2

CSS variables

:root {
  --misty-morning-horizon-1: #A5B4C2;
  --misty-morning-horizon-2: #C9D4DF;
  --misty-morning-horizon-3: #E6ECF1;
  --misty-morning-horizon-4: #BBCBD7;
  --misty-morning-horizon-5: #9DAEBB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-morning-horizon": {
        1: "#A5B4C2",
        2: "#C9D4DF",
        3: "#E6ECF1",
        4: "#BBCBD7",
        5: "#9DAEBB",
      }
    }
  }
}

Related searches

misty blue palettecool grey blue colorscalm horizon tonesserene ui colorslight atmospheric palette

Palette colors

Hex values

Color 1#A5B4C2
·
Color 2#C9D4DF
·
Color 3#E6ECF1
·
Color 4#BBCBD7
·
Color 5#9DAEBB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.8:1Fail
1.3:1Fail
1.1:1Fail
2
1.4:1Fail
1.3:1Fail
1.1:1Fail
1.5:1Fail
3
1.8:1Fail
1.3:1Fail
1.4:1Fail
1.9:1Fail
4
1.3:1Fail
1.1:1Fail
1.4:1Fail
1.4:1Fail
5
1.1:1Fail
1.5:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Misty Morning Horizon

View all cool
Gentle Lake Mist
Misty Morning Lake
Seaside Morning Fog
Whispering Sky Hues
Aegean Horizon
Aegean Isle Horizon