Back to palettes

Palette

Steel Frame Grit

A cool, muted palette reflecting modern city structures and minimalist interior designs with an industrial edge.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steel Frame 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 Steel Frame Grit.

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

Data visualization

#2C3E50#7F8C8D#BCCFD1#ECF0F1#95A5A6

Palette guide

How to use Steel Frame Grit

Overview

The Steel Frame Grit palette embodies a cool, muted aesthetic, drawing inspiration from modern city structures and industrial minimalism. Anchored by a deep, steely blue-gray #2C3E50 and balanced with a light, almost off-white #ECF0F1, this collection offers a sophisticated range of grays and muted blues. Hex codes like #7F8C8D and #95A5A6 provide excellent mid-tones for versatile application. Designers can utilize this palette for creating sleek interfaces, architectural visualizations, or branding that conveys strength and contemporary elegance. Developers will find these colors suitable for building robust, clean user experiences with an understated, professional feel.

Best used for

  • Industrial design themes
  • Tech company branding
  • Modern architectural renderings
  • Minimalist website designs
  • UI/UX for productivity apps
  • Corporate presentations

Suggested color roles

primary

#2C3E50 - A deep, impactful blue-gray, ideal for headers, footers, or dominant brand elements.

secondary

#7F8C8D - A versatile cool gray, perfect for subheadings, borders, or secondary content blocks.

accent

#95A5A6 - A slightly warmer gray-blue, can be used for interactive elements, hover states, or subtle highlights.

background

#ECF0F1 - A very light, clean gray, providing an airy and spacious canvas for content.

text

#2C3E50 - Excellent for primary text on light backgrounds, ensuring strong readability.

Accessibility notes

  • Text in #2C3E50 on #ECF0F1 offers strong contrast and good readability.
  • Avoid using #BCCFD1 or #95A5A6 for small text on #ECF0F1 as contrast might be insufficient.
  • Ensure interactive elements have sufficient contrast against their background, especially for disabled states.
  • Consider using a tool to test contrast ratios for all color pairings, particularly for text and links.

Recommended combinations

Industrial Base

Provides a strong foundation with dark primary, light background, and a balanced mid-tone for key information or dividers.

#2C3E50 · #ECF0F1 · #7F8C8D

Muted Gradient

Creates a subtle, harmonious progression of cool grays, excellent for background gradients, charts, or layered UI elements.

#7F8C8D · #95A5A6 · #BCCFD1

Clean & Crisp

Ideal for minimalist layouts, using the lightest shade as background, a mid-tone for cards, and the darkest for impactful text.

#ECF0F1 · #BCCFD1 · #2C3E50

CSS variables

:root {
  --steel-frame-grit-1: #2C3E50;
  --steel-frame-grit-2: #7F8C8D;
  --steel-frame-grit-3: #BCCFD1;
  --steel-frame-grit-4: #ECF0F1;
  --steel-frame-grit-5: #95A5A6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-frame-grit": {
        1: "#2C3E50",
        2: "#7F8C8D",
        3: "#BCCFD1",
        4: "#ECF0F1",
        5: "#95A5A6",
      }
    }
  }
}

Related searches

industrial color schememodern gray blue paletteminimalist concrete colorsurban chic hex codescool neutral design palette

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#7F8C8D
·
Color 3#BCCFD1
·
Color 4#ECF0F1
·
Color 5#95A5A6
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.2:1AA18
6.8:1AA
9.6:1AAA
4.3:1AA18
2
3.2:1AA18
2.2:1Fail
3:1AA18
1.4:1Fail
3
6.8:1AA
2.2:1Fail
1.4:1Fail
1.6:1Fail
4
9.6:1AAA
3:1AA18
1.4:1Fail
2.2:1Fail
5
4.3:1AA18
1.4:1Fail
1.6:1Fail
2.2:1Fail

Similar palettes

More like Steel Frame Grit

View all neutral
Concrete Garden Grey
Metro Grid Serene
Urban Loft Serene
Architectural Concrete Edge
Bare Concrete Stillness
Brutalist Bloom Grey