Palette

Ancient Ruin Stone

A timeless collection of somber grays reflects the enduring strength and quiet dignity of ancient stone ruins.

neutralnatural5 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

#4A4A4A#6D6D6D#909090#B3B3B3#D6D6D6

Palette guide

How to use Ancient Ruin Stone

Overview

The 'Ancient Ruin Stone' palette presents a timeless collection of somber grays, reflecting the enduring strength and quiet dignity of ancient stone ruins. With shades ranging from the deep #4A4A4A to the lighter #D6D6D6, including a versatile #909090, this neutral palette is invaluable for designers and developers crafting sophisticated, understated experiences. Its monochromatic nature ensures harmony, while the varied tones provide opportunities for depth and subtle contrast, making it perfect for conveying a sense of history and gravitas in digital and physical designs.

Best used for

Museum branding and websites
Academic and research platforms
High-end minimalist fashion
Solemn memorial designs
Sophisticated packaging
Historical documentary aesthetics

Suggested color roles

primary

Utilize #6D6D6D as a balanced, foundational color for main content areas or structural elements, ensuring a steady presence.

secondary

Apply #909090 for secondary information, dividers, or subtle graphical accents, adding depth without distraction.

accent

Reserve #4A4A4A for impactful elements such as strong headlines, critical calls-to-action, or deep shadows, providing strong contrast.

background

Implement #D6D6D6 as a soft, expansive background, offering a clean and dignified canvas for all content.

text

For maximum legibility, use #4A4A4A for all body text and headings, especially when placed against lighter shades like #D6D6D6 or #B3B3B3.

Accessibility notes

Ensure #4A4A4A text on #D6D6D6 background meets WCAG AA contrast requirements for readability.
Use #6D6D6D for larger text or headings on #B3B3B3 to provide better visual distinction.
Avoid using #B3B3B3 for small body text on #D6D6D6 due to insufficient contrast.
Confirm that interactive elements have clear visual cues and sufficient contrast to indicate their functionality.

Recommended combinations

Ruined Wall

Creates a deep, layered effect ideal for textured backgrounds or distinct, weighty content blocks.

#4A4A4A · #6D6D6D · #909090

Dusty Path

Perfect for subtle gradients, overlays, or light backgrounds that evoke an airy, aged feel.

#909090 · #B3B3B3 · #D6D6D6

Solid Foundation

A strong, contrasting trio suitable for titles, main navigation, and supporting informational graphics.

#6D6D6D · #4A4A4A · #B3B3B3

CSS variables

:root {
  --ancient-ruin-stone-3-1: #4A4A4A;
  --ancient-ruin-stone-3-2: #6D6D6D;
  --ancient-ruin-stone-3-3: #909090;
  --ancient-ruin-stone-3-4: #B3B3B3;
  --ancient-ruin-stone-3-5: #D6D6D6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-ruin-stone-3": {
        1: "#4A4A4A",
        2: "#6D6D6D",
        3: "#909090",
        4: "#B3B3B3",
        5: "#D6D6D6",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#6D6D6D

Color 3#909090

Color 4#B3B3B3

Color 5#D6D6D6

Accessibility

Contrast checker

1.7:1Fail

2.8:1Fail

4.2:1AA18

6.1:1AA

1.7:1Fail

1.6:1Fail

2.5:1Fail

3.6:1AA18

2.8:1Fail

1.6:1Fail

1.5:1Fail

2.2:1Fail