Palette

Urban Loft Serene

A sleek, modern palette drawing from concrete and stone, perfect for minimalist designs with understated elegance.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5A6F7F#7B8B9B#AEBECD#E0E4E7

Palette guide

How to use Urban Loft Serene

Overview

The Urban Loft Serene palette offers a sleek, modern selection of cool grays, drawing inspiration from concrete and stone for an understated elegance. Anchored by the deep #36454F, it transitions through sophisticated mid-tones like #5A6F7F and #7B8B9B, culminating in the soft, airy #AEBECD and #E0E4E7. This palette is perfect for minimalist designs that seek to evoke calm, professionalism, and a contemporary urban feel. Its monochromatic nature ensures harmony, making it highly versatile for various digital and physical applications, where subtle shifts in tone create depth.

Best used for

Spa and wellness branding
Luxury residential developments
Sophisticated tech interfaces
Minimalist photography portfolios
Eco-friendly product design
Serene digital experiences

Suggested color roles

primary

#36454F acts as a deep, anchoring color for main headings, navigation, and key informational blocks, providing strong visual weight.

secondary

#5A6F7F is suitable for subheadings, secondary content, and UI components, offering a smooth transition from the primary.

accent

#7B8B9B works well for subtle highlights, borders, or interactive elements, adding a gentle touch of contrast.

background

#E0E4E7 provides a soft, clean, and expansive canvas for content, promoting a sense of calm and clarity.

text

For main body text, use #36454F on light backgrounds like #E0E4E7 to ensure optimal readability and a polished, professional appearance.

Accessibility notes

#36454F on #E0E4E7 offers strong contrast, making it ideal for primary text and important information.
#5A6F7F can be used for secondary text on #E0E4E7, but verify contrast for smaller font sizes to maintain readability.
#7B8B9B and #AEBECD are too light for body text; reserve them for backgrounds, borders, or large graphic elements.
Ensure interactive elements have sufficient contrast with their surrounding background, especially when using lighter shades.

Recommended combinations

Deep & Light

Creates a balanced and elegant composition, perfect for clean layouts and professional presentations.

#36454F · #E0E4E7 · #7B8B9B

Gradient Feel

Offers a smooth, modern transition of tones, ideal for backgrounds or layered UI elements.

#5A6F7F · #AEBECD · #36454F

Subtle Depth

Provides an airy and sophisticated feel, suitable for minimalist designs requiring delicate variation.

#7B8B9B · #E0E4E7 · #5A6F7F

CSS variables

:root {
  --urban-loft-serene-1: #36454F;
  --urban-loft-serene-2: #5A6F7F;
  --urban-loft-serene-3: #7B8B9B;
  --urban-loft-serene-4: #AEBECD;
  --urban-loft-serene-5: #E0E4E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-loft-serene": {
        1: "#36454F",
        2: "#5A6F7F",
        3: "#7B8B9B",
        4: "#AEBECD",
        5: "#E0E4E7",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5A6F7F

Color 3#7B8B9B

Color 4#AEBECD

Color 5#E0E4E7

Accessibility

Contrast checker

1.9:1Fail

2.8:1Fail

5.2:1AA

7.7:1AAA

1.9:1Fail

1.5:1Fail

2.8:1Fail

4.1:1AA18

2.8:1Fail

1.5:1Fail

1.8:1Fail

2.7:1Fail

5.2:1AA

2.8:1Fail

1.8:1Fail

1.5:1Fail

7.7:1AAA

4.1:1AA18

2.7:1Fail

1.5:1Fail

Similar palettes

More like Urban Loft Serene

Urban Loft Serene

See it in context.

Ready when you are.

Built with Urban Loft Serene.

How to use Urban Loft Serene

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep & Light

Gradient Feel

Subtle Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Loft Serene