Back to palettes

Palette

Urban Core Minimalism

A refined palette reflecting the clean, stark aesthetic of modern urban architecture and minimalist design.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E3339#474E57#606871#7B848F#F0F3F5

Palette guide

How to use Urban Core Minimalism

Overview

The Urban Core Minimalism palette is a sophisticated collection designed for sleek, modern aesthetics. Featuring a spectrum of cool grays, from the deep anchor of #2E3339 to the soft, airy #F0F3F5, it evokes the clean lines and refined textures of contemporary urban architecture. This palette offers developers a versatile foundation for minimalist interfaces, allowing for subtle visual hierarchy through tone. Designers can leverage the mid-tones like #606871 and #7B848F to create depth without introducing distracting color, making it ideal for projects where clarity and understated elegance are paramount. Its inherent neutrality promotes focus and a timeless appeal.

Best used for

  • High-end architectural portfolios
  • Modern tech product interfaces
  • Luxury brand websites
  • Minimalist app design
  • Corporate reports and presentations
  • Urban lifestyle blogs

Suggested color roles

primary

Use #2E3339 for strong foundational elements like headers, footers, or navigation bars, providing a solid, sophisticated base.

secondary

Apply #474E57 for secondary content blocks, sidebars, or interactive elements, offering a slightly lighter contrast to the primary.

accent

#7B848F can introduce subtle highlights or delineate sections, maintaining the minimalist aesthetic without harsh contrast.

background

#F0F3F5 provides a clean, bright canvas, ensuring content stands out with excellent readability.

text

For dark text on light backgrounds, use #2E3339 or #474E57. For light text on dark backgrounds, #F0F3F5 is ideal.

Accessibility notes

  • Ensure sufficient contrast between #2E3339 text and #F0F3F5 background for WCAG AA compliance.
  • Avoid using #606871 or #7B848F for essential text on #F0F3F5 backgrounds without careful contrast checks.
  • Use #F0F3F5 for text on darker shades like #2E3339 or #474E57 to maintain readability.
  • Differentiate interactive elements clearly using sufficient color contrast or alternative visual cues like underlines.

Recommended combinations

Monochrome Depth

Ideal for hero sections or brand headers, combining deep darks with a crisp white for impact.

#2E3339 · #474E57 · #F0F3F5

Subtle Hierarchy

Excellent for content cards or data visualizations, using lighter grays to define and separate elements.

#F0F3F5 · #606871 · #7B848F

Clean UI Base

Perfect for primary UI components like buttons and input fields, offering clear states with good contrast.

#474E57 · #F0F3F5 · #2E3339

CSS variables

:root {
  --urban-core-minimalism-1: #2E3339;
  --urban-core-minimalism-2: #474E57;
  --urban-core-minimalism-3: #606871;
  --urban-core-minimalism-4: #7B848F;
  --urban-core-minimalism-5: #F0F3F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-core-minimalism": {
        1: "#2E3339",
        2: "#474E57",
        3: "#606871",
        4: "#7B848F",
        5: "#F0F3F5",
      }
    }
  }
}

Related searches

minimalist gray color schememodern urban palettearchitectural color designcool neutral web colorssophisticated gray scale

Palette colors

Hex values

Color 1#2E3339
·
Color 2#474E57
·
Color 3#606871
·
Color 4#7B848F
·
Color 5#F0F3F5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
3.4:1AA18
11.4:1AAA
2
1.5:1Fail
1.5:1Fail
2.2:1Fail
7.6:1AAA
3
2.3:1Fail
1.5:1Fail
1.5:1Fail
5.1:1AA
4
3.4:1AA18
2.2:1Fail
1.5:1Fail
3.4:1AA18
5
11.4:1AAA
7.6:1AAA
5.1:1AA
3.4:1AA18

Similar palettes

More like Urban Core Minimalism

View all neutral
Concrete Jungle Bloom
Metropolis Grey
Minimalist Concrete Echo
Modern Greige Living
Muted Urban Concrete
Stone Mosaic