Palette

Urban Loft Concrete

A sleek and understated palette of grays, capturing the raw, minimalist essence of urban concrete.

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

#708090#A9A9A9#D3D3D3#696969#36454F

Palette guide

How to use Urban Loft Concrete

Overview

The Urban Loft Concrete palette (ID: urban-loft-concrete-3) presents a sleek and understated collection of grays, perfectly capturing the raw, minimalist essence of urban concrete. From the deep, grounding #36454F to the bright, airy #D3D3D3, this palette offers a versatile spectrum for sophisticated designs. Mid-tones like #708090, #A9A9A9, and #696969 provide subtle variations and depth, ideal for creating layered, modern aesthetics. Developers will find its clear hierarchy useful for UI, while designers can leverage its timeless appeal for brand identities that demand elegance and simplicity.

Best used for

Minimalist website and app design
Architectural firm branding
Industrial product showcases
Modern furniture design catalogs
Urban photography galleries
Clean UI/UX interfaces

Suggested color roles

primary

Use #36454F as a deep slate gray, serving as a strong, sophisticated foundation for major elements or bold text.

secondary

Apply #696969 as a charcoal gray, excellent for supporting text, secondary navigation, or subtle dividers.

accent

Deploy #A9A9A9 as a mid-tone gray, useful for hover states, subtle icons, or as a light border to define elements.

background

Utilize #D3D3D3 as a light gray, providing a clean, understated canvas that enhances content and reduces visual clutter.

text

For light backgrounds, use black or #36454F. For dark backgrounds, use white or #D3D3D3 for optimal readability.

Accessibility notes

Ensure sufficient contrast when using #A9A9A9 or #708090 for text on backgrounds like #D3D3D3 (check WCAG AA minimum).
#36454F offers good contrast for white text, making it a reliable choice for dark elements.
Avoid using mid-tones for small text on similar background shades, as this can severely impact readability.
Maintain a minimum contrast ratio of 4.5:1 for normal text to ensure compliance and good user experience.

Recommended combinations

Deep Foundations

Creates a robust, layered, and slightly moody base for content, evoking depth.

#36454F · #696969 · #708090

Light & Airy

A clean, bright combination for a modern, expansive feel in backgrounds or large sections.

#D3D3D3 · #A9A9A9 · #708090

Monochrome Contrast

Strong dark, bright light, and a supportive mid-tone for clear visual hierarchy and impact.

#36454F · #D3D3D3 · #696969

CSS variables

:root {
  --urban-loft-concrete-3-1: #708090;
  --urban-loft-concrete-3-2: #A9A9A9;
  --urban-loft-concrete-3-3: #D3D3D3;
  --urban-loft-concrete-3-4: #696969;
  --urban-loft-concrete-3-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-loft-concrete-3": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#696969",
        5: "#36454F",
      }
    }
  }
}

Hex values

Color 1#708090

Color 2#A9A9A9

Color 3#D3D3D3

Color 4#696969

Color 5#36454F

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

1.4:1Fail

2.4:1Fail

1.7:1Fail

1.6:1Fail

2.3:1Fail

4.2:1AA18

2.7:1Fail

1.6:1Fail

3.7:1AA18

6.6:1AA

1.4:1Fail

2.3:1Fail

3.7:1AA18

1.8:1Fail

2.4:1Fail

4.2:1AA18

6.6:1AA

1.8:1Fail

Similar palettes

More like Urban Loft Concrete