Palette

Riverbed Moss Flow

Evokes the tranquil flow of a forest river, lined with mossy stones and dappled light, a natural harmony.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Riverbed Moss 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 Riverbed Moss Flow.

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

Data visualization

#304233#4F6A50#7AA87B#B5B5B5#E0E0E0

Palette guide

How to use Riverbed Moss Flow

Overview

The Riverbed Moss Flow palette evokes the tranquil flow of a forest river, lined with mossy stones and dappled light, creating a natural harmony. This collection blends deep, organic greens like #304233 and #4F6A50 with softer, earthy greens such as #7AA87B, balanced by the neutral grays of #B5B5B5 and #E0E0E0. Designers and developers can utilize these hues to create grounded, natural, and inviting designs. It's perfect for projects seeking to convey authenticity, growth, and the serene beauty of a thriving ecosystem.

Best used for

Organic food and beverage branding
Gardening and landscaping websites
Eco-tourism promotional materials
Sustainable living blogs
Nature-themed educational apps
Handcrafted goods packaging

Suggested color roles

primary

#4F6A50 - A rich, balanced forest green, ideal for foundational elements, providing a strong, organic, and stable presence.

secondary

#7AA87B - A lighter, softer green that complements the primary, suitable for secondary information, subtle dividers, or background textures.

accent

#304233 - The deepest, darkest green, perfect for strong accents, call-to-action buttons, or elements requiring high contrast and visual weight.

background

#E0E0E0 - A very light, neutral grey, serving as a clean, expansive canvas that allows the natural greens to truly stand out.

text

#304233 - This deep green offers excellent readability for body text on the light #E0E0E0 background, providing a natural and sophisticated textual presence.

Accessibility notes

#304233 on #E0E0E0 provides strong contrast, suitable for all text sizes and meeting WCAG AA standards.
Be cautious when using #B5B5B5 or #7AA87B for text on #E0E0E0; contrast may be insufficient for readability, especially for smaller fonts.
Ensure interactive elements have clear visual indicators for focus and hover states, maintaining sufficient contrast.
The mid-grey #B5B5B5 is excellent for subtle borders or inactive states, but not for critical text on light backgrounds.

Recommended combinations

Forest Depths

Ideal for a clean web layout, using the lightest grey as background, the deep green for main text, and mid-green for headings.

#E0E0E0 · #304233 · #4F6A50

Moss & Stone

Use for creating layered UI components or illustrations, blending soft greens with a neutral grey for organic depth.

#7AA87B · #B5B5B5 · #4F6A50

Grounded Growth

Employ the deepest green for prominent branding, balanced by the lightest grey for clarity and a mid-grey for supporting details.

#304233 · #E0E0E0 · #B5B5B5

CSS variables

:root {
  --riverbed-moss-flow-1: #304233;
  --riverbed-moss-flow-2: #4F6A50;
  --riverbed-moss-flow-3: #7AA87B;
  --riverbed-moss-flow-4: #B5B5B5;
  --riverbed-moss-flow-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "riverbed-moss-flow": {
        1: "#304233",
        2: "#4F6A50",
        3: "#7AA87B",
        4: "#B5B5B5",
        5: "#E0E0E0",
      }
    }
  }
}

Hex values

Color 1#304233

Color 2#4F6A50

Color 3#7AA87B

Color 4#B5B5B5

Color 5#E0E0E0

Accessibility

Contrast checker

1.8:1Fail

4:1AA18

5.2:1AA

8.1:1AAA

1.8:1Fail

2.2:1Fail

2.9:1Fail

4.5:1AA

4:1AA18

2.2:1Fail

1.3:1Fail

2.1:1Fail

5.2:1AA

2.9:1Fail

1.3:1Fail

1.6:1Fail

8.1:1AAA

4.5:1AA

2.1:1Fail

1.6:1Fail

Similar palettes

More like Riverbed Moss Flow

Enchanted Moss Garden

Forest Canopy

Forest Floor Moss