Back to palettes

Palette

Urban Geometry Pulse

A sophisticated palette inspired by modern city architecture and clean, structured forms.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4A4A#8D8D8D#BFBFBF#E0E0E0#6A6A6A

Palette guide

How to use Urban Geometry Pulse

Overview

The Urban Geometry Pulse palette offers a sophisticated range of greys, inspired by modern city architecture and clean, structured forms. This collection spans from the deep, versatile #4A4A4A to the bright, airy #E0E0E0, with a balanced mid-tone like #6A6A6A. It's an excellent choice for designers aiming to convey professionalism, minimalism, and a contemporary edge. Developers will find these hex codes straightforward to implement for creating clean, structured user interfaces and consistent branding across various digital platforms. The subtle variations within the grey spectrum provide ample opportunities for visual hierarchy without relying on strong color contrasts, ensuring a cohesive and professional appearance. This palette is highly adaptable for projects requiring a modern, understated, and enduring visual identity.

Best used for

  • Corporate websites and dashboards
  • Minimalist portfolio sites (design, architecture)
  • Tech startup branding (clean, modern)
  • Mobile apps with a professional, understated theme
  • Editorial design for business or finance content
  • E-commerce for high-end, minimalist products

Suggested color roles

primary

Utilize #4A4A4A for strong, foundational elements like headers, footers, or primary navigation, establishing a sense of gravitas.

secondary

Apply #6A6A6A for subheadings, secondary buttons, or larger content blocks, offering a versatile mid-grey that complements the primary.

accent

Introduce #8D8D8D sparingly for interactive states, subtle dividers, or graphic elements to add detail without disrupting the minimalist feel.

background

Employ #E0E0E0 as a clean, light background, providing excellent contrast for darker text and a fresh, open feel.

text

Choose #4A4A4A for body text on light backgrounds like #E0E0E0 to ensure maximum readability and a cohesive, professional look.

Accessibility notes

  • Ensure sufficient contrast between #4A4A4A text and #E0E0E0 background (WCAG AA compliant).
  • Avoid using #BFBFBF for small text on #E0E0E0 as contrast may be insufficient.
  • Large text in #6A6A6A on #E0E0E0 offers good readability and a balanced appearance.
  • For critical information, always pair the darkest color, #4A4A4A, with the lightest, #E0E0E0.

Recommended combinations

Geometric Contrast

A powerful combination for main branding, using the darkest grey for text, the lightest for backgrounds, and a mid-tone for accents.

#4A4A4A · #E0E0E0 · #6A6A6A

Subtle Pulse

Ideal for creating subtle visual transitions or content blocks, blending various medium greys for a refined, modern aesthetic.

#6A6A6A · #8D8D8D · #BFBFBF

Urban Base

Emphasizes a grounded and structured feel, with the darkest grey as primary, a slightly lighter grey for secondary, and the lightest for background.

#4A4A4A · #6A6A6A · #E0E0E0

CSS variables

:root {
  --urban-geometry-pulse-1: #4A4A4A;
  --urban-geometry-pulse-2: #8D8D8D;
  --urban-geometry-pulse-3: #BFBFBF;
  --urban-geometry-pulse-4: #E0E0E0;
  --urban-geometry-pulse-5: #6A6A6A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-geometry-pulse": {
        1: "#4A4A4A",
        2: "#8D8D8D",
        3: "#BFBFBF",
        4: "#E0E0E0",
        5: "#6A6A6A",
      }
    }
  }
}

Related searches

modern grey color schememinimalist UI paletteurban architecture colorsprofessional grey designcool neutral web design

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#8D8D8D
·
Color 3#BFBFBF
·
Color 4#E0E0E0
·
Color 5#6A6A6A
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.7:1Fail
4.8:1AA
6.7:1AA
1.6:1Fail
2
2.7:1Fail
1.8:1Fail
2.5:1Fail
1.6:1Fail
3
4.8:1AA
1.8:1Fail
1.4:1Fail
2.9:1Fail
4
6.7:1AA
2.5:1Fail
1.4:1Fail
4.1:1AA18
5
1.6:1Fail
1.6:1Fail
2.9:1Fail
4.1:1AA18

Similar palettes

More like Urban Geometry Pulse

View all neutral
Modern Slate Canvas
Concrete Garden Grey
Concrete Grid Lines
Concrete Jungle
Concrete Jungle Bloom
Concrete Loft Living