Back to palettes

Palette

Urban Loft Concrete

The stark beauty of raw concrete and metal in a sophisticated urban setting.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F5B62#6B7D8D#8DA3B5#2C3942#B3C0C9

Palette guide

How to use Urban Loft Concrete

Overview

The Urban Loft Concrete palette (ID: urban-loft-concrete-2) embodies the stark, sophisticated beauty of raw concrete and metal within a modern urban setting. This neutral palette features a range of cool grays and blues, from the deep, grounding #2C3942 to the lighter, airy #B3C0C9. Intermediate shades like #4F5B62, #6B7D8D, and #8DA3B5 provide depth and subtle variations, perfect for creating an industrial yet refined aesthetic. It's an excellent choice for designers and developers aiming for a minimalist, robust, and contemporary look that allows content to shine without overwhelming it.

Best used for

  • Industrial-chic interior design concepts
  • Architectural rendering and visualizations
  • Minimalist branding for tech companies
  • Modern art installations and galleries
  • Urban photography websites
  • Robust web and app interfaces

Suggested color roles

primary

Use #2C3942 as a deep, almost black-blue-gray, ideal for strong foundational elements, headers, or dark backgrounds.

secondary

Apply #4F5B62 as a dark slate gray, suitable for subheadings, secondary UI elements, or subtle depth.

accent

Deploy #8DA3B5 as a light blue-gray, which can be used for subtle highlights, borders, or inactive states, offering a cool touch.

background

Utilize #B3C0C9 as a very light, cool gray, providing a clean, open, and modern canvas.

text

For dark backgrounds, use white or a light gray like #B3C0C9. For light backgrounds, use a very dark gray like #2C3942.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using mid-tones like #6B7D8D on #8DA3B5.
  • #2C3942 offers excellent contrast for white or #B3C0C9 text, ensuring good readability.
  • Avoid using #8DA3B5 as primary text on light backgrounds due to potential low contrast.
  • Always verify WCAG compliance for readability, particularly with subtle gray variations, to meet accessibility standards.

Recommended combinations

Deep Industrial

Creates a robust, layered, and sophisticated dark aesthetic for main sections or backgrounds.

#2C3942 · #4F5B62 · #6B7D8D

Light Concrete

A brighter, airy combination that still retains an industrial feel, great for lighter content areas.

#B3C0C9 · #8DA3B5 · #6B7D8D

Modern Contrast

Strong dark base with a clean, light background and a supportive mid-tone for clear hierarchy.

#2C3942 · #B3C0C9 · #4F5B62

CSS variables

:root {
  --urban-loft-concrete-2-1: #4F5B62;
  --urban-loft-concrete-2-2: #6B7D8D;
  --urban-loft-concrete-2-3: #8DA3B5;
  --urban-loft-concrete-2-4: #2C3942;
  --urban-loft-concrete-2-5: #B3C0C9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-loft-concrete-2": {
        1: "#4F5B62",
        2: "#6B7D8D",
        3: "#8DA3B5",
        4: "#2C3942",
        5: "#B3C0C9",
      }
    }
  }
}

Related searches

industrial grey paletteconcrete minimalist colorsmodern urban neutralscool gray blue schemearchitectural design palette

Palette colors

Hex values

Color 1#4F5B62
·
Color 2#6B7D8D
·
Color 3#8DA3B5
·
Color 4#2C3942
·
Color 5#B3C0C9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
1.7:1Fail
3.8:1AA18
2
1.6:1Fail
1.6:1Fail
2.8:1Fail
2.3:1Fail
3
2.7:1Fail
1.6:1Fail
4.5:1AA
1.4:1Fail
4
1.7:1Fail
2.8:1Fail
4.5:1AA
6.4:1AA
5
3.8:1AA18
2.3:1Fail
1.4:1Fail
6.4:1AA

Similar palettes

More like Urban Loft Concrete

View all neutral
City Concrete Grind
Concrete Grid Lines
Concrete Loft Living
Industrial Loft Concrete
Industrial Urban Grid
Industrial Urban Grit