Palette

Ancient Ruin Stone

Subtle variations of grey and weathered beige, reminiscent of forgotten stone ruins.

monochromecalm5 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

#696969#808080#A9A9A9#D3D3D3#E0E0E0

Palette guide

How to use Ancient Ruin Stone

Overview

The 'Ancient Ruin Stone' palette offers subtle variations of grey and weathered beige, reminiscent of forgotten stone ruins. This monochrome collection, ranging from the darker #696969 to the soft #E0E0E0, provides a calm and understated aesthetic for designers and developers. With shades like the versatile #A9A9A9, it allows for creating depth and texture while maintaining a cohesive, serene atmosphere. It’s perfect for projects aiming to evoke history, tranquility, and a quiet sense of enduring beauty without being overtly dramatic.

Best used for

Calm user interfaces and apps
Architectural renders and portfolios
Luxury brand websites
Art gallery presentations
Minimalist photography backdrops
Documentary film title sequences

Suggested color roles

primary

Designate #696969 as a stable, mid-dark base for primary content areas, providing a grounded feel.

secondary

Utilize #808080 for supporting elements like subheadings, borders, or subtle shadows, adding dimension.

accent

Introduce #A9A9A9 as a gentle highlight for interactive elements or delicate illustrations, offering subtle visual cues.

background

Employ #E0E0E0 as a soft, light canvas for your design, ensuring an airy and tranquil backdrop.

text

For optimal readability, use #696969 for body text and headings on lighter backgrounds like #E0E0E0 or #D3D3D3.

Accessibility notes

Ensure #696969 text on #E0E0E0 background meets WCAG AA contrast standards.
Use #808080 for larger headings on #D3D3D3 to maintain good readability.
Avoid using #A9A9A9 for small text on very light backgrounds like #E0E0E0 due to potential low contrast.
Consider increasing font weight for lighter text colors on light backgrounds to improve legibility.

Recommended combinations

Weathered Facade

Creates a textured, deep look suitable for distinct sections or visual layering.

#696969 · #808080 · #A9A9A9

Dusty Horizon

Ideal for expansive backgrounds or subtle gradients that evoke a light, ethereal quality.

#A9A9A9 · #D3D3D3 · #E0E0E0

Quiet Strength

A balanced and enduring combination for main titles, navigation, and supporting informational graphics.

#808080 · #696969 · #D3D3D3

CSS variables

:root {
  --ancient-ruin-stone-4-1: #696969;
  --ancient-ruin-stone-4-2: #808080;
  --ancient-ruin-stone-4-3: #A9A9A9;
  --ancient-ruin-stone-4-4: #D3D3D3;
  --ancient-ruin-stone-4-5: #E0E0E0;
}

Tailwind config

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

Hex values

Color 1#696969

Color 2#808080

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#E0E0E0

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

3.7:1AA18

4.2:1AA18

1.4:1Fail

1.7:1Fail

2.6:1Fail

3:1Fail

2.3:1Fail

1.7:1Fail

1.6:1Fail

1.8:1Fail

3.7:1AA18

2.6:1Fail

1.6:1Fail

1.1:1Fail

4.2:1AA18

3:1Fail

1.8:1Fail

1.1:1Fail

Similar palettes

More like Ancient Ruin Stone

View all monochrome

Contemplative Stone Flow

Dusky Meadow Mist

Gravel Zen Meditations

Moonlit Stone Steps

River Stone Calm

River Stone Meditation