Back to palettes

Palette

Urban Grid Minimal

A sophisticated monochrome palette reflecting the clean lines and textures of modern architecture, stark yet elegant.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#A9A9A9#D3D3D3#F8F8F8

Palette guide

How to use Urban Grid Minimal

Overview

The Urban Grid Minimal palette offers a sophisticated monochrome range, reflecting the clean lines and textures of modern architecture. This stark yet elegant collection features a deep teal-grey #2F4F4F, alongside versatile greys like #696969, #A9A9A9, #D3D3D3, and the near-white #F8F8F8. It's an excellent choice for designers and developers seeking to create a refined, minimalist aesthetic with a subtle hint of depth. The palette's cohesive nature ensures harmonious visual compositions, providing ample contrast for readability while maintaining a serene and understated presence across various digital and print applications.

Best used for

  • High-end minimalist branding
  • Architectural firm websites and portfolios
  • Modern art gallery interfaces
  • Luxury product packaging
  • Clean user interface designs
  • Editorial design for sophisticated content

Suggested color roles

primary

#2F4F4F - A deep, muted teal-grey that provides a strong, sophisticated foundation for headers, main calls to action, or prominent structural elements.

secondary

#696969 - A versatile medium-dark grey, perfect for subheadings, secondary information, or UI elements requiring clear but not dominant presence.

accent

#F8F8F8 - A very light, almost white, off-white that serves as an excellent highlight color, for backgrounds, or interactive states, providing crisp contrast.

background

#D3D3D3 - A light, neutral grey that offers a clean, airy canvas for content, ensuring comfortable readability for darker text.

text

#2F4F4F - The deep teal-grey provides exceptional legibility and a sophisticated tone for body text, especially against lighter backgrounds like #F8F8F8 or #D3D3D3.

Accessibility notes

  • Ensure #2F4F4F text on #F8F8F8 or #D3D3D3 backgrounds meets WCAG AA contrast standards for readability.
  • Avoid using #A9A9A9 text on #D3D3D3 backgrounds for critical information due to potentially low contrast.
  • Use #F8F8F8 for text only against very dark backgrounds such as #2F4F4F or #696969 to maintain legibility.
  • Verify that interactive elements have clear focus states beyond color, especially with subtle grey variations.

Recommended combinations

Elegant Foundation

Ideal for a sophisticated, high-contrast base, using the deep teal-grey for text on a near-white background, with a mid-grey accent.

#2F4F4F · #F8F8F8 · #A9A9A9

Subtle Depth

Creates a refined, layered look suitable for complex interfaces, using a light background with medium greys for content and subtle differentiation.

#D3D3D3 · #696969 · #A9A9A9

Modern Textures

Excellent for a clean, architectural aesthetic, using the light grey as a canvas, dark teal-grey for headings, and medium grey for body text.

#F8F8F8 · #2F4F4F · #696969

CSS variables

:root {
  --urban-grid-minimal-1: #2F4F4F;
  --urban-grid-minimal-2: #696969;
  --urban-grid-minimal-3: #A9A9A9;
  --urban-grid-minimal-4: #D3D3D3;
  --urban-grid-minimal-5: #F8F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grid-minimal": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#F8F8F8",
      }
    }
  }
}

Related searches

minimalist grey color palettemodern concrete colorsarchitectural monochrome designelegant grey brandingsubtle UI color scheme

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#696969
·
Color 3#A9A9A9
·
Color 4#D3D3D3
·
Color 5#F8F8F8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.8:1AA18
6:1AA
8.4:1AAA
2
1.6:1Fail
2.3:1Fail
3.7:1AA18
5.2:1AA
3
3.8:1AA18
2.3:1Fail
1.6:1Fail
2.2:1Fail
4
6:1AA
3.7:1AA18
1.6:1Fail
1.4:1Fail
5
8.4:1AAA
5.2:1AA
2.2:1Fail
1.4:1Fail

Similar palettes

More like Urban Grid Minimal

View all monochrome
Urban Cement Edge
Urban Graphite Canvas
City Loft Minimal
City Steel Gleam
Concrete Bloom Grey
Concrete Jungle Bloom