Palette

Monochrome Horizon Mist

A serene gradient of cool greys, capturing the subtle atmospheric shifts of a misty, distant horizon.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F0F0#D0D0D0#A8A8A8#7F7F7F#575757

Palette guide

How to use Monochrome Horizon Mist

Overview

The Monochrome Horizon Mist palette offers a serene gradient of cool greys, perfectly capturing the subtle atmospheric shifts of a misty, distant horizon. With light tones like #F0F0F0 and #D0D0D0, mid-tones such as #A8A8A8 and #7F7F7F, and the grounding deep grey #575757, this collection provides a tranquil and sophisticated foundation. It's ideal for designs seeking a minimalist aesthetic with depth, where a calm, understated elegance is paramount. Designers and developers will find these hues highly versatile for creating harmonious and cohesive visual experiences that evoke peace and spaciousness.

Best used for

Minimalist user interfaces
Serene branding and logos
Backgrounds for photography
Editorial layouts and print media
Subtle web design themes
Abstract art and illustration

Suggested color roles

primary

Use #7F7F7F as a versatile primary hue for main content areas or interactive elements, offering a balanced mid-tone.

secondary

Apply #A8A8A8 for supporting information, subheadings, or secondary UI components, providing a softer complement.

accent

Utilize #575757 for subtle accents, borders, or hover states where a slightly darker, grounding contrast is needed.

background

Employ #F0F0F0 as a light, airy background color, creating a spacious and clean canvas for content.

text

Choose #575757 for body text on lighter backgrounds like #F0F0F0 to ensure excellent readability and a harmonious feel.

Accessibility notes

Ensure sufficient contrast between #575757 text and #F0F0F0 backgrounds for WCAG AA compliance.
Avoid using #D0D0D0 or #A8A8A8 for critical text on light backgrounds due to potential low contrast.
Use a darker shade like #7F7F7F for focus indicators on interactive elements to ensure visibility.
Provide alternative text for graphical elements where color alone conveys meaning to users with color vision deficiencies.

Recommended combinations

Misty Morning

Ideal for a clean, readable layout with a light background, mid-tone primary elements, and dark text/accents.

#F0F0F0 · #7F7F7F · #575757

Horizon Depth

Creates a slightly darker, more subdued look, suitable for secondary sections or atmospheric visual elements.

#D0D0D0 · #A8A8A8 · #575757

Subtle Gradient

Perfect for layering elements or creating soft, continuous visual transitions in backgrounds or large blocks.

#F0F0F0 · #A8A8A8 · #7F7F7F

CSS variables

:root {
  --monochrome-horizon-mist-1: #F0F0F0;
  --monochrome-horizon-mist-2: #D0D0D0;
  --monochrome-horizon-mist-3: #A8A8A8;
  --monochrome-horizon-mist-4: #7F7F7F;
  --monochrome-horizon-mist-5: #575757;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-horizon-mist": {
        1: "#F0F0F0",
        2: "#D0D0D0",
        3: "#A8A8A8",
        4: "#7F7F7F",
        5: "#575757",
      }
    }
  }
}

Hex values

Color 1#F0F0F0

Color 2#D0D0D0

Color 3#A8A8A8

Color 4#7F7F7F

Color 5#575757

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.5:1AA18

6.3:1AA

1.4:1Fail

1.5:1Fail

2.6:1Fail

4.7:1AA

2.1:1Fail

1.5:1Fail

1.7:1Fail

3:1AA18

3.5:1AA18

2.6:1Fail

1.7:1Fail

1.8:1Fail

6.3:1AA

4.7:1AA

3:1AA18

1.8:1Fail

Similar palettes

More like Monochrome Horizon Mist

Graphite Haze Gradient

Grayscale Urban Haze

Ink Wash