Palette

Stone Temple Ruins

Weathered greys and subtle browns reflect the solemn, timeless grandeur of crumbling, forgotten stone structures.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stone Temple Ruins 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 Stone Temple Ruins.

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

Data visualization

#4A4A4A#7A7A7A#AAAAAA#D0D0D0#EAEAEA

Palette guide

How to use Stone Temple Ruins

Overview

The Stone Temple Ruins palette features weathered grays and subtle tones, reflecting the solemn, timeless grandeur of crumbling, forgotten stone structures. This monochrome collection spans from the very light #EAEAEA to the deep #4A4A4A, with versatile mid-tones like #7A7A7A and #AAAAAA. It's an excellent choice for designers aiming to evoke history, resilience, and a touch of dark, earthy minimalism. This palette can create robust, atmospheric, and profoundly elegant visual experiences, suitable for both light and dark mode interfaces, conveying a sense of enduring strength and ancient mystery.

Best used for

Dark mode interface designs
Historical documentary visual identity
Solemn art installations and exhibitions
Architectural photography showcases
Ancient history themed websites
Luxury vintage brand communications

Suggested color roles

primary

Use #7A7A7A (Gray) for balanced, main content areas, offering a sophisticated mid-tone.

secondary

Apply #AAAAAA (Dark Gray) for supportive elements, subtle background textures, or secondary information.

accent

Employ #4A4A4A (Dark Charcoal) for strong emphasis, bold headings, or to define key structural elements.

background

Utilize #EAEAEA (Very Light Gray) for a clean, expansive background, or #D0D0D0 for a slightly softer base.

text

Choose #4A4A4A (Dark Charcoal) or pure black for primary body text, ensuring excellent readability.

Accessibility notes

Ensure #4A4A4A text on #EAEAEA backgrounds provides strong contrast for all users.
Verify that #7A7A7A on #D0D0D0 has sufficient contrast for readability, especially for small text.
When using darker backgrounds, ensure text colors like #EAEAEA provide adequate contrast.
Carefully manage contrast for interactive elements to ensure clear affordance.

Recommended combinations

Ruined Majesty

Ideal for a pristine background, main text, and secondary headings, conveying solemn elegance.

#EAEAEA · #4A4A4A · #7A7A7A

Crumbling Layers

Great for creating layered UI, subtle depth in content blocks, and interactive elements.

#D0D0D0 · #AAAAAA · #7A7A7A

Solemn Contrast

Effective for dark mode primary elements, light accents, and supportive text, offering strong visual impact.

#4A4A4A · #EAEAEA · #AAAAAA

CSS variables

:root {
  --stone-temple-ruins-1: #4A4A4A;
  --stone-temple-ruins-2: #7A7A7A;
  --stone-temple-ruins-3: #AAAAAA;
  --stone-temple-ruins-4: #D0D0D0;
  --stone-temple-ruins-5: #EAEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-temple-ruins": {
        1: "#4A4A4A",
        2: "#7A7A7A",
        3: "#AAAAAA",
        4: "#D0D0D0",
        5: "#EAEAEA",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#7A7A7A

Color 3#AAAAAA

Color 4#D0D0D0

Color 5#EAEAEA

Accessibility

Contrast checker

2.1:1Fail

3.8:1AA18

5.7:1AA

7.4:1AAA

2.1:1Fail

1.8:1Fail

2.8:1Fail

3.6:1AA18

3.8:1AA18

1.8:1Fail

1.5:1Fail

1.9:1Fail

5.7:1AA

2.8:1Fail

1.5:1Fail

1.3:1Fail

7.4:1AAA

3.6:1AA18

1.9:1Fail

1.3:1Fail

Similar palettes

More like Stone Temple Ruins