Palette

Ancient Stone Rubble

A cool grey palette reflecting the varied textures and shades of ancient, weathered stone rubble.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ancient Stone Rubble 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 Stone Rubble.

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

Data visualization

#6A6E6B#8C908D#ADB1AD#CDD1CD#EBEFEF

Palette guide

How to use Ancient Stone Rubble

Overview

The 'Ancient Stone Rubble' palette offers a cool grey collection reflecting the varied textures and shades of ancient, weathered stone rubble. With shades ranging from the deep #6A6E6B to the bright #EBEFEF, and including versatile mid-tones like #ADB1AD, this monochrome, subtle, and minimal palette is perfect for designers and developers crafting clean, modern, and understated designs. It provides a harmonious blend of cool greys, ideal for conveying a sense of age, natural textures, and quiet strength in various digital and physical applications, from minimalist architecture to serene digital interfaces.

Best used for

Minimalist architecture and design
Conceptual art and installations
Urban planning and development visuals
Environmental studies presentations
High-tech product design
Serene digital interfaces and apps

Suggested color roles

primary

Utilize #6A6E6B as a mid-dark, cool grey for primary elements, offering a balanced and stable foundation.

secondary

Apply #8C908D as a lighter, supporting grey for sections, subheadings, or subtle graphical accents, adding visual softness.

accent

Introduce #EBEFEF as the brightest, airy highlight for interactive elements, delicate details, or to create visual separation.

background

Employ #CDD1CD as a soft, light grey background, offering a clean and expansive canvas with a subtle texture.

text

For optimal legibility, use #6A6E6B for all body text and headings, ensuring strong contrast against lighter backgrounds like #EBEFEF.

Accessibility notes

Ensure #6A6E6B text on #EBEFEF background meets WCAG AA contrast standards for readability.
Use #8C908D for larger headings on #CDD1CD for improved visual distinction.
Avoid using #ADB1AD for small text on #CDD1CD due to potential low contrast.
Check contrast for all interactive elements to ensure consistent legibility and usability.

Recommended combinations

Deep Rubble

Creates a dark, textured depth suitable for prominent content blocks, footers, or deep textural backgrounds.

#6A6E6B · #8C908D · #ADB1AD

Light Fragments

Ideal for layered backgrounds, subtle gradients, or overlays that evoke airy, fragmented stone textures.

#ADB1AD · #CDD1CD · #EBEFEF

Cool Stone

A contrasting yet minimal combination for titles, hero sections, or key informational graphics.

#8C908D · #EBEFEF · #6A6E6B

CSS variables

:root {
  --ancient-stone-rubble-1: #6A6E6B;
  --ancient-stone-rubble-2: #8C908D;
  --ancient-stone-rubble-3: #ADB1AD;
  --ancient-stone-rubble-4: #CDD1CD;
  --ancient-stone-rubble-5: #EBEFEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-stone-rubble": {
        1: "#6A6E6B",
        2: "#8C908D",
        3: "#ADB1AD",
        4: "#CDD1CD",
        5: "#EBEFEF",
      }
    }
  }
}

Hex values

Color 1#6A6E6B

Color 2#8C908D

Color 3#ADB1AD

Color 4#CDD1CD

Color 5#EBEFEF

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

3.4:1AA18

4.5:1AA18

1.6:1Fail

1.5:1Fail

2.1:1Fail

2.8:1Fail

2.4:1Fail

1.5:1Fail

1.4:1Fail

1.9:1Fail