Palette

Jade Mountain Mystic

Deep to vibrant greens, like ancient jade mountains shrouded in mist, embodying peace and timeless wisdom.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#005A51#008076#00A69A#00CCA0#00F2B0

Palette guide

How to use Jade Mountain Mystic

Overview

The Jade Mountain Mystic palette offers a compelling monochrome journey from deep, grounding greens to vibrant, ethereal hues, reminiscent of ancient jade mountains shrouded in mist. Featuring colors like the rich `#005A51` and the bright `#00F2B0`, this palette embodies peace and timeless wisdom. Designers can leverage the versatile `#008076` as a primary color, while `#00A69A` and `#00CCA0` provide excellent mid-tones for depth and variation. This collection is perfect for projects that aim to evoke a sense of spiritual calm, luxury, and subtle dynamism, offering a sophisticated and cohesive visual experience across various applications.

Best used for

Spiritual and meditation brands
Luxury wellness and spa designs
High-end eco-tourism and travel
Nature-inspired tech interfaces
Art and photography with a mystic theme
Elegant home decor and textile patterns

Suggested color roles

primary

Use `#008076` for main headings, interactive elements, and key brand accents. It's balanced and engaging.

secondary

Apply `#005A51` for navigation bars, footers, or as a strong background color to establish depth and sophistication.

accent

Reserve `#00F2B0` for call-to-action buttons, subtle highlights, or graphical elements that demand attention.

background

Employ `#00A69A` for primary content areas, providing a clear, refreshing, and serene backdrop.

text

For body text, utilize `#005A51` for optimal readability. For headlines on darker backgrounds, white text works beautifully.

Accessibility notes

Ensure `#005A51` provides sufficient contrast against lighter shades like `#00CCA0` and `#00F2B0` for text.
Avoid using `#00F2B0` for extensive body text as its brightness can be fatiguing.
When pairing lighter tones, verify the contrast ratio meets WCAG standards, especially for interactive elements.
White text on `#005A51` or `#008076` offers excellent readability and a crisp look.

Recommended combinations

Mystic Depth

Creates a deep, harmonious contrast, ideal for hero sections or sophisticated branding.

#005A51 · #008076 · #00CCA0

Vibrant Glow

Offers a bright, energetic progression, perfect for highlighting interactive elements or data visualization.

#00A69A · #00CCA0 · #00F2B0

Balanced Jade

Combines deep grounding with vibrant accents, suitable for compelling calls to action or feature sections.

#005A51 · #00A69A · #00F2B0

CSS variables

:root {
  --jade-mountain-mystic-1: #005A51;
  --jade-mountain-mystic-2: #008076;
  --jade-mountain-mystic-3: #00A69A;
  --jade-mountain-mystic-4: #00CCA0;
  --jade-mountain-mystic-5: #00F2B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jade-mountain-mystic": {
        1: "#005A51",
        2: "#008076",
        3: "#00A69A",
        4: "#00CCA0",
        5: "#00F2B0",
      }
    }
  }
}

Hex values

Color 1#005A51

Color 2#008076

Color 3#00A69A

Color 4#00CCA0

Color 5#00F2B0

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

3.9:1AA18

5.6:1AA

1.7:1Fail

1.6:1Fail

2.3:1Fail

3.3:1AA18

2.7:1Fail

1.6:1Fail

1.5:1Fail

2.1:1Fail

3.9:1AA18

2.3:1Fail

1.5:1Fail

1.4:1Fail

5.6:1AA

3.3:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Jade Mountain Mystic