Back to palettes

Palette

Emerald River Flow

A lush, flowing collection of greens, capturing the lively movement and freshness of an emerald river.

vibrantnatural5 colors
More vibrant 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

#228B22#3CB371#66CDAA#7CFC00#ADFF2F

Palette guide

How to use Emerald River Flow

Overview

The Emerald River Flow palette offers a lush, flowing collection of vibrant greens, capturing the lively movement and freshness of an emerald river. From the rich #228B22 and #3CB371, it transitions through the refreshing #66CDAA to the energetic #7CFC00, culminating in the luminous #ADFF2F. This collection is perfect for designs seeking to convey vitality, natural movement, and a sense of invigorating freshness. Ideal for outdoor adventure brands, health and wellness products, or any digital interface that benefits from a clean, dynamic, and lively aesthetic. The progressive lightness of the shades creates a vibrant visual hierarchy, offering a sense of clarity and boundless energy.

Best used for

  • Outdoor adventure sports branding
  • Health and wellness product marketing
  • Environmental education platforms
  • Nature-themed mobile games
  • Fresh food and organic produce branding
  • Dynamic and energetic web interfaces

Suggested color roles

primary

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

secondary

Employ #3CB371 as a supportive vibrant green for subheadings, important text, or active states.

accent

Apply #ADFF2F as the brightest, most luminous highlight for calls-to-action, alerts, or key features.

background

Utilize #66CDAA as a light, refreshing background for content areas, providing energy and clarity.

text

Pair #228B22 with light backgrounds for excellent contrast, or use white/light gray on darker backgrounds.

Accessibility notes

  • #ADFF2F and #7CFC00 require very dark text (e.g., #228B22 or black) to ensure readability.
  • Ensure sufficient contrast when using #66CDAA as a background for text, especially for smaller fonts.
  • Avoid using #3CB371 directly on #66CDAA for small text due to similar luminosity.
  • Always verify WCAG AA contrast standards for all text and background combinations.

Recommended combinations

River Current

Creates a strong, immersive foundation for primary branding or dynamic feature sections.

#228B22 · #3CB371 · #66CDAA

Fresh Rapids

Ideal for bright, inviting calls-to-action and clear content against a luminous background.

#ADFF2F · #7CFC00 · #228B22

Lively Flow

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

#66CDAA · #7CFC00 · #3CB371

CSS variables

:root {
  --emerald-river-flow-1: #228B22;
  --emerald-river-flow-2: #3CB371;
  --emerald-river-flow-3: #66CDAA;
  --emerald-river-flow-4: #7CFC00;
  --emerald-river-flow-5: #ADFF2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-river-flow": {
        1: "#228B22",
        2: "#3CB371",
        3: "#66CDAA",
        4: "#7CFC00",
        5: "#ADFF2F",
      }
    }
  }
}

Related searches

vibrant emerald green palettelively river colorsfresh nature brandingenergetic green schemeoutdoor UI design inspiration

Palette colors

Hex values

Color 1#228B22
·
Color 2#3CB371
·
Color 3#66CDAA
·
Color 4#7CFC00
·
Color 5#ADFF2F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.3:1Fail
3.3:1AA18
3.6:1AA18
2
1.6:1Fail
1.4:1Fail
2:1Fail
2.2:1Fail
3
2.3:1Fail
1.4:1Fail
1.5:1Fail
1.6:1Fail
4
3.3:1AA18
2:1Fail
1.5:1Fail
1.1:1Fail
5
3.6:1AA18
2.2:1Fail
1.6:1Fail
1.1:1Fail

Similar palettes

More like Emerald River Flow

View all vibrant