Palette

Urban Loft Minimal

Sophisticated and sleek, this palette reflects the clean lines and muted tones of modern urban living.

Neutralminimal5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D3D3D3#36454F#A8A88B#FFFFFF#1C1C1C

Palette guide

How to use Urban Loft Minimal

Overview

The Urban Loft Minimal palette exudes sophistication and sleekness, reflecting the clean lines and muted tones characteristic of modern urban living. Featuring a strong anchor in #36454F and a crisp white #FFFFFF, it’s balanced by soft grays like #D3D3D3 and a unique, muted green-grey #A8A88B. This collection provides an excellent foundation for designs requiring a contemporary, understated elegance. The deep #1C1C1C offers powerful contrast, ensuring readability and adding a touch of refined drama to this minimalist scheme.

Best used for

Luxury real estate websites
High-end fashion branding
Contemporary art platforms
Minimalist product design
Editorial layouts
Interior design blogs

Suggested color roles

primary

#36454F serves as a robust anchor for main headings, navigation, and key brand elements, conveying sophistication.

secondary

#A8A88B provides a unique, subtle accent for secondary branding, subheadings, or decorative elements, adding character.

accent

#D3D3D3 works as a light highlight for dividers, subtle backgrounds, or inactive UI states, maintaining brightness.

background

#FFFFFF offers a crisp, expansive, and clean canvas, making other colors pop and enhancing a minimalist aesthetic.

text

For primary text, use #1C1C1C on #FFFFFF to ensure excellent readability and a strong, modern presence.

Accessibility notes

#1C1C1C on #FFFFFF provides excellent contrast, making it ideal for primary body text.
#36454F offers good contrast on #FFFFFF or #D3D3D3 for headings and important information.
Be cautious using #A8A88B for text; ensure sufficient contrast on dark backgrounds like #1C1C1C or #36454F.
#D3D3D3 is too light for text; use it for backgrounds, borders, or subtle UI elements.

Recommended combinations

Modern Contrast

Creates a bold and clean aesthetic, perfect for strong branding and readable content.

#1C1C1C · #FFFFFF · #36454F

Subtle Warmth

Offers a sophisticated and inviting feel, ideal for lifestyle or design-focused projects.

#36454F · #A8A88B · #D3D3D3

Loft Elegance

Provides a bright and airy composition, excellent for showcasing products or photography.

#FFFFFF · #D3D3D3 · #A8A88B

CSS variables

:root {
  --urban-loft-minimal-1: #D3D3D3;
  --urban-loft-minimal-2: #36454F;
  --urban-loft-minimal-3: #A8A88B;
  --urban-loft-minimal-4: #FFFFFF;
  --urban-loft-minimal-5: #1C1C1C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-loft-minimal": {
        1: "#D3D3D3",
        2: "#36454F",
        3: "#A8A88B",
        4: "#FFFFFF",
        5: "#1C1C1C",
      }
    }
  }
}

Hex values

Color 1#D3D3D3

Color 2#36454F

Color 3#A8A88B

Color 4#FFFFFF

Color 5#1C1C1C

Accessibility

Contrast checker

6.6:1AA

1.6:1Fail

1.5:1Fail

11.4:1AAA

6.6:1AA

4.1:1AA18

9.9:1AAA

1.7:1Fail

1.6:1Fail

4.1:1AA18

2.4:1Fail

7:1AAA

1.5:1Fail

9.9:1AAA

2.4:1Fail

17:1AAA

11.4:1AAA

1.7:1Fail

7:1AAA

17:1AAA

Similar palettes

More like Urban Loft Minimal

Botanical Sketch Bloom

Calm Pebble Path

Minimalist Urban Echo