Palette

Concrete Grid Lines

Clean, industrial tones of concrete and steel, perfect for a modern, minimalist aesthetic.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Concrete Grid Lines 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 Concrete Grid Lines.

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

Data visualization

#36393B#5A5D5F#8F9294#BCC0C2#E8EBF0

Palette guide

How to use Concrete Grid Lines

Overview

The "Concrete Grid Lines" palette delivers a sleek, industrial-inspired range of grays, perfect for designs that demand a modern, minimalist aesthetic. It transitions from a dark charcoal #36393B to a nearly off-white #E8EBF0, featuring versatile mid-tones like #5A5D5F, #8F9294, and #BCC0C2. This collection is ideal for designers looking to evoke the clean lines and robust textures of concrete and steel. Its monochromatic strength ensures clarity and sophistication, making it excellent for structured layouts and high-tech branding where precision and understated elegance are key.

Best used for

Industrial design portfolios
High-tech product interfaces
Modern architectural firm branding
Minimalist website designs
Urban planning visualizations
Corporate presentations

Suggested color roles

primary

#5A5D5F - A solid medium-dark grey that forms a strong foundation for primary content, navigation, or brand elements.

secondary

#8F9294 - A lighter, versatile grey, ideal for secondary information, subtle backgrounds, or dividing lines, maintaining clarity.

accent

#36393B - A deep, rich charcoal that can serve as a powerful accent for calls to action, important headings, or bold graphic elements.

background

#E8EBF0 - The lightest shade, providing a clean, expansive, and highly readable background for content.

text

#36393B - This darkest grey ensures excellent contrast for all body text against lighter backgrounds like #E8EBF0 or #BCC0C2, promoting readability.

Accessibility notes

Ensure #36393B text on #E8EBF0 or #BCC0C2 backgrounds meets WCAG AA contrast standards.
Avoid using #E8EBF0 for small text on #BCC0C2 as contrast will be insufficient.
Lighter grays like #BCC0C2 should be used carefully for text on mid-tones like #8F9294 to maintain readability.
Always check contrast ratios for interactive elements, especially if using a lighter grey for a button on a similar background.

Recommended combinations

Industrial Depth

Creates a strong, high-contrast visual hierarchy, perfect for headers or impactful sections.

#36393B · #5A5D5F · #E8EBF0

Soft Structure

Ideal for softer content blocks, navigation, or backgrounds where subtle distinction is preferred.

#8F9294 · #BCC0C2 · #5A5D5F

Clean Lines

Emphasizes a clean, airy aesthetic with dark text, suitable for body content and minimalist layouts.

#E8EBF0 · #BCC0C2 · #36393B

CSS variables

:root {
  --concrete-grid-lines-1: #36393B;
  --concrete-grid-lines-2: #5A5D5F;
  --concrete-grid-lines-3: #8F9294;
  --concrete-grid-lines-4: #BCC0C2;
  --concrete-grid-lines-5: #E8EBF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "concrete-grid-lines": {
        1: "#36393B",
        2: "#5A5D5F",
        3: "#8F9294",
        4: "#BCC0C2",
        5: "#E8EBF0",
      }
    }
  }
}

Hex values

Color 1#36393B

Color 2#5A5D5F

Color 3#8F9294

Color 4#BCC0C2

Color 5#E8EBF0

Accessibility

Contrast checker

1.8:1Fail

3.7:1AA18

6.3:1AA

9.7:1AAA

1.8:1Fail

2.1:1Fail

3.6:1AA18

5.6:1AA

3.7:1AA18

2.1:1Fail

1.7:1Fail

2.6:1Fail

6.3:1AA

3.6:1AA18

1.7:1Fail

1.5:1Fail

9.7:1AAA

5.6:1AA

2.6:1Fail

1.5:1Fail

Similar palettes

More like Concrete Grid Lines

View all neutral

Concrete Loft Living

Industrial Loft Concrete

Urban Loft Echo

Urban Stone Path

Bare Concrete Stillness

Brutalist Bloom Grey