Back to palettes

Palette

Morning Mist Horizon

Delicate greys and lavenders mirroring the soft, diffused light of a misty morning.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6E6FA#D8BFD8#C0C0C0#A9A9A9#708090

Palette guide

How to use Morning Mist Horizon

Overview

The Morning Mist Horizon palette captures the soft, diffused light of dawn with its delicate greys and lavenders, offering a sophisticated and tranquil aesthetic. Anchored by the soft lavender #E6E6FA and the gentle grey of #C0C0C0, it provides a versatile foundation. Deeper tones like #A9A9A9 and the slate-like #708090 add grounding contrast, while the subtle hint of lavender in #D8BFD8 softens the overall feel. This palette is ideal for designers and developers seeking to create a calm, refined, and minimalist experience that suggests understated elegance and quiet contemplation.

Best used for

  • Subtle corporate branding
  • Luxury product packaging
  • Minimalist website designs
  • Architectural visualization
  • Editorial and print design
  • Meditation and wellness apps

Suggested color roles

primary

Use #A9A9A9 as a versatile mid-tone for main content areas, providing a sophisticated yet understated base.

secondary

Apply #D8BFD8 for soft, warm accents or secondary information, introducing a hint of delicate lavender.

accent

Utilize #708090 as a deeper, anchoring element for important call-to-actions, borders, or strong visual emphasis.

background

Employ #E6E6FA as the primary background color, offering a light, airy, and slightly warm canvas.

text

For optimal readability, use #708090 or a standard black for body text. #A9A9A9 can be used for secondary text on light backgrounds.

Accessibility notes

  • Ensure sufficient contrast when using lighter greys like #C0C0C0 or #A9A9A9 for text against light backgrounds.
  • Pair #708090 with #E6E6FA for optimal text readability on primary content areas.
  • Avoid low-contrast combinations such as #D8BFD8 text on #E6E6FA for important information or small font sizes.
  • Utilize #E6E6FA as a background with darker palette colors for accessible and comfortable reading experiences.

Recommended combinations

Misty Gradient

Subtle background gradients for web banners, presentation slides, or soft graphic elements.

#E6E6FA · #D8BFD8 · #C0C0C0

Horizon Depth

Sophisticated UI elements, with #708090 for primary text, #A9A9A9 for secondary, and #D8BFD8 for highlights.

#A9A9A9 · #708090 · #D8BFD8

Soft Structure

Minimalist layouts where #E6E6FA is the background and various greys define structural elements or containers.

#E6E6FA · #C0C0C0 · #A9A9A9

CSS variables

:root {
  --morning-mist-horizon-1: #E6E6FA;
  --morning-mist-horizon-2: #D8BFD8;
  --morning-mist-horizon-3: #C0C0C0;
  --morning-mist-horizon-4: #A9A9A9;
  --morning-mist-horizon-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-mist-horizon": {
        1: "#E6E6FA",
        2: "#D8BFD8",
        3: "#C0C0C0",
        4: "#A9A9A9",
        5: "#708090",
      }
    }
  }
}

Related searches

misty grey palettelavender grey colorscalm neutral schemediffused light palettesophisticated grey branding

Palette colors

Hex values

Color 1#E6E6FA
·
Color 2#D8BFD8
·
Color 3#C0C0C0
·
Color 4#A9A9A9
·
Color 5#708090
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.5:1Fail
1.9:1Fail
3.3:1AA18
2
1.4:1Fail
1.1:1Fail
1.4:1Fail
2.4:1Fail
3
1.5:1Fail
1.1:1Fail
1.3:1Fail
2.2:1Fail
4
1.9:1Fail
1.4:1Fail
1.3:1Fail
1.7:1Fail
5
3.3:1AA18
2.4:1Fail
2.2:1Fail
1.7:1Fail

Similar palettes

More like Morning Mist Horizon

View all neutral