Back to palettes

Palette

Jade Mountain Mist

Evokes the tranquil, misty views of lush green mountains, like precious jade.

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

#0A644D#2B856A#62B799#A9DED3#D5F3ED

Palette guide

How to use Jade Mountain Mist

Overview

The Jade Mountain Mist palette captures the tranquil, misty views of lush green mountains, evoking the precious qualities of jade. This collection, featuring hex codes like the deep `#0A644D` and the airy `#D5F3ED`, offers a fresh and serene aesthetic. Designers can leverage the balanced `#2B856A` as a primary hue, while `#62B799` and `#A9DED3` provide versatile mid-tones and lighter options. This palette is perfect for projects seeking to convey calmness, natural beauty, and a touch of refined elegance, creating an immersive and peaceful user experience across digital and print media.

Best used for

  • Eco-friendly product packaging and branding
  • Spa and wellness center websites
  • Meditation and mindfulness app designs
  • Nature-inspired photography and art
  • Sustainable fashion collections
  • Zen garden or interior design concepts

Suggested color roles

primary

Use `#2B856A` for main headings, important buttons, and key graphical elements. It's a fresh, inviting green.

secondary

Apply `#0A644D` for navigation, footers, or as a strong accent color that provides depth and stability.

accent

Reserve `#D5F3ED` for subtle highlights, delicate illustrations, or as a very light background for emphasis.

background

Employ `#A9DED3` for primary content areas, providing a soft, clean, and refreshing backdrop.

text

Utilize `#0A644D` for body text to ensure excellent readability and a harmonious visual integration.

Accessibility notes

  • Ensure `#0A644D` provides sufficient contrast against lighter shades like `#A9DED3` and `#D5F3ED` for text.
  • Avoid using `#D5F3ED` for any text elements as it lacks sufficient contrast against most backgrounds.
  • When using `#62B799` for interactive elements, verify its contrast with surrounding colors.
  • Consider using a darker green from the palette for primary text on any background for optimal readability.

Recommended combinations

Misty Depths

Creates a balanced, serene contrast suitable for hero banners and informational sections.

#0A644D · #2B856A · #A9DED3

Fresh Ascent

Offers a soft, progressive gradient ideal for backgrounds or subtle visual flows in UI.

#2B856A · #62B799 · #D5F3ED

Jade Harmony

Combines deep and light tones for a sophisticated, calming effect in branding or editorial layouts.

#0A644D · #62B799 · #D5F3ED

CSS variables

:root {
  --jade-mountain-mist-1: #0A644D;
  --jade-mountain-mist-2: #2B856A;
  --jade-mountain-mist-3: #62B799;
  --jade-mountain-mist-4: #A9DED3;
  --jade-mountain-mist-5: #D5F3ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jade-mountain-mist": {
        1: "#0A644D",
        2: "#2B856A",
        3: "#62B799",
        4: "#A9DED3",
        5: "#D5F3ED",
      }
    }
  }
}

Related searches

tranquil green color palettemisty forest colorsserene jade designcool green aestheticoriental nature palette

Palette colors

Hex values

Color 1#0A644D
·
Color 2#2B856A
·
Color 3#62B799
·
Color 4#A9DED3
·
Color 5#D5F3ED
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3:1Fail
4.8:1AA
6.1:1AA
2
1.6:1Fail
1.9:1Fail
3:1AA18
3.8:1AA18
3
3:1Fail
1.9:1Fail
1.6:1Fail
2:1Fail
4
4.8:1AA
3:1AA18
1.6:1Fail
1.3:1Fail
5
6.1:1AA
3.8:1AA18
2:1Fail
1.3:1Fail

Similar palettes

More like Jade Mountain Mist

View all cool
Jade Buddha Statue
Jade Mountain Mist
Deep Jade Serenity
Jade Temple Whispers
Alpine Mist
Alpine Morning Mist