Palette

Monochrome Fog Horizon

A gradient of muted greys, evoking a foggy landscape where details blur into soft shadows.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C2C#5C5C5C#8C8C8C#BDBDBD#EFEFEF

Palette guide

How to use Monochrome Fog Horizon

Overview

The Monochrome Fog Horizon palette presents a captivating gradient of muted greys, perfectly evoking a foggy landscape where details blur into soft shadows. With deep tones like #2C2C2C, versatile mid-greys such as #5C5C5C and #8C8C8C, and the ethereal #EFEFEF, this collection offers a sophisticated foundation for minimalist and mysterious designs. Designers can leverage these shades to create atmospheric, understated, and elegant interfaces. Developers will find them excellent for building serene dark mode themes, subtle background effects, or any application where a calm, introspective, yet modern aesthetic is desired, promoting focus and a sense of depth.

Best used for

Minimalist dark mode UI designs
Artistic photography websites or portfolios
Mystery or suspense genre branding
High-end luxury product showcases
Atmospheric digital art and illustration backgrounds
Elegant corporate presentations with a modern edge

Suggested color roles

primary

Use #2C2C2C as a dominant background or for major structural elements, providing deep, mysterious depth.

secondary

Employ #5C5C5C for secondary panels, subheadings, or subtle dividers, maintaining a cohesive flow.

accent

Leverage #EFEFEF for highlights, interactive states, or as a crisp background for specific content, adding a touch of light.

background

Utilize #8C8C8C for content sections or cards, offering a balanced mid-grey canvas that supports both light and dark text.

text

For light backgrounds like #EFEFEF, use #2C2C2C for optimal text readability. For dark backgrounds, use white or near-white.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #8C8C8C text on #BDBDBD.
#2C2C2C provides excellent contrast against #EFEFEF for all text sizes, meeting WCAG AA standards.
Avoid using #BDBDBD for small text on #EFEFEF backgrounds; readability may be compromised.
Always test contrast ratios carefully, especially for interactive elements where clarity is crucial.

Recommended combinations

Misty Depth

Ideal for header sections, hero images, or dramatic feature blocks where strong visual impact is desired.

#2C2C2C · #EFEFEF · #5C5C5C

Blurred Layers

Excellent for creating subtle depth in UI components, card backgrounds, or layered information displays.

#5C5C5C · #8C8C8C · #BDBDBD

Horizon Focus

Apply for main content areas with a light background, ensuring dark, readable text and clear hierarchy.

#EFEFEF · #2C2C2C · #8C8C8C

CSS variables

:root {
  --monochrome-fog-horizon-1: #2C2C2C;
  --monochrome-fog-horizon-2: #5C5C5C;
  --monochrome-fog-horizon-3: #8C8C8C;
  --monochrome-fog-horizon-4: #BDBDBD;
  --monochrome-fog-horizon-5: #EFEFEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-fog-horizon": {
        1: "#2C2C2C",
        2: "#5C5C5C",
        3: "#8C8C8C",
        4: "#BDBDBD",
        5: "#EFEFEF",
      }
    }
  }
}

Hex values

Color 1#2C2C2C

Color 2#5C5C5C

Color 3#8C8C8C

Color 4#BDBDBD

Color 5#EFEFEF

Accessibility

Contrast checker

2.1:1Fail

4.2:1AA18

7.4:1AAA

12.1:1AAA

2.1:1Fail

2:1Fail

3.6:1AA18

5.8:1AA

4.2:1AA18

2:1Fail

1.8:1Fail

2.9:1Fail

7.4:1AAA

3.6:1AA18

1.8:1Fail

1.6:1Fail

12.1:1AAA

5.8:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Monochrome Fog Horizon

View all monochrome

Monochrome Mist Shadow