Palette

Urban Loft Echo

A sleek, modern palette inspired by the raw, clean aesthetic of city lofts and minimalist design.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#708090#A9A9A9#D3D3D3#465052#B0C4DE

Palette guide

How to use Urban Loft Echo

Overview

The Urban Loft Echo palette is a sleek, modern collection inspired by the raw, clean aesthetic of city lofts and minimalist design. Featuring a range of cool grays, from the deep, grounding #465052 to the bright, expansive #D3D3D3, it offers a versatile foundation for contemporary projects. Mid-tones like #708090, #A9A9A9, and the soft blue-gray #B0C4DE provide subtle variations and depth, perfect for creating a sophisticated, industrial-chic look. This palette is ideal for designers and developers seeking a clean, uncluttered, and professional aesthetic that allows content to resonate with clarity and elegance.

Best used for

Tech startup branding and websites
Industrial design showcases
Minimalist app interfaces
Modern corporate reports and presentations
Urban lifestyle blogs and magazines
Architectural firm websites

Suggested color roles

primary

Use #465052 as a deep, dark gray-blue, serving as a strong foundation for headers, prominent UI elements, or dark backgrounds.

secondary

Apply #708090 as a medium slate gray, excellent for supporting text, secondary navigation, or subtle dividers.

accent

Deploy #B0C4DE as a soft, light blue-gray, providing a gentle accent for interactive elements, hover states, or subtle highlights.

background

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

text

For light backgrounds, use black or #465052. 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 (WCAG AA minimum).
#465052 on #D3D3D3 provides excellent contrast, making it a reliable pairing for primary text.
Avoid using #B0C4DE as primary text on light backgrounds due to potential low contrast.
Always verify WCAG compliance for text color pairings, especially in a palette with subtle gray variations, for inclusive design.

Recommended combinations

Industrial Base

Creates a robust, layered, and sophisticated dark-to-mid gray aesthetic for main sections or backgrounds.

#465052 · #708090 · #A9A9A9

Soft Modern

A clean, airy combination with a soft blue-gray accent for a gentle modern feel in lighter UI elements.

#D3D3D3 · #B0C4DE · #708090

High Contrast

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

#465052 · #D3D3D3 · #A9A9A9

CSS variables

:root {
  --urban-loft-echo-1: #708090;
  --urban-loft-echo-2: #A9A9A9;
  --urban-loft-echo-3: #D3D3D3;
  --urban-loft-echo-4: #465052;
  --urban-loft-echo-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-loft-echo": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#465052",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#708090

Color 2#A9A9A9

Color 3#D3D3D3

Color 4#465052

Color 5#B0C4DE

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

2:1Fail

2.3:1Fail

1.7:1Fail

1.6:1Fail

3.5:1AA18

1.3:1Fail

2.7:1Fail

1.6:1Fail

5.5:1AA

1.2:1Fail

2:1Fail

3.5:1AA18

5.5:1AA

4.7:1AA

2.3:1Fail

1.3:1Fail

1.2:1Fail

4.7:1AA

Similar palettes

More like Urban Loft Echo

View all neutral

Concrete Grid Lines

Concrete Loft Living

Industrial Loft Concrete

Urban Stone Path

Bare Concrete Stillness

Brutalist Bloom Grey