Back to palettes

Palette

Rusty Rail Yards

A raw palette of earthy browns, rusty oranges, and grays, reminiscent of old, weathered rail yards.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rusty Rail Yards 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 Rusty Rail Yards.

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

Data visualization

#3D3C3A#6A5C55#8B4513#B87333#A0522D

Palette guide

How to use Rusty Rail Yards

Overview

The "Rusty Rail Yards" palette captures the raw, weathered essence of forgotten industrial spaces. Anchored by the deep charcoal #3D3C3A and warm gray #6A5C55, it introduces striking rust tones like #8B4513, #B87333, and #A0522D. This blend offers designers a sophisticated yet rugged collection, perfect for projects requiring a dark, authentic, and earthy mood. Developers can utilize these colors to evoke a sense of history and grittiness in user interfaces, digital art, or immersive environments. Its versatility makes it suitable for conveying strength, nostalgia, or an edgy, modern aesthetic.

Best used for

  • Dark mode interfaces with an industrial touch
  • Branding for craft breweries or artisan workshops
  • Thematic video game environments (e.g., post-apocalyptic)
  • Photography portfolios with a rugged aesthetic
  • Web design for vintage apparel or outdoor gear
  • Documentary film titles or graphic overlays

Suggested color roles

primary

The deep charcoal #3D3C3A serves as an excellent foundational color for backgrounds or main structural elements.

secondary

Use the warm gray #6A5C55 for secondary backgrounds, panels, or subtle textural elements.

accent

The vibrant #B87333 or #A0522D can be used sparingly for calls-to-action or important highlights, providing a pop of warmth.

background

#3D3C3A provides a strong, dark base, or #6A5C55 for a slightly lighter, warm-neutral foundation.

text

A crisp white or very light off-white works best for readability against #3D3C3A, or #6A5C55 for contrast on darker accents.

Accessibility notes

  • Ensure high contrast when using the darker shades like #3D3C3A as backgrounds for text.
  • The rust tones (#8B4513, #B87333, #A0522D) may require careful pairing with text for readability; use lighter text colors.
  • Avoid using rust tones on the warm gray #6A5C55 for small text sizes due to potential low contrast.
  • Always check WCAG compliance for text and interactive element contrast, especially in dark mode applications.

Recommended combinations

Gritty Base

Ideal for dark mode UIs, providing a strong, industrial foundation with a touch of rust.

#3D3C3A · #6A5C55 · #8B4513

Weathered Accents

Excellent for highlighting key information or decorative elements against a neutral backdrop.

#B87333 · #A0522D · #6A5C55

Deep Industrial

Creates a robust and serious aesthetic for branding or heavy industry-themed designs.

#3D3C3A · #8B4513 · #A0522D

CSS variables

:root {
  --rusty-rail-yards-1: #3D3C3A;
  --rusty-rail-yards-2: #6A5C55;
  --rusty-rail-yards-3: #8B4513;
  --rusty-rail-yards-4: #B87333;
  --rusty-rail-yards-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rusty-rail-yards": {
        1: "#3D3C3A",
        2: "#6A5C55",
        3: "#8B4513",
        4: "#B87333",
        5: "#A0522D",
      }
    }
  }
}

Related searches

industrial dark paletteweathered rust colorstrain yard aesthetic paletterustic charcoal browndark earthy industrial design

Palette colors

Hex values

Color 1#3D3C3A
·
Color 2#6A5C55
·
Color 3#8B4513
·
Color 4#B87333
·
Color 5#A0522D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.6:1Fail
2.9:1Fail
2:1Fail
2
1.7:1Fail
1.1:1Fail
1.7:1Fail
1.1:1Fail
3
1.6:1Fail
1.1:1Fail
1.9:1Fail
1.3:1Fail
4
2.9:1Fail
1.7:1Fail
1.9:1Fail
1.5:1Fail
5
2:1Fail
1.1:1Fail
1.3:1Fail
1.5:1Fail

Similar palettes

More like Rusty Rail Yards

View all dark