Back to palettes

Palette

Rusty Steel Core

Rough, earthy tones of corroded steel and weathered metal, capturing an industrial aesthetic.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rusty Steel Core 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 Steel Core.

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

Data visualization

#4F4E4D#7A7A7A#A6A6A6#8F5C4B#B27B5E

Palette guide

How to use Rusty Steel Core

Overview

The "Rusty Steel Core" palette embodies a rough, industrial aesthetic, blending cool steel grays with warm, corroded rust tones. It features a spectrum of grays from the deep #4F4E4D to the lighter #A6A6A6, complemented by the earthy rust of #8F5C4B and the softer, weathered #B27B5E. This collection is ideal for designers aiming for a grunge, metallic, or utilitarian feel. Developers can leverage these colors to build UIs that project strength, resilience, and a raw, unpolished character. It's particularly effective for digital experiences requiring a robust and authentic industrial edge.

Best used for

  • Industrial-themed websites or applications
  • Grunge-style graphic design and branding
  • UI for manufacturing or engineering software
  • Concept art for dystopian or post-apocalyptic settings
  • Modern architectural visualizations
  • Packaging for rugged outdoor or tool brands

Suggested color roles

primary

The deep gray #4F4E4D makes an excellent primary background or foundational color, conveying solidity.

secondary

Use #7A7A7A for secondary elements, panels, or borders, providing a subtle contrast to the darker gray.

accent

The warm rust #8F5C4B or #B27B5E can be effectively used for interactive elements, warnings, or key highlights.

background

#4F4E4D offers a strong, dark base, while #7A7A7A can serve as a lighter, metallic background.

text

For optimal readability, use a crisp white or a very light gray like #A6A6A6 for text against darker backgrounds.

Accessibility notes

  • Ensure high contrast between text and background, especially when using the mid-grays like #7A7A7A.
  • The rust tones (#8F5C4B, #B27B5E) should be paired with contrasting text colors (e.g., dark gray or white) to meet WCAG standards.
  • Avoid placing #B27B5E text on #A6A6A6 backgrounds due to insufficient contrast.
  • Always test color combinations for readability, particularly for small text and interactive elements.

Recommended combinations

Steel Base

Creates a clean, industrial foundation, perfect for backgrounds and structural UI elements.

#4F4E4D · #7A7A7A · #A6A6A6

Corroded Edge

Use for accents, alerts, or to signify wear and tear in graphic designs.

#8F5C4B · #B27B5E · #4F4E4D

Grunge Texture

Ideal for layered graphics, textures, and subtle highlights in a rugged interface.

#7A7A7A · #8F5C4B · #A6A6A6

CSS variables

:root {
  --rusty-steel-core-1: #4F4E4D;
  --rusty-steel-core-2: #7A7A7A;
  --rusty-steel-core-3: #A6A6A6;
  --rusty-steel-core-4: #8F5C4B;
  --rusty-steel-core-5: #B27B5E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rusty-steel-core": {
        1: "#4F4E4D",
        2: "#7A7A7A",
        3: "#A6A6A6",
        4: "#8F5C4B",
        5: "#B27B5E",
      }
    }
  }
}

Related searches

industrial grunge paletteweathered steel colorsrust and gray color schememetallic earth tonesrugged industrial design

Palette colors

Hex values

Color 1#4F4E4D
·
Color 2#7A7A7A
·
Color 3#A6A6A6
·
Color 4#8F5C4B
·
Color 5#B27B5E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.4:1AA18
1.5:1Fail
2.3:1Fail
2
1.9:1Fail
1.8:1Fail
1.3:1Fail
1.2:1Fail
3
3.4:1AA18
1.8:1Fail
2.3:1Fail
1.5:1Fail
4
1.5:1Fail
1.3:1Fail
2.3:1Fail
1.5:1Fail
5
2.3:1Fail
1.2:1Fail
1.5:1Fail
1.5:1Fail

Similar palettes

More like Rusty Steel Core

View all dark