Palette

Jade River Stone

A calming blend inspired by the smooth, mossy stones found in a serene riverbed.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jade River Stone 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 River Stone.

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

Data visualization

#3B6B5B#6A9E8B#9CCFBF#CDE9E2#1F4238

Palette guide

How to use Jade River Stone

Overview

The Jade River Stone palette offers a tranquil and grounding experience, drawing inspiration from serene natural landscapes. This collection of cool, earthy greens is ideal for projects aiming to evoke calm and stability. Featuring a deep forest green like #1F4238, a rich jade tone such as #3B6B5B, and a softer moss green #6A9E8B, it provides depth and versatility. The lighter, airy tones of #9CCFBF and the almost-white #CDE9E2 complete the spectrum, offering excellent options for backgrounds and subtle accents. Designers and developers can leverage this palette to create harmonious, nature-inspired interfaces and branding that feels organic and sophisticated.

Best used for

Eco-friendly brand identities and packaging
Wellness and meditation app interfaces
Spa, yoga studio, or nature retreat websites
Sustainable product design and marketing materials
Interior design for calming spaces
Educational content on environmental topics

Suggested color roles

primary

#3B6B5B - Use this rich, balanced jade green for primary calls-to-action, prominent headings, or main brand elements to convey stability and nature.

secondary

#6A9E8B - A softer, approachable green, perfect for subheadings, active state elements, or as a supportive color in data visualizations and illustrations.

accent

#9CCFBF - This light, airy green serves well as a subtle highlight for interactive elements, small icons, or to add a touch of freshness without overpowering.

background

#CDE9E2 - An extremely light, almost off-white green, ideal for clean, spacious backgrounds that softly reflect the palette's natural essence without being stark.

text

#1F4238 - This very dark, deep forest green provides excellent readability and a sophisticated alternative to pure black for body text, ensuring a cohesive and natural feel.

Accessibility notes

Ensure sufficient contrast between #1F4238 text and #CDE9E2 backgrounds for optimal readability, meeting WCAG AA standards.
Avoid placing #9CCFBF text on #CDE9E2 backgrounds as their low contrast will make it difficult to read for many users.
Use a contrast checker when pairing lighter greens like #6A9E8B with #9CCFBF for interactive elements to ensure accessibility.
For larger headings or display text, #3B6B5B on a light background offers good visibility and impact.

Recommended combinations

Deep Forest Calm

Ideal for corporate or high-end branding, conveying authority and natural elegance on websites or print.

#1F4238 · #3B6B5B · #CDE9E2

River Stone Serenity

Perfect for light, airy web interfaces, mobile apps, or health and wellness content requiring a soft, inviting feel.

#6A9E8B · #9CCFBF · #CDE9E2

Earthy Contrast

Effective for creating visual hierarchy in dashboards or presentations, using the darkest for text and mid-tone for key data.

#3B6B5B · #1F4238 · #9CCFBF

CSS variables

:root {
  --jade-river-stone-1: #3B6B5B;
  --jade-river-stone-2: #6A9E8B;
  --jade-river-stone-3: #9CCFBF;
  --jade-river-stone-4: #CDE9E2;
  --jade-river-stone-5: #1F4238;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jade-river-stone": {
        1: "#3B6B5B",
        2: "#6A9E8B",
        3: "#9CCFBF",
        4: "#CDE9E2",
        5: "#1F4238",
      }
    }
  }
}

Hex values

Color 1#3B6B5B

Color 2#6A9E8B

Color 3#9CCFBF

Color 4#CDE9E2

Color 5#1F4238

Accessibility

Contrast checker

2:1Fail

3.5:1AA18

4.8:1AA

1.8:1Fail

2:1Fail

1.8:1Fail

2.4:1Fail

3.6:1AA18

3.5:1AA18

1.8:1Fail

1.4:1Fail

6.4:1AA

4.8:1AA

2.4:1Fail

1.4:1Fail

8.6:1AAA

1.8:1Fail

3.6:1AA18

6.4:1AA

8.6:1AAA

Similar palettes

More like Jade River Stone

Jade River Stone

See it in context.

Ready when you are.

Built with Jade River Stone.

How to use Jade River Stone

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Forest Calm

River Stone Serenity

Earthy Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Jade River Stone