Back to palettes

Palette

Urban Loft Concrete

A clean and sophisticated palette, drawing from the cool, understated beauty of concrete and steel.

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

#778899#B0C4DE#D3D3D3#A9A9A9#C0C0C0

Palette guide

How to use Urban Loft Concrete

Overview

The Urban Loft Concrete palette (ID: urban-loft-concrete) is a clean and sophisticated selection of cool grays, echoing the understated beauty of concrete and steel. Ranging from the deeper #778899 to the bright, airy #D3D3D3, with versatile mid-tones like #B0C4DE, #A9A9A9, and #C0C0C0, it offers a harmonious blend for minimalist designs. This palette is ideal for designers and developers aiming to create sleek, modern, and architectural aesthetics, providing a calming yet professional backdrop where content can truly stand out. Its neutral versatility makes it a strong choice for diverse applications.

Best used for

  • Corporate websites and dashboards
  • Clean product interfaces and apps
  • Architectural visualization
  • Minimalist branding for tech firms
  • Modern interior design concepts
  • High-tech product displays

Suggested color roles

primary

Use #778899 as a medium slate gray, a sophisticated base for headers, navigation, or primary UI elements.

secondary

Apply #A9A9A9 as a mid-tone gray, excellent for supporting text, secondary elements, or subtle dividers.

accent

Deploy #B0C4DE as a light blue-gray, providing a soft, cool accent for interactive elements or highlights.

background

Utilize #D3D3D3 as a very light gray, offering a clean, neutral, and expansive canvas that allows content to shine.

text

For light backgrounds, use a dark charcoal or black. For darker elements, use white or a very light gray like #D3D3D3.

Accessibility notes

  • Ensure #A9A9A9 or #C0C0C0 text has sufficient contrast against #D3D3D3 or #B0C4DE backgrounds (WCAG AA minimum).
  • Darker colors like #778899 on #D3D3D3 provide good contrast for legible text.
  • Always check WCAG AA or AAA compliance for text color pairings, especially with subtle gray tones where contrast can be tricky.
  • Avoid using lighter grays for small text to prevent readability issues, particularly for users with visual impairments.

Recommended combinations

Cool Harmony

A smooth gradient of cool grays, creating a serene and modern feel for backgrounds or large sections.

#778899 · #B0C4DE · #D3D3D3

Subtle Depth

Layered grays for subtle variations and visual texture in backgrounds or secondary elements.

#A9A9A9 · #C0C0C0 · #778899

Clean & Crisp

Bright background with a strong primary color and a soft, cool accent for a clear, modern look.

#D3D3D3 · #778899 · #B0C4DE

CSS variables

:root {
  --urban-loft-concrete-1: #778899;
  --urban-loft-concrete-2: #B0C4DE;
  --urban-loft-concrete-3: #D3D3D3;
  --urban-loft-concrete-4: #A9A9A9;
  --urban-loft-concrete-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-loft-concrete": {
        1: "#778899",
        2: "#B0C4DE",
        3: "#D3D3D3",
        4: "#A9A9A9",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

cool grey palettemodern minimalist colorsarchitectural gray schemeclean urban designsteel concrete palette

Palette colors

Hex values

Color 1#778899
·
Color 2#B0C4DE
·
Color 3#D3D3D3
·
Color 4#A9A9A9
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
2.4:1Fail
1.5:1Fail
2:1Fail
2
2:1Fail
1.2:1Fail
1.3:1Fail
1:1Fail
3
2.4:1Fail
1.2:1Fail
1.6:1Fail
1.2:1Fail
4
1.5:1Fail
1.3:1Fail
1.6:1Fail
1.3:1Fail
5
2:1Fail
1:1Fail
1.2:1Fail
1.3:1Fail

Similar palettes

More like Urban Loft Concrete

View all neutral
Industrial Chic Loft
Concrete Garden Grey
Concrete Grid Lines
Concrete Jungle Bloom
Concrete Loft Living
Industrial Loft Concrete