Back to palettes

Palette

Ancient Ruin Stone

A monochromatic study of weathered stone and timeless architecture, imbued with a sense of history.

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

#4A4A4A#707070#A0A0A0#C8C8C8#E0E0E0

Palette guide

How to use Ancient Ruin Stone

Overview

The 'Ancient Ruin Stone' palette offers a monochromatic study of weathered stone and timeless architecture, imbued with a sense of history. Ranging from the deep #4A4A4A to the soft #E0E0E0, and featuring a versatile mid-tone like #A0A0A0, this palette is excellent for designers and developers aiming for a minimalist yet profound aesthetic. Its cohesive grey tones provide excellent opportunities for creating depth, texture, and visual hierarchy, making it perfect for projects that need to convey solemnity, strength, and historical gravitas in a clean, contemporary manner.

Best used for

  • Historical preservation sites
  • Museum exhibit design
  • Architectural portfolios
  • Minimalist branding
  • Luxury product design
  • Educational platforms with a serious tone

Suggested color roles

primary

Use #707070 as a solid, versatile mid-grey for main content areas, ensuring a balanced and stable foundation.

secondary

Apply #A0A0A0 for supporting information, secondary navigation, or subtle dividers, adding visual lightness.

accent

Designate #4A4A4A as the deepest shade for impactful headlines, calls-to-action, or strong graphical elements, providing powerful contrast.

background

Employ #E0E0E0 as a clean, light backdrop for your design, offering an expansive and modern canvas.

text

For crisp readability, use #4A4A4A for all body text and headings, especially against lighter backgrounds like #E0E0E0 or #C8C8C8.

Accessibility notes

  • Verify that #4A4A4A text on #E0E0E0 background meets WCAG AA contrast standards.
  • Use #707070 for larger text or headings on #C8C8C8 for improved readability.
  • Avoid using #A0A0A0 for small body text on very light backgrounds to prevent insufficient contrast.
  • Ensure sufficient contrast for all interactive elements to provide clear usability.

Recommended combinations

Deep Shadow

Creates a rich, grounding visual hierarchy for primary content blocks and deep textural effects.

#4A4A4A · #707070 · #A0A0A0

Stone Facade

Ideal for layered backgrounds, subtle textures, or overlays that evoke weathered stone surfaces.

#707070 · #A0A0A0 · #C8C8C8

Clean Backdrop

A light and modern combination suitable for expansive backgrounds, borders, and subtle UI elements.

#E0E0E0 · #C8C8C8 · #A0A0A0

CSS variables

:root {
  --ancient-ruin-stone-5-1: #4A4A4A;
  --ancient-ruin-stone-5-2: #707070;
  --ancient-ruin-stone-5-3: #A0A0A0;
  --ancient-ruin-stone-5-4: #C8C8C8;
  --ancient-ruin-stone-5-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-ruin-stone-5": {
        1: "#4A4A4A",
        2: "#707070",
        3: "#A0A0A0",
        4: "#C8C8C8",
        5: "#E0E0E0",
      }
    }
  }
}

Related searches

monochromatic grey historyweathered stone colorsancient architecture paletteminimalist grey designhistoric ruin hex

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#707070
·
Color 3#A0A0A0
·
Color 4#C8C8C8
·
Color 5#E0E0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.4:1AA18
5.3:1AA
6.7:1AA
2
1.8:1Fail
1.9:1Fail
3:1Fail
3.8:1AA18
3
3.4:1AA18
1.9:1Fail
1.6:1Fail
2:1Fail
4
5.3:1AA
3:1Fail
1.6:1Fail
1.3:1Fail
5
6.7:1AA
3.8:1AA18
2:1Fail
1.3:1Fail

Similar palettes

More like Ancient Ruin Stone

View all monochrome
Ancient Ruin Stone
Stone Tablet Script
Ancient Rune Carving
Ancient Stone Whisper
Historic Tablet Text
Monochrome River Stone