Back to palettes

Palette

Urban Loft Charcoal

A stark, sophisticated palette focusing on the shades of gray, like a precise architectural drawing in a modern loft.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#696969#A9A9A9#F5F5F5#1A1A1A

Palette guide

How to use Urban Loft Charcoal

Overview

The Urban Loft Charcoal palette is a sophisticated, minimalist collection of grays and near-black, embodying the essence of modern architectural design. With deep, commanding tones like #1A1A1A and #36454F, alongside versatile mid-grays such as #696969 and #A9A9A9, it provides a strong foundation for sleek, uncluttered aesthetics. The inclusion of the near-white #F5F5F5 ensures crucial contrast and breathability. This palette is ideal for designers and developers seeking a clean, professional, and timeless look, allowing content and form to take center stage without distraction.

Best used for

  • High-end fashion and luxury branding
  • Architectural portfolios and websites
  • Minimalist web and app design
  • Modern art gallery interfaces
  • Professional corporate branding
  • Sleek product packaging

Suggested color roles

primary

Use #1A1A1A as a deep charcoal, ideal for strong headings, primary buttons, or sophisticated dark backgrounds.

secondary

Apply #36454F as a dark slate gray, excellent for subheadings, secondary UI elements, or subtle depth.

accent

Deploy #A9A9A9 as a mid-tone gray, which can be used for subtle highlights, borders, or inactive states.

background

Utilize #F5F5F5 as an off-white, providing a clean, bright canvas that ensures maximum readability.

text

For light backgrounds, use #1A1A1A or #36454F for primary text. For dark backgrounds, use #F5F5F5 or #A9A9A9.

Accessibility notes

  • #F5F5F5 provides excellent contrast against #1A1A1A and #36454F, ensuring high readability.
  • Ensure sufficient contrast if using #A9A9A9 for text on backgrounds like #696969 (check WCAG AA guidelines).
  • Avoid using similar mid-tones for text and background, as this can severely impact legibility.
  • Always verify WCAG AA or AAA compliance for text color pairings, especially in a monochrome palette where subtle differences matter.

Recommended combinations

Deep Contrast

Classic, high-contrast combination for strong visual impact, clear hierarchy, and readability.

#1A1A1A · #F5F5F5 · #36454F

Subtle Gradients

Creates a sophisticated, layered gray aesthetic for depth and texture in backgrounds or large elements.

#36454F · #696969 · #A9A9A9

Clean & Modern

Bright background with subtle details and strong, legible text for a crisp, minimalist feel.

#F5F5F5 · #A9A9A9 · #1A1A1A

CSS variables

:root {
  --urban-loft-charcoal-1: #36454F;
  --urban-loft-charcoal-2: #696969;
  --urban-loft-charcoal-3: #A9A9A9;
  --urban-loft-charcoal-4: #F5F5F5;
  --urban-loft-charcoal-5: #1A1A1A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-loft-charcoal": {
        1: "#36454F",
        2: "#696969",
        3: "#A9A9A9",
        4: "#F5F5F5",
        5: "#1A1A1A",
      }
    }
  }
}

Related searches

charcoal grey paletteminimalist urban colorsarchitectural monochromesleek modern designsophisticated gray scheme

Palette colors

Hex values

Color 1#36454F
·
Color 2#696969
·
Color 3#A9A9A9
·
Color 4#F5F5F5
·
Color 5#1A1A1A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
4.2:1AA18
9.1:1AAA
1.8:1Fail
2
1.8:1Fail
2.3:1Fail
5:1AA
3.2:1AA18
3
4.2:1AA18
2.3:1Fail
2.2:1Fail
7.4:1AAA
4
9.1:1AAA
5:1AA
2.2:1Fail
16:1AAA
5
1.8:1Fail
3.2:1AA18
7.4:1AAA
16:1AAA

Similar palettes

More like Urban Loft Charcoal

View all monochrome
Industrial Loft Hues
Monochromatic Foggy City
Basalt Stream Pebble
Charcoal Graphite Tones
Charcoal Sketch Palette
Charcoal Sketchbook Grey