Back to palettes

Palette

Emerald River Flow

A tranquil gradient of deep to light greens, inspired by lush riverbanks and flowing water.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Emerald River Flow 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 Emerald River Flow.

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

Data visualization

#006400#3CB371#2E8B57#008000#66CDAA

Palette guide

How to use Emerald River Flow

Overview

The Emerald River Flow palette offers a tranquil gradient of deep to light greens, inspired by lush riverbanks and flowing water. Featuring the profound depth of #006400 and #008000, it transitions through the balanced #2E8B57 and #3CB371, culminating in the refreshing #66CDAA. This collection is perfect for designs seeking to convey serenity, natural movement, and a sense of peaceful vitality. Ideal for environmental initiatives, wellness brands, or any digital interface that benefits from a clean, harmonious, and soothing aesthetic. The monochromatic progression provides excellent visual flow and depth, creating an immersive user experience.

Best used for

  • River conservation projects
  • Nature and landscape photography
  • Meditation and relaxation apps
  • Eco-friendly outdoor apparel
  • Hydration and wellness product marketing
  • Serene web and app interfaces

Suggested color roles

primary

Use #006400 as the deepest, most stable color for main headers, branding, or strong UI elements.

secondary

Employ #008000 as a supportive deep green for subheadings, important text, or active states.

accent

Apply #3CB371 as a refreshing, subtle accent for interactive elements or gentle highlights.

background

Utilize #66CDAA as a light, airy background for clean content areas, providing a calm and clear base.

text

Pair #006400 with light backgrounds for strong contrast, or use white/light gray on darker backgrounds.

Accessibility notes

  • #66CDAA may require darker text (e.g., #006400 or black) to ensure readability against lighter backgrounds.
  • Pair #006400 or #008000 with white or off-white text for optimal legibility on dark backgrounds.
  • Avoid using #2E8B57 directly on #3CB371 for small text due to potential low contrast.
  • Always verify WCAG AA contrast standards for all text and background combinations.

Recommended combinations

River Depths

Creates a strong, immersive foundation for primary branding or elegant dark mode interfaces.

#006400 · #008000 · #2E8B57

Flowing Water

Ideal for clean, inviting layouts with light backgrounds and clear, readable text.

#66CDAA · #3CB371 · #006400

Lush Banks

Suitable for interactive elements, progress indicators, or illustrating natural movement and vitality.

#2E8B57 · #3CB371 · #008000

CSS variables

:root {
  --emerald-river-flow-2-1: #006400;
  --emerald-river-flow-2-2: #3CB371;
  --emerald-river-flow-2-3: #2E8B57;
  --emerald-river-flow-2-4: #008000;
  --emerald-river-flow-2-5: #66CDAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-river-flow-2": {
        1: "#006400",
        2: "#3CB371",
        3: "#2E8B57",
        4: "#008000",
        5: "#66CDAA",
      }
    }
  }
}

Related searches

emerald river green palettemonochromatic nature colorscalm flowing water schemeserene green brandingenvironmental UI design

Palette colors

Hex values

Color 1#006400
·
Color 2#3CB371
·
Color 3#2E8B57
·
Color 4#008000
·
Color 5#66CDAA
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.8:1Fail
1.8:1Fail
1.4:1Fail
3.9:1AA18
2
2.8:1Fail
1.6:1Fail
1.9:1Fail
1.4:1Fail
3
1.8:1Fail
1.6:1Fail
1.2:1Fail
2.2:1Fail
4
1.4:1Fail
1.9:1Fail
1.2:1Fail
2.7:1Fail
5
3.9:1AA18
1.4:1Fail
2.2:1Fail
2.7:1Fail

Similar palettes

More like Emerald River Flow

View all monochrome