Back to palettes

Palette

Ancient Ruin Stone

Subtle, weathered tones echoing the enduring grace of ancient stone ruins, stoic and grand.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#696969#A9A9A9#D3D3D3#8B4513#C0C0C0

Palette guide

How to use Ancient Ruin Stone

Overview

The 'Ancient Ruin Stone' palette offers subtle, weathered tones echoing the enduring grace of ancient stone ruins, stoic and grand. This neutral collection, featuring a grounding #696969 and a brighter #D3D3D3, introduces a unique warmth with #8B4513 (a rich, earthy brown). Designers and developers can use this palette to create sophisticated, historic, and nature-inspired aesthetics. The interplay of cool greys with a single warm accent provides versatility, allowing for designs that are both strong and inviting, perfect for conveying age and natural beauty.

Best used for

  • Historic site branding
  • Rustic luxury goods marketing
  • Ancient civilization themed projects
  • Nature-inspired web design
  • Traditional craftsmanship displays
  • Editorial layouts with an antique feel

Suggested color roles

primary

Utilize #696969 as a stable, dark grey base for main content areas or structural elements, providing a sense of gravitas.

secondary

Apply #A9A9A9 for supporting elements, subheadings, or subtle textures, offering a lighter touch.

accent

Introduce #8B4513 as a rich, earthy accent for calls-to-action, important details, or decorative elements, adding warmth and contrast.

background

Employ #D3D3D3 as a soft, bright base for your design, ensuring a clean and expansive canvas.

text

For optimal readability, use #696969 or a deep charcoal for body text, especially on lighter backgrounds like #D3D3D3.

Accessibility notes

  • Ensure #696969 text on #D3D3D3 background meets WCAG AA contrast standards.
  • #8B4513 provides excellent contrast on #D3D3D3 for headings and key information.
  • Avoid using #A9A9A9 for small text on #C0C0C0 to prevent low contrast issues.
  • Test interactive elements to ensure clear focus states and sufficient contrast.

Recommended combinations

Stone & Earth

A grounded and warm combination ideal for hero sections or distinct content blocks needing strong contrast.

#696969 · #8B4513 · #D3D3D3

Aged Patina

Creates a subtle, historic feel, perfect for backgrounds, overlays, or decorative elements.

#A9A9A9 · #C0C0C0 · #8B4513

Grand Structure

A balanced and elegant trio for titles, main navigation, and supporting informational graphics.

#696969 · #D3D3D3 · #A9A9A9

CSS variables

:root {
  --ancient-ruin-stone-1: #696969;
  --ancient-ruin-stone-2: #A9A9A9;
  --ancient-ruin-stone-3: #D3D3D3;
  --ancient-ruin-stone-4: #8B4513;
  --ancient-ruin-stone-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-ruin-stone": {
        1: "#696969",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#8B4513",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

ancient grey brown paletteweathered architecture colorshistoric stone hexrustic elegant designruin texture palette

Palette colors

Hex values

Color 1#696969
·
Color 2#A9A9A9
·
Color 3#D3D3D3
·
Color 4#8B4513
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
3.7:1AA18
1.3:1Fail
3:1AA18
2
2.3:1Fail
1.6:1Fail
3:1AA18
1.3:1Fail
3
3.7:1AA18
1.6:1Fail
4.7:1AA
1.2:1Fail
4
1.3:1Fail
3:1AA18
4.7:1AA
3.9:1AA18
5
3:1AA18
1.3:1Fail
1.2:1Fail
3.9:1AA18

Similar palettes

More like Ancient Ruin Stone

View all neutral
Slate Wall
Stone Mosaic Craft
Ancient Roman Stone
Ancient Rune Stone
Ancient Stone Temple
Ancient Temple Stones