Palette

Weathered Ruin Stone

Muted tones and aged textures reminiscent of weathered stones from ancient ruins.

neutralnatural5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6D6864#A89F97#CEC5BD#4B4542#EFEBE7

Palette guide

How to use Weathered Ruin Stone

Overview

The Weathered Ruin Stone palette draws inspiration from ancient, time-worn masonry, presenting a collection of muted, earthy neutrals. A solid grey-brown, #6D6864, forms the versatile primary, gracefully supported by the lighter, subtle #A89F97. The deepest tone, #4B4542, provides crucial grounding and strong contrast, while the almost-white #EFEBE7 offers a clean, airy backdrop. This palette is perfect for designers aiming for a rustic, historical, or minimalist aesthetic. Developers will appreciate its natural harmony, allowing for the creation of sophisticated and accessible interfaces that convey stability, authenticity, and a serene, timeless quality.

Best used for

Historical preservation projects and museums
Architectural and interior design portfolios
Artisanal product branding (pottery, stone crafts)
Nature-inspired websites and blogs
Rustic event decor and wedding themes
Minimalist fashion and accessory brands

Suggested color roles

primary

Use #6D6864 as a solid, grounding grey-brown for main content blocks or brand identity.

secondary

Employ #A89F97 for lighter, complementary stone shades in backgrounds, subheadings, or secondary details.

accent

Apply #4B4542 for deep, strong accents in important text, buttons, or decorative elements.

background

Utilize #EFEBE7 as a soft, near-white base for content areas, ensuring maximum readability.

text

Choose #4B4542 for primary body text, offering strong legibility and a sophisticated, earthy feel.

Accessibility notes

Ensure #4B4542 text on #EFEBE7 provides excellent contrast for all users.
Use white or #EFEBE7 for text on darker backgrounds like #4B4542 or #6D6864.
Avoid using #A89F97 text on #EFEBE7 for small font sizes due to potential low contrast.
Test contrast ratios for all interactive elements, especially with mid-tone colors like #6D6864.

Recommended combinations

Ancient Stone

Creates a solid, earthy, and timeless feel, ideal for headers and main content.

#4B4542 · #6D6864 · #A89F97

Ruin Light

Offers an airy, subtle, and delicate aesthetic, perfect for backgrounds and light accents.

#EFEBE7 · #CEC5BD · #A89F97

Deep Earth

Provides strong contrast and balanced lightness, suitable for calls-to-action and distinct sections.

#4B4542 · #A89F97 · #EFEBE7

CSS variables

:root {
  --weathered-ruin-stone-1: #6D6864;
  --weathered-ruin-stone-2: #A89F97;
  --weathered-ruin-stone-3: #CEC5BD;
  --weathered-ruin-stone-4: #4B4542;
  --weathered-ruin-stone-5: #EFEBE7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-ruin-stone": {
        1: "#6D6864",
        2: "#A89F97",
        3: "#CEC5BD",
        4: "#4B4542",
        5: "#EFEBE7",
      }
    }
  }
}

Hex values

Color 1#6D6864

Color 2#A89F97

Color 3#CEC5BD

Color 4#4B4542

Color 5#EFEBE7

Accessibility

Contrast checker

2.1:1Fail

3.2:1AA18

1.7:1Fail

4.6:1AA

2.1:1Fail

1.5:1Fail

3.6:1AA18

2.2:1Fail

3.2:1AA18

1.5:1Fail

5.5:1AA

1.4:1Fail

1.7:1Fail

3.6:1AA18

5.5:1AA

7.9:1AAA

4.6:1AA

2.2:1Fail

1.4:1Fail

7.9:1AAA

Similar palettes

More like Weathered Ruin Stone

View all neutral

Ancient Temple Sandstone

Aged Scroll Patina

Ancient Ruin Stone

Bohemian Dream Weaver

Grain Silo Dusk

River Stone Blend