Back to palettes

Palette

Ancient Ruin Stone

A robust monochrome palette reflecting the weathered, timeless essence of ancient stone ruins.

monochromeminimal5 colors
More monochrome 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

#A0A0A0#C0C0C0#808080#606060#404040

Palette guide

How to use Ancient Ruin Stone

Overview

The 'Ancient Ruin Stone' palette is a robust monochrome collection, reflecting the weathered, timeless essence of ancient stone ruins. Featuring a gradient from deep #404040 to bright #C0C0C0, with mid-tones like #808080, it's ideal for designers and developers seeking a strong, minimalist aesthetic. This palette provides a solid foundation for designs that require a sense of history, durability, and understated grandeur. The subtle variations allow for depth and texture, preventing a flat appearance while maintaining a cohesive, stoic mood across applications.

Best used for

  • Historical game environments
  • Architectural visualization
  • Minimalist website design
  • Brutalist design projects
  • Photography portfolios
  • Industrial branding

Suggested color roles

primary

Designate #606060 as the primary color for major UI components or dominant graphical elements, offering a stable mid-tone.

secondary

Utilize #808080 for supporting information, borders, or secondary interactive states, adding subtle visual interest.

accent

Apply #A0A0A0 sparingly for delicate highlights, hover states, or small icons to introduce a touch of luminosity.

background

Choose #C0C0C0 as a clean, light background for content, providing a spacious and legible canvas.

text

For optimal contrast and readability, use #404040 for body text and headings, especially on lighter backgrounds like #C0C0C0.

Accessibility notes

  • Ensure #404040 text on #C0C0C0 background achieves WCAG AA contrast standards.
  • Use #606060 for larger headings on #808080 to maintain good readability.
  • Avoid employing #A0A0A0 for small text on #C0C0C0, as contrast may be insufficient.
  • Verify that all interactive elements have clear focus states and sufficient contrast against their backgrounds.

Recommended combinations

Deep Shadow

Creates a strong, grounding visual hierarchy for primary content blocks and deep shadows.

#404040 · #606060 · #808080

Weathered Surface

Ideal for backgrounds, subtle textures, or overlays that evoke a sense of light, aged stone.

#808080 · #A0A0A0 · #C0C0C0

Monolith

A bold and structured combination for titles, hero sections, or prominent UI components.

#606060 · #404040 · #A0A0A0

CSS variables

:root {
  --ancient-ruin-stone-2-1: #A0A0A0;
  --ancient-ruin-stone-2-2: #C0C0C0;
  --ancient-ruin-stone-2-3: #808080;
  --ancient-ruin-stone-2-4: #606060;
  --ancient-ruin-stone-2-5: #404040;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-ruin-stone-2": {
        1: "#A0A0A0",
        2: "#C0C0C0",
        3: "#808080",
        4: "#606060",
        5: "#404040",
      }
    }
  }
}

Related searches

monochrome grey paletteancient stone colorsruin aesthetic hexhistoric grey tonesarchitectural grey

Palette colors

Hex values

Color 1#A0A0A0
·
Color 2#C0C0C0
·
Color 3#808080
·
Color 4#606060
·
Color 5#404040
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.5:1Fail
2.4:1Fail
4:1AA18
2
1.4:1Fail
2.2:1Fail
3.5:1AA18
5.7:1AA
3
1.5:1Fail
2.2:1Fail
1.6:1Fail
2.6:1Fail
4
2.4:1Fail
3.5:1AA18
1.6:1Fail
1.6:1Fail
5
4:1AA18
5.7:1AA
2.6:1Fail
1.6:1Fail

Similar palettes

More like Ancient Ruin Stone

View all monochrome
Ancient Stone Whisper
Ancient Ruin Stone
Ancient Rune Carving
Cobblestone Street Muted
Historic Tablet Text
Stone Temple Echo