Back to palettes

Palette

Grayscale Urban Loft

A sleek, sophisticated grayscale spectrum, perfect for a chic and modern urban loft aesthetic.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Grayscale Urban Loft 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 Grayscale Urban Loft.

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

Data visualization

#2D2D2D#505050#787878#A0A0A0#C8C8C8

Palette guide

How to use Grayscale Urban Loft

Overview

The Grayscale Urban Loft palette offers a sleek, sophisticated grayscale spectrum, perfect for a chic and modern urban loft aesthetic. Ranging from the deep #2D2D2D to the bright #C8C8C8, with well-distributed mid-tones like #505050, #787878, and #A0A0A0, this palette provides exceptional versatility. Designers and developers can leverage these refined greys to create elegant, minimalist, and highly functional interfaces. It excels in conveying a sense of contemporary luxury, industrial chic, and clean design, making it ideal for projects that require a polished and understated visual identity.

Best used for

  • Modern interior design websites or blogs
  • High-end furniture or decor e-commerce
  • Fashion brands with a minimalist aesthetic
  • Architectural firm branding and presentations
  • Luxury real estate digital experiences
  • Portfolio websites for designers or artists

Suggested color roles

primary

Use #2D2D2D for strong headings, primary navigation, or prominent UI elements to establish a bold, modern anchor.

secondary

Apply #505050 for content backgrounds, subheadings, or secondary buttons, maintaining a sophisticated depth.

accent

#A0A0A0 or #C8C8C8 can serve as subtle accents for borders, dividers, or interactive states, adding gentle highlights.

background

#C8C8C8 provides a very clean, bright canvas. For a darker mood, #787878 or #A0A0A0 can be used.

text

For primary text, #2D2D2D offers excellent readability on light backgrounds. On darker greys, use #C8C8C8 or white.

Accessibility notes

  • Ensure #2D2D2D text on #C8C8C8 background meets WCAG AA contrast for body text.
  • Be cautious when using #787878 text on #A0A0A0 background; contrast might be insufficient for small text.
  • Provide clear focus indicators for interactive elements, as subtle color shifts might not be enough.
  • Use ample line height and clear typography to enhance readability in this refined grayscale palette.

Recommended combinations

Loft Contrast

Ideal for core UI, combining a deep base with a light background and a strong mid-tone for key information.

#2D2D2D · #C8C8C8 · #505050

Industrial Layers

Excellent for creating subtle depth and hierarchy within content blocks, cards, or complex data visualizations.

#505050 · #787878 · #A0A0A0

Polished Steel

Suited for light-themed designs, using the palest grey as a background with dark text and a balanced mid-grey for accents.

#C8C8C8 · #2D2D2D · #787878

CSS variables

:root {
  --grayscale-urban-loft-1: #2D2D2D;
  --grayscale-urban-loft-2: #505050;
  --grayscale-urban-loft-3: #787878;
  --grayscale-urban-loft-4: #A0A0A0;
  --grayscale-urban-loft-5: #C8C8C8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grayscale-urban-loft": {
        1: "#2D2D2D",
        2: "#505050",
        3: "#787878",
        4: "#A0A0A0",
        5: "#C8C8C8",
      }
    }
  }
}

Related searches

urban loft color palettemodern minimalist greyindustrial chic colorssophisticated grey schemeelegant monochrome design

Palette colors

Hex values

Color 1#2D2D2D
·
Color 2#505050
·
Color 3#787878
·
Color 4#A0A0A0
·
Color 5#C8C8C8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.1:1AA18
5.3:1AA
8.2:1AAA
2
1.7:1Fail
1.8:1Fail
3.1:1AA18
4.8:1AA
3
3.1:1AA18
1.8:1Fail
1.7:1Fail
2.6:1Fail
4
5.3:1AA
3.1:1AA18
1.7:1Fail
1.6:1Fail
5
8.2:1AAA
4.8:1AA
2.6:1Fail
1.6:1Fail

Similar palettes

More like Grayscale Urban Loft

View all monochrome
Industrial Concrete Chic
Urban Alley Glow
Urban Concrete Flow
Urban Graphite
Urban Grayscale Grit
Urban Grid Echo