Back to palettes

Palette

Industrial Grid Lines

Clean and precise, reflecting the structural beauty of modern industrial architecture and technical designs.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#333333#666666#999999#004C4C#1F1F1F

Palette guide

How to use Industrial Grid Lines

Overview

The "Industrial Grid Lines" palette offers a sophisticated blend of deep charcoals and a distinct teal, perfect for projects demanding precision and a modern, structural aesthetic. Featuring a dark primary base of #1F1F1F and a slightly lighter #333333, it provides a strong foundation reminiscent of metal structures. The striking teal, #004C4C, acts as a powerful accent, cutting through the grays like a laser line. Complementary mid-grays like #666666 and #999999 add depth and dimensionality, ideal for subtle gradients or detailed UI elements. This palette is excellent for technical interfaces, architectural visualizations, and designs that require a clean, robust, and serious tone. Developers will appreciate its clear hierarchy for UI elements.

Best used for

  • Technical documentation platforms
  • Architectural portfolio websites
  • Industrial design product showcases
  • SaaS dashboards for engineering tools
  • Modern art gallery interfaces
  • Urban planning visualization tools

Suggested color roles

primary

A robust foundational dark for main elements. Use #1F1F1F for backgrounds or large sections to convey strength and modernity.

secondary

A versatile mid-dark gray for secondary content, panels, or borders. Apply #333333 to create subtle visual separation and depth.

accent

A striking, precise accent to highlight key information or interactive elements. #004C4C draws attention effectively without being overwhelming.

background

A deep, unobtrusive background for a sleek, immersive experience. #1F1F1F provides excellent contrast for lighter text.

text

For primary text, use a light gray like #999999 on darker backgrounds or a crisp white for maximum readability. For secondary text, #666666 can be effective on very light backgrounds or as a subtle detail.

Accessibility notes

  • Ensure #999999 text has sufficient contrast against #1F1F1F or #333333 backgrounds (check WCAG AA/AAA).
  • Use #004C4C sparingly for text; it may require larger font sizes or bolding for readability.
  • Consider a near-white text (e.g., #F0F0F0) on #1F1F1F or #004C4C for maximum contrast.
  • Avoid placing #666666 text directly on #999999 as contrast might be insufficient for smaller text.

Recommended combinations

Core Structure

Ideal for foundational UI elements, paneling, and subtle depth transitions in dashboards or technical interfaces.

#1F1F1F · #333333 · #666666

Accent Highlight

Use #004C4C as a focal point, contrasting sharply with dark backgrounds and light text for calls to action or critical data.

#1F1F1F · #004C4C · #999999

Gridded Detail

Perfect for creating detailed grid lines, subtle borders, or layered information displays with clear visual hierarchy.

#333333 · #666666 · #999999

CSS variables

:root {
  --industrial-grid-lines-1: #333333;
  --industrial-grid-lines-2: #666666;
  --industrial-grid-lines-3: #999999;
  --industrial-grid-lines-4: #004C4C;
  --industrial-grid-lines-5: #1F1F1F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-grid-lines": {
        1: "#333333",
        2: "#666666",
        3: "#999999",
        4: "#004C4C",
        5: "#1F1F1F",
      }
    }
  }
}

Related searches

industrial color schemestech dark mode palettearchitectural design colorsminimalist grey teal paletteui ux industrial theme

Palette colors

Hex values

Color 1#333333
·
Color 2#666666
·
Color 3#999999
·
Color 4#004C4C
·
Color 5#1F1F1F
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
4.4:1AA18
1.3:1Fail
1.3:1Fail
2
2.2:1Fail
2:1Fail
1.7:1Fail
2.9:1Fail
3
4.4:1AA18
2:1Fail
3.4:1AA18
5.8:1AA
4
1.3:1Fail
1.7:1Fail
3.4:1AA18
1.7:1Fail
5
1.3:1Fail
2.9:1Fail
5.8:1AA
1.7:1Fail

Similar palettes

More like Industrial Grid Lines

View all monochrome
Concrete Bloom Grey
Metal Sheen
Modernist Concrete Art
Pavement Abstract Greys
Urban Foundry Haze
Brushed Steel Aura