Palette

City Loft Grey

A sophisticated grayscale gradient reflecting concrete, steel, and urban sophistication.

monochromeminimal5 colors

More monochrome 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

#3E4A5C#6B7B8F#A4B2C2#CFD8E1#ECEFF1

Palette guide

How to use City Loft Grey

Overview

The "City Loft Grey" palette presents a sophisticated grayscale gradient, perfect for projects aiming for an urban, modern, or minimalist aesthetic. This collection ranges from a deep, cool grey #3E4A5C, through versatile mid-tones like #6B7B8F and #A4B2C2, to a light, airy #CFD8E1, finishing with a near-white #ECEFF1. These colors evoke concrete, steel, and a refined architectural sensibility. Designers can use this palette to create clean, structured interfaces and branding that exude professionalism and understated elegance. Developers will appreciate the consistent tonal progression for creating subtle visual hierarchies and accessible designs, making it ideal for corporate, tech, or artistic applications.

Best used for

Corporate branding and websites
Architectural firm portfolios
Minimalist app UI design
Tech startup branding
Contemporary art gallery sites
High-end fashion e-commerce

Suggested color roles

primary

#3E4A5C - A deep, cool grey, excellent for primary navigation, bold headings, or strong brand elements, establishing a professional tone.

secondary

#6B7B8F - A balanced mid-tone, suitable for subheadings, secondary content blocks, or background sections, providing visual depth.

accent

#A4B2C2 - A lighter, softer grey that can subtly highlight interactive elements, borders, or informational text without disrupting the calm aesthetic.

background

#ECEFF1 - A very light, almost white background, perfect for clean canvases that enhance readability and give a sense of spaciousness.

text

#3E4A5C - Ideal for primary body text on light backgrounds like #ECEFF1, ensuring excellent readability and a cohesive, professional look.

Accessibility notes

Ensure high contrast for text, especially using #3E4A5C on #ECEFF1, to meet WCAG AA standards.
Avoid combining #A4B2C2 with #CFD8E1 for text elements, as the contrast may be insufficient.
Provide clear visual cues for interactive elements, such as distinct hover states or borders.
Use a true black for critical alerts or legal text if the palette's darker shades don't provide enough contrast against mid-tones.

Recommended combinations

Corporate Depth

Excellent for establishing a serious, professional tone in corporate dashboards or financial reports.

#3E4A5C · #6B7B8F · #A4B2C2

Light Structure

Perfect for clean, airy designs like blogs or portfolio sites, emphasizing content and white space.

#A4B2C2 · #CFD8E1 · #ECEFF1

Urban Contrast

Ideal for creating strong visual hierarchy in web applications, distinguishing main content from background.

#3E4A5C · #A4B2C2 · #ECEFF1

CSS variables

:root {
  --city-loft-grey-1: #3E4A5C;
  --city-loft-grey-2: #6B7B8F;
  --city-loft-grey-3: #A4B2C2;
  --city-loft-grey-4: #CFD8E1;
  --city-loft-grey-5: #ECEFF1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-loft-grey": {
        1: "#3E4A5C",
        2: "#6B7B8F",
        3: "#A4B2C2",
        4: "#CFD8E1",
        5: "#ECEFF1",
      }
    }
  }
}

Hex values

Color 1#3E4A5C

Color 2#6B7B8F

Color 3#A4B2C2

Color 4#CFD8E1

Color 5#ECEFF1

Accessibility

Contrast checker

2.1:1Fail

4.2:1AA18

6.2:1AA

7.8:1AAA

2.1:1Fail

2:1Fail

3:1Fail

3.7:1AA18

4.2:1AA18

2:1Fail

1.5:1Fail

1.9:1Fail

6.2:1AA

3:1Fail

1.5:1Fail

1.2:1Fail

7.8:1AAA

3.7:1AA18

1.9:1Fail

1.2:1Fail

Similar palettes

More like City Loft Grey

View all monochrome

City Grid Graphite

Urban Art Mural

Urban Industrial Echo

Urban Zen Structure

Architectural Grid Hues

Art Gallery Minimal