Back to palettes

Palette

Highlands Fog Hike

Misty grays and cool muted tones representing a tranquil and ethereal hike through foggy highlands.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Highlands Fog Hike 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 Highlands Fog Hike.

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

Data visualization

#696969#778899#A9A9A9#DCDCDC#C0C0C0

Palette guide

How to use Highlands Fog Hike

Overview

The Highlands Fog Hike palette captures the misty grays and cool muted tones of a tranquil and ethereal hike through foggy highlands. Ranging from the deep #696969 to the soft #DCDCDC, with atmospheric blues like #778899 and neutral #A9A9A9, this palette is profoundly calm and versatile. It is exceptionally useful for designers and developers aiming to create minimalist, sophisticated, and serene experiences. These colors convey a sense of quiet adventure and natural beauty, making them ideal for projects that require a subdued yet elegant aesthetic, perfect for conveying tranquility without being dull.

Best used for

  • Minimalist website and app designs
  • Outdoor adventure and travel branding
  • Photography portfolios with a moody aesthetic
  • Urban exploration or architectural themes
  • Serene home goods and decor
  • Subtle UI elements and iconography

Suggested color roles

primary

Utilize #778899 as a cool grey-blue for primary content areas or large blocks, setting an atmospheric, calming tone.

secondary

Employ #696969 for supporting elements, subheadings, or secondary navigation, providing a grounding, darker grey.

accent

Reserve #C0C0C0 for subtle highlights, background textures, or delicate UI elements, adding a touch of misty lightness.

background

Use #DCDCDC as a soft, neutral background, providing an airy canvas that allows the darker tones to stand out.

text

Opt for #696969 for body text and important headings to ensure excellent readability and a sophisticated, deep contrast, or use black for maximum clarity.

Accessibility notes

  • Ensure #696969 provides strong contrast against #DCDCDC for all text sizes.
  • When using #778899 for text, verify it has adequate contrast on lighter backgrounds like #DCDCDC.
  • Avoid using #C0C0C0 for small text or critical information due to its low contrast.
  • Always test color combinations with accessibility tools to confirm readability for all elements.

Recommended combinations

Foggy Ascent

Excellent for main content areas, providing a light background with clear, deep text and a calming accent.

#696969 · #DCDCDC · #778899

Misty Path

Ideal for section headers, sub-navigation, or visual elements requiring a balanced, natural feel.

#A9A9A9 · #C0C0C0 · #696969

Cool Grey

Effective for creating a cohesive, peaceful visual hierarchy, with mid-tones supported by light and dark.

#778899 · #DCDCDC · #696969

CSS variables

:root {
  --highlands-fog-hike-1: #696969;
  --highlands-fog-hike-2: #778899;
  --highlands-fog-hike-3: #A9A9A9;
  --highlands-fog-hike-4: #DCDCDC;
  --highlands-fog-hike-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "highlands-fog-hike": {
        1: "#696969",
        2: "#778899",
        3: "#A9A9A9",
        4: "#DCDCDC",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

foggy grey palettecool mountain colorsminimalist grey themetranquil highlands designsubtle neutral palette

Palette colors

Hex values

Color 1#696969
·
Color 2#778899
·
Color 3#A9A9A9
·
Color 4#DCDCDC
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
4:1AA18
3:1AA18
2
1.5:1Fail
1.5:1Fail
2.7:1Fail
2:1Fail
3
2.3:1Fail
1.5:1Fail
1.7:1Fail
1.3:1Fail
4
4:1AA18
2.7:1Fail
1.7:1Fail
1.3:1Fail
5
3:1AA18
2:1Fail
1.3:1Fail
1.3:1Fail

Similar palettes

More like Highlands Fog Hike

View all neutral