Palette

Ancient Ruins Dust

Muted, earthy tones that tell stories of weathered stone, sun-baked earth, and forgotten empires.

earthminimal5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ancient Ruins Dust 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 Ruins Dust.

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

Data visualization

#5D4A3D#967C6F#C0AE9D#DDCBA9#F5F5DC

Palette guide

How to use Ancient Ruins Dust

Overview

The 'Ancient Ruins Dust' palette features muted, earthy tones that tell stories of weathered stone, sun-baked earth, and forgotten empires. Ranging from the deep #5D4A3D to the soft, near-white #F5F5DC, and including shades like the warm #C0AE9D, this neutral palette is perfect for designers and developers aiming for a minimalist, historical, and natural aesthetic. It provides a rich yet understated foundation, allowing for depth and texture while maintaining a sense of aged elegance, ideal for conveying heritage and timelessness in various applications.

Best used for

Historical fiction covers
Rustic home decor branding
Natural skincare product lines
Travel blogs focusing on ancient sites
Documentary film aesthetics
Artisanal product packaging

Suggested color roles

primary

Designate #5D4A3D as a deep, grounding brown for primary elements, such as main content blocks or strong headers, providing visual weight.

secondary

Utilize #967C6F as a warm, mid-tone brown for supporting sections, subheadings, or subtle graphical accents, adding warmth.

accent

Introduce #DDCBA9 as a lighter, sun-baked accent for interactive elements, delicate details, or to create visual separation.

background

Employ #F5F5DC as a soft, near-white parchment background, offering a clean and expansive canvas with an antique feel.

text

For optimal legibility, use #5D4A3D for all body text and headings, providing strong contrast against lighter backgrounds like #F5F5DC.

Accessibility notes

Ensure #5D4A3D text on #F5F5DC background meets WCAG AA contrast standards for readability.
Use #967C6F for larger text or headings on #C0AE9D for improved visual distinction.
Avoid using #C0AE9D for small text on #DDCBA9 due to potential low contrast.
Provide clear visual hierarchy with contrasting text and background colors to enhance user experience.

Recommended combinations

Deep Earth

Creates a rich, layered effect suitable for prominent content blocks, footer areas, or deep textural backgrounds.

#5D4A3D · #967C6F · #C0AE9D

Sun-baked Stone

Ideal for backgrounds, subtle gradients, or overlays that evoke a warm, weathered, sun-drenched feel.

#967C6F · #C0AE9D · #DDCBA9

Desert Horizon

A light and contrasting combination for titles, hero sections, or informational graphics against a pale backdrop.

#F5F5DC · #DDCBA9 · #5D4A3D

CSS variables

:root {
  --ancient-ruins-dust-1: #5D4A3D;
  --ancient-ruins-dust-2: #967C6F;
  --ancient-ruins-dust-3: #C0AE9D;
  --ancient-ruins-dust-4: #DDCBA9;
  --ancient-ruins-dust-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-ruins-dust": {
        1: "#5D4A3D",
        2: "#967C6F",
        3: "#C0AE9D",
        4: "#DDCBA9",
        5: "#F5F5DC",
      }
    }
  }
}

Hex values

Color 1#5D4A3D

Color 2#967C6F

Color 3#C0AE9D

Color 4#DDCBA9

Color 5#F5F5DC

Accessibility

Contrast checker

2.2:1Fail

3.9:1AA18

5.3:1AA

7.6:1AAA

2.2:1Fail

1.8:1Fail

2.4:1Fail

3.5:1AA18

3.9:1AA18

1.8:1Fail

1.3:1Fail

1.9:1Fail

5.3:1AA

2.4:1Fail

1.3:1Fail

1.4:1Fail

7.6:1AAA

3.5:1AA18

1.9:1Fail

1.4:1Fail

Similar palettes

More like Ancient Ruins Dust

View all earth

Ancient Earth Whisper

Ancient Stone

Desert Cairn Stack

Earthen Craft Studio

Minimalist Clay Garden

Zen Temple Clay