Palette

Misty Horizon Calm

Subtle, cool greys blend softly, capturing the quiet calm of a foggy morning landscape.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EBF1F2#D2DBDD#AABBC2#7F9CA7#5E7C88

Palette guide

How to use Misty Horizon Calm

Overview

The Misty Horizon Calm palette offers a deeply serene and monochromatic range of cool blue-greys, capturing the quiet tranquility of a foggy morning landscape. From the very light #EBF1F2 to the grounding #5E7C88, with versatile mid-tones like #7F9CA7, this palette excels at conveying peace, clarity, and professionalism. Designers will find it perfect for creating clean, unobtrusive user interfaces that prioritize user focus and calm. Developers can easily implement these shades for consistent branding across various components, ensuring a cohesive and sophisticated visual experience. This palette is ideal for projects requiring a sense of stability and understated elegance.

Best used for

Wellness and meditation apps
Clean and minimalist UI design
Medical and healthcare branding
Consulting and professional services websites
Maritime-themed digital experiences
Serene editorial layouts

Suggested color roles

primary

Utilize #5E7C88 as a strong, stable primary color for headers, important calls to action, or brand elements, conveying trust.

secondary

Apply #7F9CA7 for supportive elements like subheadings, navigation links, or secondary buttons, maintaining a calm flow.

accent

Introduce #AABBC2 for subtle highlights, borders, or inactive states, providing gentle visual interest without disruption.

background

Employ #EBF1F2 as a very light, clean background color, offering maximum breathability and a sense of spaciousness.

text

For body text, use #5E7C88 or a deep charcoal to ensure excellent readability against lighter backgrounds. #7F9CA7 can be used for larger headings.

Accessibility notes

Ensure high contrast between #5E7C88 and #EBF1F2 for all text to meet WCAG AA standards.
Be cautious with mid-tones like #AABBC2 on #D2DBDD for small text; use for larger elements or decorative purposes.
Provide clear visual cues for interactive elements and focus states using distinct color changes.
Test color pairings across different devices to ensure consistent legibility and visual clarity.

Recommended combinations

Deep Calm

Ideal for creating a strong, stable visual, suitable for hero sections or impactful content blocks.

#5E7C88 · #7F9CA7 · #AABBC2

Horizon Light

Excellent for spacious layouts, content backgrounds, or subtle UI elements requiring softness.

#EBF1F2 · #D2DBDD · #AABBC2

Muted Contrast

A balanced trio for strong visual hierarchy, perfect for text on background with a supportive element.

#5E7C88 · #EBF1F2 · #7F9CA7

CSS variables

:root {
  --misty-horizon-calm-1: #EBF1F2;
  --misty-horizon-calm-2: #D2DBDD;
  --misty-horizon-calm-3: #AABBC2;
  --misty-horizon-calm-4: #7F9CA7;
  --misty-horizon-calm-5: #5E7C88;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-horizon-calm": {
        1: "#EBF1F2",
        2: "#D2DBDD",
        3: "#AABBC2",
        4: "#7F9CA7",
        5: "#5E7C88",
      }
    }
  }
}

Hex values

Color 1#EBF1F2

Color 2#D2DBDD

Color 3#AABBC2

Color 4#7F9CA7

Color 5#5E7C88

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

2.5:1Fail

3.9:1AA18

1.2:1Fail

1.4:1Fail

2.1:1Fail

3.2:1AA18

1.7:1Fail

1.4:1Fail

1.5:1Fail

2.2:1Fail

2.5:1Fail

2.1:1Fail

1.5:1Fail

3.9:1AA18

3.2:1AA18

2.2:1Fail

1.5:1Fail

Similar palettes

More like Misty Horizon Calm

Misty Horizon Calm

See it in context.

Ready when you are.

Built with Misty Horizon Calm.

How to use Misty Horizon Calm

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Calm

Horizon Light

Muted Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Misty Horizon Calm