Palette

Rustic Riverbank Calm

Soft, muted greens and blues reflecting the gentle flow of a quiet river, edged by natural, unassuming foliage.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rustic Riverbank Calm 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 Rustic Riverbank Calm.

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

Data visualization

#4F6D7A#7CA2AD#B3D8D0#E2EDEA#A7A38B

Palette guide

How to use Rustic Riverbank Calm

Overview

The "Rustic Riverbank Calm" palette offers a serene and muted collection of greens and blues, reflecting the gentle flow of a quiet river and its natural, unassuming foliage. It includes a deep 'Cadet Grey' (#4F6D7A), a soothing 'Powder Blue' (#7CA2AD), a light 'Aquamarine' (#B3D8D0), a very pale 'Mint Cream' (#E2EDEA), and an earthy 'Dark Khaki' (#A7A38B). This palette is ideal for designers and developers seeking to create tranquil, natural, and understated designs. Its cool, muted tones foster a sense of peace and natural harmony, perfect for projects requiring a calming and sophisticated touch.

Best used for

Wellness and spa-related websites or apps
Eco-friendly and sustainable brand identities
Nature photography portfolios
Mindfulness and meditation apps
Coastal or lakeside property marketing
Environmental non-profit organizations

Suggested color roles

primary

Use #4F6D7A (Cadet Grey) for main headings and key elements. Its deep, muted tone provides a strong, stable anchor for the palette.

secondary

Apply #7CA2AD (Powder Blue) as a supportive color for secondary information, navigation, or subtle background details, enhancing the calm mood.

accent

Incorporate #A7A38B (Dark Khaki) for subtle accents, borders, or icons. Its earthy tone grounds the cooler hues and adds a touch of natural rusticity.

background

Utilize #E2EDEA (Mint Cream) as a light, airy background. This soft, near-white shade ensures excellent readability and maintains the palette's tranquil essence.

text

Opt for #4F6D7A (Cadet Grey) for body text and important information. Its depth ensures clear legibility against the light backgrounds.

Accessibility notes

Ensure #4F6D7A (Cadet Grey) on #E2EDEA (Mint Cream) meets WCAG AA contrast standards for body text.
Avoid using #7CA2AD (Powder Blue) or #B3D8D0 (Aquamarine) for critical text on light backgrounds due to potentially low contrast.
For interactive elements, ensure sufficient contrast for focus states, especially with lighter colors.
Test color pairings for readability under various lighting conditions, as muted tones can sometimes be challenging.

Recommended combinations

River Flow

Creates a fresh, serene feel, ideal for hero sections or tranquil content areas.

#4F6D7A · #E2EDEA · #7CA2AD

Bankside Earth

Provides a grounded, natural base for content blocks, ensuring readability and a calm aesthetic.

#E2EDEA · #A7A38B · #4F6D7A

Muted Depths

Adds subtle depth and coolness, suitable for navigation, footers, or background patterns.

#7CA2AD · #B3D8D0 · #4F6D7A

CSS variables

:root {
  --rustic-riverbank-calm-1: #4F6D7A;
  --rustic-riverbank-calm-2: #7CA2AD;
  --rustic-riverbank-calm-3: #B3D8D0;
  --rustic-riverbank-calm-4: #E2EDEA;
  --rustic-riverbank-calm-5: #A7A38B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rustic-riverbank-calm": {
        1: "#4F6D7A",
        2: "#7CA2AD",
        3: "#B3D8D0",
        4: "#E2EDEA",
        5: "#A7A38B",
      }
    }
  }
}

Hex values

Color 1#4F6D7A

Color 2#7CA2AD

Color 3#B3D8D0

Color 4#E2EDEA

Color 5#A7A38B

Accessibility

Contrast checker

2:1Fail

3.6:1AA18

4.6:1AA

2.2:1Fail

2:1Fail

1.8:1Fail

2.3:1Fail

1.1:1Fail

3.6:1AA18

1.8:1Fail

1.3:1Fail

1.7:1Fail