Back to palettes

Palette

Ruined Castle Stone

A stoic and weathered palette reflecting the enduring strength and solemn beauty of ancient castle stones.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ruined Castle 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 Ruined Castle Stone.

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

Data visualization

#545454#737373#929292#b1b1b1#d0d0d0

Palette guide

How to use Ruined Castle Stone

Overview

The Ruined Castle Stone palette is a stoic and timeless collection of greys, evoking the enduring strength and solemn beauty of ancient, weathered stone. Ranging from the deep #545454 to the light #d0d0d0, with intermediate shades like #737373, #929292, and #b1b1b1, this monochromatic palette is perfect for designs requiring a sense of history, stability, and understated elegance. Designers can use these hues for architectural visualizations, historical themes, or any digital interface that benefits from a grounded, sophisticated, and neutral aesthetic. Developers will find this palette excellent for creating clean, professional, and highly readable interfaces.

Best used for

  • Architectural and historical websites
  • Corporate and professional branding
  • Minimalist UI design
  • Backgrounds for photography or art portfolios
  • Technical documentation or data visualization
  • Masculine or industrial design aesthetics

Suggested color roles

primary

A balanced, versatile grey, #737373, that provides a strong yet neutral base, ideal for main headings, important text, or primary UI elements.

secondary

A lighter, more open grey, #b1b1b1, that offers good readability and contrast, suitable for subheadings, secondary information, or borders.

accent

The lightest shade, #d0d0d0, providing a subtle highlight or clean background for interactive states, offering a crisp touch.

background

The deepest, most grounding grey, #545454, offering a stable and sophisticated backdrop that makes lighter text and elements stand out.

text

For light backgrounds like #d0d0d0 or #b1b1b1, use #545454 or a deep black. For dark backgrounds like #545454 or #737373, white or a very light grey (#d0d0d0) works best.

Accessibility notes

  • White text on #545454 and #737373 will provide good WCAG AA contrast.
  • Ensure sufficient contrast when using #d0d0d0 or #b1b1b1 for text, especially against white or very light backgrounds; a dark text is crucial.
  • The contrast between #b1b1b1 and #929292 might be low for small text; use for larger elements or ensure adequate spacing.
  • Always test readability for body text, particularly when using mid-range greys on similar backgrounds.

Recommended combinations

Ancient Strength

Creates a solid, grounded feel, with #545454 as a deep foundation, #737373 for main content, and #b1b1b1 for clear readability.

#545454 · #737373 · #B1B1B1

Weathered Elegance

A lighter, more open combination, ideal for clean interfaces or elegant backgrounds, with #737373 providing subtle depth.

#929292 · #D0D0D0 · #737373

Industrial Edge

Uses the lightest grey as a base, contrasted sharply by #545454 for text or key elements, and #b1b1b1 for structure, creating a modern, stark look.

#D0D0D0 · #545454 · #B1B1B1

CSS variables

:root {
  --ruined-castle-stone-1: #545454;
  --ruined-castle-stone-2: #737373;
  --ruined-castle-stone-3: #929292;
  --ruined-castle-stone-4: #b1b1b1;
  --ruined-castle-stone-5: #d0d0d0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ruined-castle-stone": {
        1: "#545454",
        2: "#737373",
        3: "#929292",
        4: "#b1b1b1",
        5: "#d0d0d0",
      }
    }
  }
}

Related searches

monochromatic grey palettestone color schemeweathered industrial colorsneutral grey brandinghistoric castle tones

Palette colors

Hex values

Color 1#545454
·
Color 2#737373
·
Color 3#929292
·
Color 4#b1b1b1
·
Color 5#d0d0d0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.5:1AA18
4.9:1AA
2
1.6:1Fail
1.5:1Fail
2.2:1Fail
3.1:1AA18
3
2.4:1Fail
1.5:1Fail
1.5:1Fail
2:1Fail
4
3.5:1AA18
2.2:1Fail
1.5:1Fail
1.4:1Fail
5
4.9:1AA
3.1:1AA18
2:1Fail
1.4:1Fail

Similar palettes

More like Ruined Castle Stone

View all monochrome