Back to palettes

Palette

City Loft Grey

Modern and sophisticated, reflecting the sleek, industrial aesthetic of an urban loft space.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Loft Grey 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 City Loft Grey.

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

Data visualization

#3D3D3D#606060#8A8A8A#BDBDBD#2A2A2A

Palette guide

How to use City Loft Grey

Overview

The "City Loft Grey" palette offers a sophisticated range of dark to light grays, perfect for modern, industrial, or minimalist designs. Featuring deep charcoal #2A2A2A, a strong mid-tone #3D3D3D, a versatile #606060, a lighter #8A8A8A, and a soft #BDBDBD, this collection provides excellent depth and contrast. Designers can leverage these tones to evoke a sense of calm elegance and urban chic. Developers will find these hex codes straightforward for implementing clean UI elements, subtle gradients, and robust typographic hierarchies. This palette is ideal for creating professional, understated digital experiences that prioritize structure and refined aesthetics without being stark. Its inherent neutrality makes it highly adaptable across various platforms.

Best used for

  • Modern architectural portfolios
  • Minimalist web interfaces
  • Industrial-style branding
  • High-end tech product displays
  • Urban lifestyle e-commerce sites
  • Sophisticated editorial layouts

Suggested color roles

primary

#3D3D3D - Use as the dominant color for main content areas or primary brand elements, providing a solid, modern foundation.

secondary

#606060 - Excellent for supporting elements like navigation, subheadings, or background panels, offering subtle differentiation from the primary.

accent

#8A8A8A - A lighter grey that can highlight interactive elements or subtle details without overpowering the darker tones, adding a touch of sophistication.

background

#BDBDBD - A very light grey, ideal for clean backgrounds, providing a soft canvas that allows darker text and UI elements to stand out.

text

#2A2A2A - A deep charcoal perfect for primary body text, ensuring high readability against lighter backgrounds like #BDBDBD or even white.

Accessibility notes

  • Ensure sufficient contrast between #2A2A2A text and lighter backgrounds like #BDBDBD to meet WCAG AA standards.
  • Avoid using #8A8A8A for small text on #BDBDBD, as contrast might be insufficient for readability.
  • For interactive elements, provide clear hover/focus states, possibly using a slight color shift or border.
  • Consider using a true black or white for critical text against mid-range grays if the palette's grays don't meet contrast requirements.

Recommended combinations

Deep Urban

Ideal for dark mode interfaces or powerful, moody branding statements where depth is key.

#2A2A2A · #3D3D3D · #606060

Loft Contrast

Perfect for clean, high-contrast layouts, such as dashboards or professional reports, ensuring readability.

#3D3D3D · #8A8A8A · #BDBDBD

Subtle Gradient

Great for creating soft, atmospheric backgrounds or subtle transitions in UI elements, adding visual interest without harshness.

#606060 · #8A8A8A · #BDBDBD

CSS variables

:root {
  --city-loft-grey-2-1: #3D3D3D;
  --city-loft-grey-2-2: #606060;
  --city-loft-grey-2-3: #8A8A8A;
  --city-loft-grey-2-4: #BDBDBD;
  --city-loft-grey-2-5: #2A2A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-loft-grey-2": {
        1: "#3D3D3D",
        2: "#606060",
        3: "#8A8A8A",
        4: "#BDBDBD",
        5: "#2A2A2A",
      }
    }
  }
}

Related searches

modern grey color schemeindustrial design paletteminimalist grey hex codesurban loft colorssophisticated neutral palette

Palette colors

Hex values

Color 1#3D3D3D
·
Color 2#606060
·
Color 3#8A8A8A
·
Color 4#BDBDBD
·
Color 5#2A2A2A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.1:1AA18
5.8:1AA
1.3:1Fail
2
1.7:1Fail
1.8:1Fail
3.3:1AA18
2.3:1Fail
3
3.1:1AA18
1.8:1Fail
1.8:1Fail
4.2:1AA18
4
5.8:1AA
3.3:1AA18
1.8:1Fail
7.6:1AAA
5
1.3:1Fail
2.3:1Fail
4.2:1AA18
7.6:1AAA

Similar palettes

More like City Loft Grey

View all neutral
Architectural Concrete Edge
Bare Concrete Stillness
Concrete Garden Grey
Metro Grid Serene
Steel Frame Grit
Terrazzo Floor Art