Back to palettes

Palette

Urban Loft

A sleek and modern selection of grays, embodying minimalist architectural spaces and quiet sophistication.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F5F5F5#D3D3D3#A9A9A9#696969#2F4F4F

Palette guide

How to use Urban Loft

Overview

The Urban Loft palette is a sleek and modern collection of grays, designed to embody minimalist architectural spaces and quiet sophistication. Ranging from the bright #F5F5F5 to the deep #2F4F4F, this palette includes versatile mid-tones like #D3D3D3, #A9A9A9, and #696969. It's an excellent choice for designers seeking to create a refined, contemporary aesthetic with a focus on clean lines and subtle depth. The harmonious progression of grays ensures visual coherence across various applications, from web interfaces to branding.

Best used for

  • High-end furniture stores
  • Architectural firm branding
  • Minimalist web design
  • Sophisticated tech startups
  • Corporate branding
  • Luxury lifestyle blogs

Suggested color roles

primary

#2F4F4F acts as a strong, sophisticated anchor for headings, navigation, and key brand elements, offering excellent contrast.

secondary

#696969 is ideal for subheadings, secondary content, and UI components, providing a balanced presence.

accent

#A9A9A9 works as a subtle accent for dividers, borders, or inactive states, adding a gentle touch of lightness.

background

#F5F5F5 provides a clean, bright, and expansive base for content, enhancing readability and a modern feel.

text

For main body text, use #2F4F4F on light backgrounds like #F5F5F5 to ensure optimal readability and a refined appearance.

Accessibility notes

  • #2F4F4F on #F5F5F5 offers excellent contrast, making it ideal for primary body text and important information.
  • #696969 on #F5F5F5 is suitable for text, but verify contrast for smaller font sizes to maintain readability.
  • Avoid using #A9A9A9 or #D3D3D3 for text, as they generally lack sufficient contrast on #F5F5F5.
  • Ensure interactive elements stand out clearly, potentially by using #2F4F4F for active states or a bolder visual cue.

Recommended combinations

Classic Contrast

Creates a timeless and highly readable design, suitable for professional and elegant contexts.

#2F4F4F · #F5F5F5 · #A9A9A9

Muted Depth

Offers a subtle and modern blend, great for layered backgrounds or sophisticated UI elements.

#696969 · #D3D3D3 · #2F4F4F

Soft & Strong

Provides a balanced and sophisticated composition, ideal for clean layouts with gentle visual interest.

#F5F5F5 · #A9A9A9 · #696969

CSS variables

:root {
  --urban-loft-1: #F5F5F5;
  --urban-loft-2: #D3D3D3;
  --urban-loft-3: #A9A9A9;
  --urban-loft-4: #696969;
  --urban-loft-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-loft": {
        1: "#F5F5F5",
        2: "#D3D3D3",
        3: "#A9A9A9",
        4: "#696969",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

modern grey color schemeurban minimalist palettesophisticated neutral colorsarchitectural grayssleek web design palette

Palette colors

Hex values

Color 1#F5F5F5
·
Color 2#D3D3D3
·
Color 3#A9A9A9
·
Color 4#696969
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
5:1AA
8.2:1AAA
2
1.4:1Fail
1.6:1Fail
3.7:1AA18
6:1AA
3
2.2:1Fail
1.6:1Fail
2.3:1Fail
3.8:1AA18
4
5:1AA
3.7:1AA18
2.3:1Fail
1.6:1Fail
5
8.2:1AAA
6:1AA
3.8:1AA18
1.6:1Fail

Similar palettes

More like Urban Loft

View all neutral
Modern Greige Living
Muted Urban Concrete
Urban Concrete Calm
Urban Loft Concrete
Canvas Loft Echo
City Concrete Grind