Back to palettes

Palette

Geometric Urban Pulse

Sharp lines and bold hues capture the energetic, structured rhythm of city life at twilight.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E2E3A#4A4E69#767699#AAADC4#ED2D3D

Palette guide

How to use Geometric Urban Pulse

Overview

Geometric Urban Pulse is a sophisticated and energetic palette, capturing the structured rhythm of city life at twilight. It features a deep, almost black navy (#2E2E3A), a rich slate blue (#4A4E69), a muted lavender-grey (#767699), a light steel blue (#AAADC4), and a striking, vibrant red accent (#ED2D3D). This palette offers a modern and strong aesthetic, perfect for designs that require both depth and a contemporary edge. Designers can utilize its cool, subdued base tones with the powerful red to create interfaces or branding that feels refined, yet dynamic, evoking an urban, architectural feel.

Best used for

  • Tech company branding
  • Modern architectural presentations
  • Automotive industry designs
  • Sleek web interfaces
  • Editorial layouts for urban magazines
  • High-end product packaging

Suggested color roles

primary

A strong, dark base, #2E2E3A is ideal for backgrounds, main navigation, or sophisticated headers.

secondary

Provides a harmonious dark-to-mid tone, #4A4E69 is suitable for subheadings, panels, or secondary UI elements.

accent

This vivid red (#ED2D3D) is perfect for calls-to-action, warnings, or key interactive elements to create a sharp contrast.

background

Use this light blue-grey (#AAADC4) for clean, spacious backgrounds that allow darker elements to stand out, or as a lighter section background.

text

For dark backgrounds, use white. For lighter backgrounds like #AAADC4, use #2E2E3A or a similar dark grey for optimal readability.

Accessibility notes

  • Ensure #ED2D3D (red) text has sufficient contrast against any background, especially lighter blues.
  • Darker shades like #2E2E3A and #4A4E69 provide excellent contrast for white or light grey text.
  • Avoid using #767699 (lavender-grey) for small text on #AAADC4 (light steel blue) due to potential low contrast.
  • Consider using larger font sizes for text in #767699 when used on darker backgrounds for better legibility.

Recommended combinations

City Night

Ideal for impactful headers or dark mode themes, with the red providing a vivid highlight.

#2E2E3A · #4A4E69 · #ED2D3D

Structured Contrast

Creates a clean, modern aesthetic for body text and background sections.

#AAADC4 · #767699 · #2E2E3A

Dynamic Accent

Perfect for interactive elements, buttons, and status indicators in a sophisticated UI.

#4A4E69 · #ED2D3D · #AAADC4

CSS variables

:root {
  --geometric-urban-pulse-1: #2E2E3A;
  --geometric-urban-pulse-2: #4A4E69;
  --geometric-urban-pulse-3: #767699;
  --geometric-urban-pulse-4: #AAADC4;
  --geometric-urban-pulse-5: #ED2D3D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "geometric-urban-pulse": {
        1: "#2E2E3A",
        2: "#4A4E69",
        3: "#767699",
        4: "#AAADC4",
        5: "#ED2D3D",
      }
    }
  }
}

Related searches

urban color schememodern city palettetech branding colorssleek UI design palettered and grey color combination

Palette colors

Hex values

Color 1#2E2E3A
·
Color 2#4A4E69
·
Color 3#767699
·
Color 4#AAADC4
·
Color 5#ED2D3D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.1:1AA18
6:1AA
3.2:1AA18
2
1.6:1Fail
1.9:1Fail
3.7:1AA18
2:1Fail
3
3.1:1AA18
1.9:1Fail
2:1Fail
1:1Fail
4
6:1AA
3.7:1AA18
2:1Fail
1.9:1Fail
5
3.2:1AA18
2:1Fail
1:1Fail
1.9:1Fail

Similar palettes

More like Geometric Urban Pulse

View all vibrant