Back to palettes

Palette

Misty Morning Haze

Soft, muted blues and grays that evoke the tranquil stillness of a misty morning.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C6D8E2#A8BCC8#89A0B0#6C8498#E0E8ED

Palette guide

How to use Misty Morning Haze

Overview

The Misty Morning Haze palette (2) offers a tranquil and cohesive collection of cool, muted blues and grays, perfectly capturing the quiet stillness of a serene, hazy morning. Featuring shades from the light #E0E8ED to the grounding #6C8498, and including the balanced #89A0B0, this palette is ideal for designers and developers seeking a calm, professional, and contemporary aesthetic. It provides a solid foundation for clean user interfaces, refreshing branding, or digital experiences that prioritize clarity and a soothing visual presence. The subtle blue undertones add a touch of freshness, ensuring a sophisticated and inviting appeal.

Best used for

  • Corporate and business applications
  • Environmental and nature-focused brands
  • Healthcare and medical interfaces
  • Modern educational platforms
  • Spa and relaxation websites
  • Cloud computing dashboards

Suggested color roles

primary

#6C8498 - A deep, muted blue-grey, ideal for primary headings, call-to-action buttons, or main navigation, providing a strong yet calming anchor.

secondary

#89A0B0 - A versatile medium blue-grey, suitable for subheadings, secondary interactive elements, or graphic accents, offering gentle contrast.

accent

#A8BCC8 - A lighter, soft blue-grey that can highlight interactive states, small icons, or subtle graphic details, adding a touch of serene color.

background

#E0E8ED - A very light, almost white cool grey, excellent for clean main backgrounds, large content areas, or modal overlays, ensuring an open and airy feel.

text

Dark charcoal or black - A dark grey such as #333333 or pure black should be used for primary body text to ensure maximum readability against lighter backgrounds.

Accessibility notes

  • Ensure #6C8498 or a dark custom text color has sufficient contrast with #E0E8ED or #C6D8E2 for text readability.
  • Avoid using #A8BCC8 or #C6D8E2 for small text on backgrounds of similar lightness to prevent readability issues.
  • Use clear visual indicators (e.g., underlines, icons) in addition to color for interactive states, especially between similar shades.
  • Test color combinations with colorblind users to ensure all elements are distinguishable, given the close proximity of some blue-grey tones.

Recommended combinations

Hazy Horizon

Ideal for creating soft, atmospheric backgrounds, subtle gradients, or large content sections with an expansive and calm feel.

#E0E8ED · #C6D8E2 · #A8BCC8

Calm Depth

Excellent for strong typographic hierarchy: darkest for headings, mid-tone for subheadings, and lightest for background.

#6C8498 · #89A0B0 · #E0E8ED

Refined UI

Perfect for standard UI components: light background, deep primary text/buttons, and a lighter mid-grey for secondary information or borders.

#E0E8ED · #6C8498 · #A8BCC8

CSS variables

:root {
  --misty-morning-haze-2-1: #C6D8E2;
  --misty-morning-haze-2-2: #A8BCC8;
  --misty-morning-haze-2-3: #89A0B0;
  --misty-morning-haze-2-4: #6C8498;
  --misty-morning-haze-2-5: #E0E8ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-morning-haze-2": {
        1: "#C6D8E2",
        2: "#A8BCC8",
        3: "#89A0B0",
        4: "#6C8498",
        5: "#E0E8ED",
      }
    }
  }
}

Related searches

cool blue grey paletteserene morning colorscalm professional UImuted blue web designhazy grey branding scheme

Palette colors

Hex values

Color 1#C6D8E2
·
Color 2#A8BCC8
·
Color 3#89A0B0
·
Color 4#6C8498
·
Color 5#E0E8ED
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
2.7:1Fail
1.2:1Fail
2
1.3:1Fail
1.4:1Fail
2:1Fail
1.6:1Fail
3
1.9:1Fail
1.4:1Fail
1.4:1Fail
2.2:1Fail
4
2.7:1Fail
2:1Fail
1.4:1Fail
3.1:1AA18
5
1.2:1Fail
1.6:1Fail
2.2:1Fail
3.1:1AA18

Similar palettes

More like Misty Morning Haze

View all cool
Coastal Fog Morning
Coastal Mist Horizon
Cool Mist Dawn
Frosty Morning Lake
Misty Canyon Lilac
Misty Morning Lake