Palette

Jade Mountain Mist

Cool, subdued greens and grays reflecting the tranquil, mist-shrouded jade mountains.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jade Mountain 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 Jade Mountain Mist.

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

Data visualization

#3F524A#657E70#9AC2A8#BBD1C5#2C3E34

Palette guide

How to use Jade Mountain Mist

Overview

The Jade Mountain Mist palette delivers a serene and sophisticated blend of cool, subdued greens and grays, perfectly reflecting tranquil, mist-shrouded landscapes. With colors ranging from the deep, grounding `#2C3E34` to the soft, ethereal `#BBD1C5`, this palette is ideal for creating a calm, elegant, and natural aesthetic. Designers can utilize `#3F524A` and `#657E70` for foundational elements, while `#9AC2A8` provides a versatile mid-tone. This collection ensures a harmonious user experience, promoting feelings of peace and understated luxury, making it excellent for projects seeking a refined, nature-inspired touch.

Best used for

Wellness and meditation app interfaces
High-end spa and retreat branding
Nature photography portfolios and galleries
Elegant home decor and interior design concepts
Minimalist branding for sustainable products
Luxury lifestyle websites and editorial content

Suggested color roles

primary

Use `#657E70` as the main color for headings, buttons, and prominent UI elements. It's balanced and inviting.

secondary

Apply `#3F524A` for sub-headings, secondary navigation, or as a darker accent for visual hierarchy.

accent

Reserve `#BBD1C5` for subtle highlights, delicate illustrations, or as a light background for critical information.

background

Employ `#9AC2A8` for primary content areas or as a soft, airy canvas that allows other elements to stand out.

text

Utilize `#2C3E34` for all body text to ensure maximum readability and a sophisticated, cohesive look.

Accessibility notes

Ensure `#2C3E34` is used for text on lighter backgrounds like `#BBD1C5` and `#9AC2A8` to meet contrast standards.
Avoid placing light-colored text on `#BBD1C5` as contrast will be insufficient.
When using `#657E70` for text, ensure its background offers adequate luminance difference.
Consider larger font sizes or bolding for text in lighter shades to improve legibility.

Recommended combinations

Deep Mist

Creates a sophisticated, layered look, perfect for hero sections or brand identity elements.

#2C3E34 · #657E70 · #BBD1C5

Serene Gradient

Ideal for soft visual transitions, background elements, or subtle graphic details.

#3F524A · #9AC2A8 · #BBD1C5

Grounding Calm

Provides a solid, calming foundation for content areas, offering excellent text contrast.

#2C3E34 · #3F524A · #9AC2A8

CSS variables

:root {
  --jade-mountain-mist-2-1: #3F524A;
  --jade-mountain-mist-2-2: #657E70;
  --jade-mountain-mist-2-3: #9AC2A8;
  --jade-mountain-mist-2-4: #BBD1C5;
  --jade-mountain-mist-2-5: #2C3E34;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jade-mountain-mist-2": {
        1: "#3F524A",
        2: "#657E70",
        3: "#9AC2A8",
        4: "#BBD1C5",
        5: "#2C3E34",
      }
    }
  }
}

Hex values

Color 1#3F524A

Color 2#657E70

Color 3#9AC2A8

Color 4#BBD1C5

Color 5#2C3E34

Accessibility

Contrast checker

1.9:1Fail

4.2:1AA18

5.2:1AA

1.4:1Fail

1.9:1Fail

2.2:1Fail

2.7:1Fail

2.6:1Fail

4.2:1AA18

2.2:1Fail

1.2:1Fail

5.8:1AA

5.2:1AA

2.7:1Fail

1.2:1Fail

7.1:1AAA

1.4:1Fail

2.6:1Fail

5.8:1AA

7.1:1AAA

Similar palettes

More like Jade Mountain Mist

Jade Mountain Mist

See it in context.

Ready when you are.

Built with Jade Mountain Mist.

How to use Jade Mountain Mist

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Mist

Serene Gradient

Grounding Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Jade Mountain Mist