Back to palettes

Palette

Silent Fog Horizon

Subtle shades of grey that capture the hushed tranquility of a foggy landscape at dawn.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9A9A9#D3D3D3#F5F5F5#808080#696969

Palette guide

How to use Silent Fog Horizon

Overview

The Silent Fog Horizon palette captures the serene and ethereal beauty of a foggy landscape, offering a nuanced range of muted greys. From the gentle #F5F5F5 to the grounding #696969, with versatile mid-tones like #D3D3D3, #A9A9A9, and #808080, this palette is designed for creating a calm, reflective, and sophisticated atmosphere. It's an excellent choice for projects that aim for understated elegance, a sense of tranquility, or a minimalist aesthetic where subtlety and harmony are paramount, such as art, meditation, or luxury lifestyle brands.

Best used for

  • Meditation app interfaces
  • Luxury minimalist branding
  • Fine art photography websites
  • Calm and serene interior design
  • Atmospheric digital art
  • Yoga and wellness content

Suggested color roles

primary

Use #696969 for main headings or strong graphical elements, providing a subtle anchor.

secondary

Apply #808080 or #A9A9A9 for subheadings, navigation, or content dividers, maintaining softness.

accent

#D3D3D3 works well for subtle highlights, hover states, or background textures, enhancing the ethereal feel.

background

#F5F5F5 provides a light, airy, and expansive canvas, ensuring excellent readability.

text

For primary text, #696969 offers good contrast on #F5F5F5. #808080 can be used for secondary text or captions.

Accessibility notes

  • Text using #A9A9A9 or #D3D3D3 on #F5F5F5 will likely fail contrast ratios; use darker greys for text.
  • Ensure #696969 and #808080 provide sufficient contrast when used for text on lighter backgrounds.
  • For interactive elements, ensure distinct visual feedback beyond subtle color changes, possibly with borders or underlines.
  • Avoid using the lightest greys for small or critical text elements.

Recommended combinations

Misty Depths

Ideal for creating subtle depth in branding or hero sections.

#696969 · #808080 · #F5F5F5

Horizon Layers

Perfect for soft backgrounds, UI cards, or layered information displays.

#A9A9A9 · #D3D3D3 · #F5F5F5

Calm Gradient

Effective for gradients, subtle iconography, or structured layouts.

#696969 · #A9A9A9 · #808080

CSS variables

:root {
  --silent-fog-horizon-1: #A9A9A9;
  --silent-fog-horizon-2: #D3D3D3;
  --silent-fog-horizon-3: #F5F5F5;
  --silent-fog-horizon-4: #808080;
  --silent-fog-horizon-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "silent-fog-horizon": {
        1: "#A9A9A9",
        2: "#D3D3D3",
        3: "#F5F5F5",
        4: "#808080",
        5: "#696969",
      }
    }
  }
}

Related searches

calm grey color paletteserene monochrome schemefoggy landscape colorsminimalist grey brandingsubtle neutral palette

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#D3D3D3
·
Color 3#F5F5F5
·
Color 4#808080
·
Color 5#696969
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
1.7:1Fail
2.3:1Fail
2
1.6:1Fail
1.4:1Fail
2.6:1Fail
3.7:1AA18
3
2.2:1Fail
1.4:1Fail
3.6:1AA18
5:1AA
4
1.7:1Fail
2.6:1Fail
3.6:1AA18
1.4:1Fail
5
2.3:1Fail
3.7:1AA18
5:1AA
1.4:1Fail

Similar palettes

More like Silent Fog Horizon

View all monochrome
Misty Moorland Walk
Dusky Meadow Mist
Misty Greyscale Vista
Misty Horizon Calm
Misty Moorland Dawn
Mystic Moorland Fog