Back to palettes

Palette

Gritty Factory Floor

A raw, industrial palette of steel greys with a jolt of strong red, inspired by a weathered factory setting.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gritty Factory Floor 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 Gritty Factory Floor.

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

Data visualization

#2F4F4F#708090#A9A9A9#D3D3D3#B22222

Palette guide

How to use Gritty Factory Floor

Overview

The Gritty Factory Floor palette evokes a raw, industrial aesthetic, combining steel grays with a striking accent. Anchored by deep forest green-gray #2F4F4F and ranging through cool grays like #708090, #A9A9A9, and a stark #D3D3D3, this palette is punctuated by the bold, warning-sign red #B22222. Designers and developers can leverage these tones to create robust, impactful designs that convey strength and authenticity. It's particularly effective for projects requiring a sense of ruggedness, urgency, or modern industrial charm, where the red serves as a powerful focal point.

Best used for

  • Industrial design websites or apps
  • Masculine product branding
  • Gaming interfaces or dark themes
  • Automotive or heavy machinery marketing
  • Alerts and warning systems in UI
  • Urban-themed graphic design

Suggested color roles

primary

Use #2F4F4F as a dominant background or main element color to establish a deep, serious tone.

secondary

Employ #708090 for sub-sections, borders, or secondary text, providing a lighter but still strong presence.

accent

The striking #B22222 is ideal for calls-to-action, error messages, or critical alerts, demanding immediate attention.

background

A lighter gray like #D3D3D3 can serve as a clean, neutral background, contrasting well with darker elements.

text

For dark backgrounds, use #D3D3D3 for body text. For light backgrounds, #2F4F4F provides excellent readability.

Accessibility notes

  • Ensure #B22222 text has sufficient contrast against any background, especially lighter grays like #D3D3D3.
  • Pair #2F4F4F text with #D3D3D3 or #A9A9A9 backgrounds for optimal readability in content areas.
  • Use #B22222 sparingly for accents, as overuse can create visual fatigue or imply constant urgency.
  • Verify contrast ratios for all text and interactive elements to meet WCAG AA standards, particularly with mid-tone grays.

Recommended combinations

Warning Sign

Effective for error messages or critical notifications, where #B22222 stands out against a dark base and light text.

#2F4F4F · #D3D3D3 · #B22222

Steel & Stone

Great for layering background elements or creating depth in card designs, mimicking industrial materials.

#708090 · #A9A9A9 · #2F4F4F

Industrial Base

Provides a robust foundation for general UI, with #D3D3D3 for text and #708090 for secondary details.

#2F4F4F · #D3D3D3 · #708090

CSS variables

:root {
  --gritty-factory-floor-1: #2F4F4F;
  --gritty-factory-floor-2: #708090;
  --gritty-factory-floor-3: #A9A9A9;
  --gritty-factory-floor-4: #D3D3D3;
  --gritty-factory-floor-5: #B22222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gritty-factory-floor": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#B22222",
      }
    }
  }
}

Related searches

industrial color scheme redgritty grey and red palettedark industrial UI colorssteel grey web designfactory aesthetic branding

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#A9A9A9
·
Color 4#D3D3D3
·
Color 5#B22222
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.8:1AA18
6:1AA
1.3:1Fail
2
2.2:1Fail
1.7:1Fail
2.7:1Fail
1.6:1Fail
3
3.8:1AA18
1.7:1Fail
1.6:1Fail
2.8:1Fail
4
6:1AA
2.7:1Fail
1.6:1Fail
4.5:1AA18
5
1.3:1Fail
1.6:1Fail
2.8:1Fail
4.5:1AA18

Similar palettes

More like Gritty Factory Floor

View all monochrome
Gritty Industrial Grey
Charcoal Smoke Hues
Industrial Gear Grind
Urban Grime Edge
Volcanic Rock Flow
Ancient Tomb Relic