Back to palettes

Palette

Deco Urban Geometry

Sleek, sophisticated greys and deep teal-greys, echoing the elegant lines of Art Deco cityscapes.

NeutralElegant5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deco Urban Geometry 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 Deco Urban Geometry.

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

Data visualization

#2F4F4F#708090#A9A9A9#D3D3D3#1B2F2F

Palette guide

How to use Deco Urban Geometry

Overview

The Deco Urban Geometry palette offers sleek, sophisticated grays and deep teal-greys, echoing the elegant lines of Art Deco cityscapes. This refined collection moves from the very dark #1B2F2F and #2F4F4F through balanced mid-tones like #708090 and #A9A9A9, culminating in the light #D3D3D3. Designers and developers can utilize these cool, understated hues to create modern digital interfaces, professional brand identities, or architectural visualizations. Its monochromatic yet diverse range of grays and deep teals provides a sense of structure, clarity, and timeless sophistication, perfect for projects requiring a minimalist yet impactful aesthetic.

Best used for

  • Architectural and interior design firms
  • Modern corporate branding
  • Technology and software interfaces
  • Urban development projects
  • Minimalist art and photography portfolios
  • High-end product design presentations

Suggested color roles

primary

#2F4F4F - A deep, elegant dark teal-gray that provides a strong, sophisticated foundation, ideal for main headings, prominent UI elements, or as a dominant background.

secondary

#708090 - A balanced, cool gray, excellent for secondary navigation, subheadings, or as a complementary background section, offering versatility and a modern feel.

accent

#D3D3D3 - This very light gray provides a subtle yet effective accent, perfect for interactive elements, hover states, or thin dividers to maintain a minimalist aesthetic.

background

#1B2F2F - A very deep, almost black teal-gray, ideal for dramatic, sophisticated backgrounds that highlight lighter elements and convey a sense of depth and luxury.

text

#A9A9A9 - A medium gray, suitable for secondary text on dark backgrounds. For primary body text on #D3D3D3, a dark charcoal or black is recommended for optimal readability.

Accessibility notes

  • Ensure sufficient contrast for text. White text on #1B2F2F, #2F4F4F, and #708090 will generally provide excellent readability.
  • Avoid using #A9A9A9 or #D3D3D3 for text on #708090 or lighter backgrounds as contrast will be insufficient.
  • Use #2F4F4F or #1B2F2F for body text on #D3D3D3 backgrounds to meet WCAG AA contrast requirements.
  • The palette's cool tones are generally good for legibility, but always test specific foreground-background combinations.

Recommended combinations

Urban Structure

#1B2F2F as a deep background, #D3D3D3 for clean text, and #708090 for secondary elements.

#1B2F2F · #D3D3D3 · #708090

Geometric Layers

Ideal for creating visual depth and hierarchy in layouts, with #2F4F4F as a base.

#2F4F4F · #A9A9A9 · #708090

Sleek Contrast

#D3D3D3 for a light, airy background, #2F4F4F for strong headings, and #A9A9A9 for body text.

#D3D3D3 · #2F4F4F · #A9A9A9

CSS variables

:root {
  --deco-urban-geometry-1: #2F4F4F;
  --deco-urban-geometry-2: #708090;
  --deco-urban-geometry-3: #A9A9A9;
  --deco-urban-geometry-4: #D3D3D3;
  --deco-urban-geometry-5: #1B2F2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deco-urban-geometry": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#1B2F2F",
      }
    }
  }
}

Related searches

art deco gray paletteurban sophisticated colorsgeometric design schememinimalist cool tonesmodern architectural colors

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#A9A9A9
·
Color 4#D3D3D3
·
Color 5#1B2F2F
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.8:1AA18
6:1AA
1.6:1Fail
2
2.2:1Fail
1.7:1Fail
2.7:1Fail
3.5:1AA18
3
3.8:1AA18
1.7:1Fail
1.6:1Fail
6:1AA
4
6:1AA
2.7:1Fail
1.6:1Fail
9.4:1AAA
5
1.6:1Fail
3.5:1AA18
6:1AA
9.4:1AAA

Similar palettes

More like Deco Urban Geometry

View all Neutral
Art Deco Metropolis
Antique Silk Drape
Pearl Sheen Elegance
Pearl Silk Gleam
Cityscape Blueprint
Concrete Urbanity