Back to palettes

Palette

Highland Mist Green

Evokes the cool, ethereal greens and greys of a misty, rolling highland landscape.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Highland Mist Green 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 Highland Mist Green.

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

Data visualization

#3A504A#688D86#A7C6C0#E0ECEB#1C3634

Palette guide

How to use Highland Mist Green

Overview

The Highland Mist Green palette captures the cool, ethereal greens and greys of a misty, rolling highland landscape. With deep, grounded tones like #1C3634 and #3A504A, transitioning through the muted #688D86 to the airy #A7C6C0 and #E0ECEB, this palette offers a serene and sophisticated natural aesthetic. It's incredibly useful for designers and developers aiming to create experiences that are calm, contemplative, and connected to nature. The subtle variations in green-grey provide depth without overt vibrancy, making it ideal for projects that require understated elegance and a tranquil mood.

Best used for

  • Nature-inspired branding and logos
  • Outdoor apparel and gear websites
  • Travel blogs focusing on landscapes
  • Serene home decor and interior design
  • Environmental and conservation initiatives
  • Mindfulness and relaxation apps

Suggested color roles

primary

Utilize #3A504A as a deep, muted green-grey for primary content areas, establishing a strong, natural foundation.

secondary

Employ #688D86 for supporting elements, subheadings, or secondary navigation, providing a softer, misty mid-tone.

accent

Reserve #A7C6C0 for subtle highlights, background textures, or delicate UI elements, adding an ethereal, airy touch.

background

Use #E0ECEB as the main background color, providing a soft, near-white misty canvas that enhances the depth of the darker tones.

text

Opt for #1C3634 for body text and important headings to ensure maximum readability and a sophisticated, deep contrast.

Accessibility notes

  • Ensure #1C3634 provides strong contrast against #E0ECEB for all text sizes.
  • When using #3A504A for text, verify it has adequate contrast on lighter backgrounds like #E0ECEB or #A7C6C0.
  • Avoid using #A7C6C0 for small text or critical information due to its light value.
  • Always test color combinations with accessibility tools to confirm readability for all elements.

Recommended combinations

Misty Depths

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

#1C3634 · #E0ECEB · #688D86

Ethereal Fog

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

#A7C6C0 · #3A504A · #E0ECEB

Highland Calm

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

#688D86 · #E0ECEB · #1C3634

CSS variables

:root {
  --highland-mist-green-1: #3A504A;
  --highland-mist-green-2: #688D86;
  --highland-mist-green-3: #A7C6C0;
  --highland-mist-green-4: #E0ECEB;
  --highland-mist-green-5: #1C3634;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "highland-mist-green": {
        1: "#3A504A",
        2: "#688D86",
        3: "#A7C6C0",
        4: "#E0ECEB",
        5: "#1C3634",
      }
    }
  }
}

Related searches

misty green palettehighland landscape colorsserene nature themecool grey greenoutdoor brand identity

Palette colors

Hex values

Color 1#3A504A
·
Color 2#688D86
·
Color 3#A7C6C0
·
Color 4#E0ECEB
·
Color 5#1C3634
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
4.7:1AA
7.2:1AAA
1.5:1Fail
2
2.4:1Fail
2:1Fail
3:1AA18
3.5:1AA18
3
4.7:1AA
2:1Fail
1.5:1Fail
7.1:1AAA
4
7.2:1AAA
3:1AA18
1.5:1Fail
10.7:1AAA
5
1.5:1Fail
3.5:1AA18
7.1:1AAA
10.7:1AAA

Similar palettes

More like Highland Mist Green

View all cool