Back to palettes

Palette

Modern Loft

A sophisticated array of cool greys and clean whites, perfect for a chic, minimalist urban loft.

NeutralMinimal5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#778899#B0C4DE#DCDCDC#F8F8FF

Palette guide

How to use Modern Loft

Overview

The Modern Loft palette presents a sophisticated array of cool greys and clean whites, perfectly capturing the essence of a chic, minimalist urban loft. This refined collection features the deep charcoal #36454F, a balanced slate grey #778899, a soft steel blue #B0C4DE, a light silver #DCDCDC, and a near-white #F8F8FF. It's ideally suited for designs that aim for a clean, contemporary, and understated elegance. Excellent for architectural visualization, tech branding, high-end fashion, or any project requiring a serene, professional, and spacious aesthetic. Designers will find these cool neutrals highly versatile for creating depth and clarity.

Best used for

  • Minimalist UI/UX design
  • High-end real estate marketing
  • Contemporary fashion lookbooks
  • Architectural rendering and portfolios
  • Urban lifestyle blogs and magazines
  • Tech company branding with a clean aesthetic

Suggested color roles

primary

Use #36454F as a strong, grounding primary color for headers, footers, or deep background sections, establishing a sophisticated tone.

secondary

Employ #778899 for prominent content blocks, navigation, or as a dominant secondary shade, maintaining depth and coolness.

accent

Subtly highlight key information or interactive elements with #B0C4DE for a gentle, yet distinct cool contrast.

background

The near-white #F8F8FF serves as an excellent soft background, providing a clean, airy canvas for content.

text

For body text, use #36454F or #778899 for optimal readability on lighter backgrounds. On darker elements, a crisp white or #F8F8FF provides excellent contrast.

Accessibility notes

  • Ensure #DCDCDC provides sufficient contrast for text when used over #F8F8FF; consider larger font sizes.
  • Use #36454F or #778899 for text on #F8F8FF or #DCDCDC backgrounds to meet WCAG AA contrast standards.
  • Avoid using #B0C4DE for small text on #DCDCDC backgrounds due to potential readability issues.
  • This palette requires careful contrast checks between lighter grey shades, especially for body text.

Recommended combinations

Urban Base

Creates a strong, cool foundation with a bright, clean accent, perfect for modern UI layouts.

#36454F · #778899 · #F8F8FF

Skyline Hues

Provides subtle gradients and layers, ideal for backgrounds or sophisticated graphical elements.

#B0C4DE · #DCDCDC · #778899

Clean Contrast

Offers a bright, airy canvas with dark anchors for text and a cool accent for key visual elements.

#F8F8FF · #36454F · #B0C4DE

CSS variables

:root {
  --modern-loft-1: #36454F;
  --modern-loft-2: #778899;
  --modern-loft-3: #B0C4DE;
  --modern-loft-4: #DCDCDC;
  --modern-loft-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "modern-loft": {
        1: "#36454F",
        2: "#778899",
        3: "#B0C4DE",
        4: "#DCDCDC",
        5: "#F8F8FF",
      }
    }
  }
}

Related searches

modern grey web designminimalist cool tonesurban loft color schemesophisticated grey paletteclean white grey aesthetic

Palette colors

Hex values

Color 1#36454F
·
Color 2#778899
·
Color 3#B0C4DE
·
Color 4#DCDCDC
·
Color 5#F8F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.7:1Fail
5.6:1AA
7.2:1AAA
9.4:1AAA
2
2.7:1Fail
2:1Fail
2.7:1Fail
3.4:1AA18
3
5.6:1AA
2:1Fail
1.3:1Fail
1.7:1Fail
4
7.2:1AAA
2.7:1Fail
1.3:1Fail
1.3:1Fail
5
9.4:1AAA
3.4:1AA18
1.7:1Fail
1.3:1Fail

Similar palettes

More like Modern Loft

View all Neutral
Cityscape Window Glint
Minimalist Concrete
Urban Alley Murals
Urban Canvas
Urban Concrete Jungle
Cityscape Blueprint