Palette

City Loft Minimal

A clean, modern monochrome palette reflecting the chic, understated aesthetic of a city loft.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Loft Minimal 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 Minimal.

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

Data visualization

#A9A9A9#E0E0E0#696969#D3D3D3#808080

Palette guide

How to use City Loft Minimal

Overview

The "City Loft Minimal" palette offers a clean, modern monochrome set of grays, ideal for evoking the chic, understated aesthetic of an urban loft. With a range from the soft #A9A9A9 and #E0E0E0 to the robust #696969 and #808080, complemented by the delicate #D3D3D3, this palette provides versatility for creating sophisticated, minimalist designs. Designers can use these tones to build elegant interfaces, brand identities, and digital experiences that prioritize clarity and refinement. Developers will find these hex codes straightforward for implementing subtle visual cues, clear content structures, and a consistent, professional look across applications. It’s perfect for projects requiring a calm, focused, and timeless feel.

Best used for

Luxury brand websites
Minimalist portfolio sites
Interior design showcases
High-end fashion apps
Abstract art platforms
Modern professional tools

Suggested color roles

primary

#696969 - A strong, versatile grey, excellent for primary headings, call-to-action buttons, or main content blocks, providing clear visual weight.

secondary

#808080 - A balanced mid-grey, perfect for subheadings, secondary information, or UI elements that require less emphasis than the primary.

accent

#A9A9A9 - A lighter, softer grey that can be used for borders, subtle dividers, or hover states, adding a touch of refinement without being distracting.

background

#E0E0E0 - A very light grey, ideal for clean, spacious backgrounds, allowing content to breathe and maintaining a bright, open feel.

text

#696969 - Optimal for primary body text against lighter backgrounds like #E0E0E0 or #D3D3D3, ensuring excellent readability and a cohesive aesthetic.

Accessibility notes

Ensure sufficient contrast between #696969 text and lighter backgrounds like #E0E0E0 to meet WCAG AA standards.
Be cautious when pairing #A9A9A9 or #D3D3D3 for text against #E0E0E0, as contrast may be too low.
Use distinct visual cues for interactive elements, such as a darker border on hover or focus states.
For critical information, consider using a darker charcoal or black text against the lightest grays for maximum readability.

Recommended combinations

Clean Professional

Ideal for corporate websites or professional reports, offering strong contrast and a crisp look.

#696969 · #808080 · #E0E0E0

Soft Elegance

Great for creating gentle, inviting interfaces or subtle background textures in art and fashion sites.

#A9A9A9 · #D3D3D3 · #E0E0E0

Modern Hierarchy

Perfect for establishing clear visual hierarchy in web applications, guiding users through content.

#696969 · #A9A9A9 · #E0E0E0

CSS variables

:root {
  --city-loft-minimal-1: #A9A9A9;
  --city-loft-minimal-2: #E0E0E0;
  --city-loft-minimal-3: #696969;
  --city-loft-minimal-4: #D3D3D3;
  --city-loft-minimal-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-loft-minimal": {
        1: "#A9A9A9",
        2: "#E0E0E0",
        3: "#696969",
        4: "#D3D3D3",
        5: "#808080",
      }
    }
  }
}

Hex values

Color 1#A9A9A9

Color 2#E0E0E0

Color 3#696969

Color 4#D3D3D3

Color 5#808080

Accessibility

Contrast checker

1.8:1Fail

2.3:1Fail

1.6:1Fail

1.7:1Fail

1.8:1Fail

4.2:1AA18

1.1:1Fail

3:1Fail

2.3:1Fail

4.2:1AA18

3.7:1AA18

1.4:1Fail

1.6:1Fail

1.1:1Fail

3.7:1AA18

2.6:1Fail

1.7:1Fail

3:1Fail

1.4:1Fail

2.6:1Fail

Similar palettes

More like City Loft Minimal

View all monochrome

City Steel Gleam

Concrete Jungle Bloom

Industrial Chic Echo

Industrial Cityscape Grey

Industrial Loft Hues

Minimal Loft Living