Palette

Crumbled Castle Remnants

A palette inspired by the weathered textures and historical grandeur of old castle ruins.

neutraldark5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Crumbled Castle Remnants 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 Crumbled Castle Remnants.

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

Data visualization

#6D6D6D#909090#3E443F#4A4A4A#BCB39E

Palette guide

How to use Crumbled Castle Remnants

Overview

The Crumbled Castle Remnants palette evokes the stoic beauty and weathered textures of ancient ruins, offering a sophisticated array of muted grays and earthy tones. Featuring a robust Gray (#6D6D6D), a lighter Gray (#909090), and a deep Charcoal Green (#3E443F), it provides a sense of history and gravitas. The inclusion of a standard Dark Gray (#4A4A4A) and a warm Tan (#BCB39E) adds versatility, allowing for both stark and subtle contrasts. Designers and developers can utilize this palette to create powerful, timeless, and grounded digital experiences. It's excellent for historical themes, architectural portfolios, or any project that benefits from a strong, classic, and enduring aesthetic.

Best used for

Historical documentary websites
Architectural design portfolios
RPG or fantasy game interfaces
Luxury menswear branding
Industrial design concepts
Rustic photography backdrops

Suggested color roles

primary

A solid, foundational gray (#6D6D6D) for main sections, backgrounds, or structural elements, conveying strength.

secondary

Use Dark Gray (#4A4A4A) for subheadings, secondary navigation, or deeper content panels, adding depth without being black.

accent

A warm, contrasting accent (#BCB39E) for interactive elements, highlights, or subtle decorative details, breaking the monochrome.

background

A brighter gray (#909090) that can serve as a clean, neutral backdrop, providing a sense of spaciousness.

text

Use Charcoal Green (#3E443F) or Dark Gray (#4A4A4A) for body text on lighter grays or Tan (#BCB39E). White text (#FFFFFF) works well on #6D6D6D, #4A4A4A, and #3E443F.

Accessibility notes

Most grays are mid-tone; ensure text on them has sufficient contrast (e.g., white text on #6D6D6D).
Tan (#BCB39E) is light; use dark text (like #3E443F or #4A4A4A) for readability.
Avoid using very light text on #909090 as contrast may be insufficient.
Always check contrast ratios for interactive elements and critical information.

Recommended combinations

Stone Walls

Ideal for clean, sophisticated website layouts, architectural presentations, or historical content.

#909090 · #6D6D6D · #BCB39E

Ancient Moss

Excellent for earthy brand identities, rugged outdoor themes, or dark mode interfaces.

#3E443F · #6D6D6D · #4A4A4A

Timeless Patina

Suitable for elegant product showcases, rustic editorial designs, or historical art displays.

#BCB39E · #6D6D6D · #4A4A4A

CSS variables

:root {
  --crumbled-castle-remnants-1: #6D6D6D;
  --crumbled-castle-remnants-2: #909090;
  --crumbled-castle-remnants-3: #3E443F;
  --crumbled-castle-remnants-4: #4A4A4A;
  --crumbled-castle-remnants-5: #BCB39E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "crumbled-castle-remnants": {
        1: "#6D6D6D",
        2: "#909090",
        3: "#3E443F",
        4: "#4A4A4A",
        5: "#BCB39E",
      }
    }
  }
}

Hex values

Color 1#6D6D6D

Color 2#909090

Color 3#3E443F

Color 4#4A4A4A

Color 5#BCB39E

Accessibility

Contrast checker

1.6:1Fail

1.9:1Fail

1.7:1Fail

2.5:1Fail

1.6:1Fail

3.1:1AA18

2.8:1Fail

1.5:1Fail

1.9:1Fail

3.1:1AA18

1.1:1Fail

4.8:1AA