Back to palettes

Palette

Riverbend Stone

Smooth, varied grays reflecting the natural, serene pebbles found along a quiet riverbend.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B3AFAD#8F8B88#6B6763#4A4744#292725

Palette guide

How to use Riverbend Stone

Overview

The Riverbend Stone palette embodies the natural elegance of smooth, varied grays found along a quiet riverbend. With a rich, deep #292725, a grounding #4A4744, and the lighter #B3AFAD, this palette offers a sophisticated and earthy foundation. Designers can leverage its subtle, warm-leaning grays to create a sense of organic minimalism and timeless appeal. Developers will find the clear progression of values useful for establishing strong visual hierarchies, from prominent headings to subtle background textures, ensuring a cohesive and refined user experience across various digital and print applications that value understated luxury and natural textures.

Best used for

  • Earthy and natural product branding
  • Minimalist interior design concepts
  • High-end menswear or artisanal craft websites
  • Editorial design with a rustic touch
  • Luxury real estate presentations
  • Sustainable living or eco-conscious brands

Suggested color roles

primary

Use #4A4744 for main content areas or brand identity, providing a solid, warm grey base.

secondary

Apply #6B6763 for supporting elements, subheadings, or background panels, offering a harmonious mid-tone.

accent

Reserve #292725 for impactful calls-to-action, important icons, or robust typography, ensuring strong visual weight.

background

Employ #B3AFAD as a soft, inviting background, allowing content to feel grounded yet spacious.

text

A deep shade like #292725 or a true black provides optimal readability against lighter backgrounds such as #B3AFAD.

Accessibility notes

  • Ensure #292725 text on #B3AFAD or #8F8B88 backgrounds meets WCAG AA contrast ratios for legibility.
  • Be cautious when using #6B6763 text on #B3AFAD; it might lack sufficient contrast for small font sizes.
  • For interactive elements, ensure distinct hover/focus states, perhaps by darkening or outlining.
  • A contrast checker is crucial for validating all text-background pairings within this subtle palette.

Recommended combinations

Deep Earth

Excellent for header-body-footer structures, providing strong contrast and an earthy feel.

#292725 · #B3AFAD · #6B6763

Subtle Layers

Ideal for layered UI components like cards or modals, creating depth without harsh edges.

#8F8B88 · #B3AFAD · #6B6763

Core Contrast

Perfect for text-heavy interfaces: #B3AFAD as background, #4A4744 for body, and #292725 for headings.

#4A4744 · #B3AFAD · #292725

CSS variables

:root {
  --riverbend-stone-1: #B3AFAD;
  --riverbend-stone-2: #8F8B88;
  --riverbend-stone-3: #6B6763;
  --riverbend-stone-4: #4A4744;
  --riverbend-stone-5: #292725;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "riverbend-stone": {
        1: "#B3AFAD",
        2: "#8F8B88",
        3: "#6B6763",
        4: "#4A4744",
        5: "#292725",
      }
    }
  }
}

Related searches

warm grey color schemeearthy neutral palettesophisticated grey designnatural stone web colorsminimalist rustic palette

Palette colors

Hex values

Color 1#B3AFAD
·
Color 2#8F8B88
·
Color 3#6B6763
·
Color 4#4A4744
·
Color 5#292725
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.2:1AA18
6.8:1AA
2
1.6:1Fail
1.7:1Fail
2.7:1Fail
4.4:1AA18
3
2.6:1Fail
1.7:1Fail
1.6:1Fail
2.7:1Fail
4
4.2:1AA18
2.7:1Fail
1.6:1Fail
1.6:1Fail
5
6.8:1AA
4.4:1AA18
2.7:1Fail
1.6:1Fail

Similar palettes

More like Riverbend Stone

View all neutral