Back to palettes

Palette

Industrial Rust Grit

Gritty and earthy tones reflecting the weathered beauty of rusted metals and aged machinery.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Industrial Rust Grit 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 Industrial Rust Grit.

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

Data visualization

#B8A29A#8C6A64#66423C#4C2B27#2F1A17

Palette guide

How to use Industrial Rust Grit

Overview

The Industrial Rust Grit palette offers a rich, deep progression of earthy tones, capturing the essence of weathered metals and aged industrial environments. From the lighter, desaturated #B8A29A to the profound, near-black #2F1A17, this palette grounds designs with a raw, authentic, and dark aesthetic. Mid-tones like #8C6A64, #66423C, and #4C2B27 provide excellent opportunities for creating visual depth and hierarchy, perfect for textured backgrounds or layered UI components. This palette is exceptionally suited for projects seeking a rugged, vintage, or artisanal feel, appealing to brands that value history and a grounded presence.

Best used for

  • Heritage brand websites and packaging
  • Industrial-themed cafes or retail spaces
  • Vintage product catalogs and advertisements
  • Grungy website designs or dark themes
  • Artistic photography backdrops
  • Craft beer or artisanal food branding

Suggested color roles

primary

#2F1A17. This deepest, almost black-brown serves as a powerful foundational background, conveying a sense of grounded antiquity and strength.

secondary

#4C2B27. A slightly lighter, rich dark brown, ideal for secondary containers, cards, or navigation elements, offering subtle differentiation from the primary.

accent

#8C6A64. Use this warm, medium brown for interactive elements, calls to action, or key informational highlights, providing a pop of warmth against the darker base.

background

#2F1A17. An excellent choice for the main canvas, creating a deep, immersive environment that enhances the rugged, dark aesthetic.

text

#B8A29A. This lightest, desaturated brown is perfect for primary body text on #2F1A17 or #4C2B27, ensuring good readability. For headings, consider a light cream or white.

Accessibility notes

  • #B8A29A on #2F1A17 or #4C2B27 generally provides sufficient contrast for large text but may require adjustment for small body text to meet WCAG AA.
  • Ensure interactive elements using #8C6A64 have clear hover and focus states against darker backgrounds.
  • Avoid using #66423C or darker for text on #2F1A17 or #4C2B27; contrast will be insufficient.
  • For critical content, consider using a very light cream or pure white for text to maximize legibility across the dark, earthy tones.

Recommended combinations

Deep Earth Base

Establishes a dark, earthy UI: #2F1A17 for background, #4C2B27 for panels, #B8A29A for primary text.

#2F1A17 · #4C2B27 · #B8A29A

Layered Grit

Creates depth in content: #4C2B27 base, #66423C for borders, #8C6A64 for secondary information.

#4C2B27 · #66423C · #8C6A64

Warm Contrast

Use #2F1A17 as a deep canvas, #8C6A64 for interactive elements, and #B8A29A for prominent headings or key details.

#2F1A17 · #8C6A64 · #B8A29A

CSS variables

:root {
  --industrial-rust-grit-1: #B8A29A;
  --industrial-rust-grit-2: #8C6A64;
  --industrial-rust-grit-3: #66423C;
  --industrial-rust-grit-4: #4C2B27;
  --industrial-rust-grit-5: #2F1A17;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-rust-grit": {
        1: "#B8A29A",
        2: "#8C6A64",
        3: "#66423C",
        4: "#4C2B27",
        5: "#2F1A17",
      }
    }
  }
}

Related searches

dark rust color schemeweathered brown paletteindustrial grunge colorsearthy dark UI designvintage metal tones

Palette colors

Hex values

Color 1#B8A29A
·
Color 2#8C6A64
·
Color 3#66423C
·
Color 4#4C2B27
·
Color 5#2F1A17
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.6:1AA18
5.2:1AA
6.8:1AA
2
2:1Fail
1.8:1Fail
2.6:1Fail
3.4:1AA18
3
3.6:1AA18
1.8:1Fail
1.4:1Fail
1.9:1Fail
4
5.2:1AA
2.6:1Fail
1.4:1Fail
1.3:1Fail
5
6.8:1AA
3.4:1AA18
1.9:1Fail
1.3:1Fail

Similar palettes

More like Industrial Rust Grit

View all dark