Back to palettes

Palette

Vibrant City Pulse

An energetic blend of sharp, modern colors, representing the ceaseless, dynamic pulse of a bustling city.

VibrantEnergetic5 colors
More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vibrant City 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 Vibrant City Pulse.

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

Data visualization

#FF3F34#FFC72C#1DED80#2D2D2D#8C1B4A

Palette guide

How to use Vibrant City Pulse

Overview

The "Vibrant City Pulse" palette captures the ceaseless, dynamic energy of a bustling metropolis with its energetic blend of sharp, modern colors. It features a bold Scarlet Red (#FF3F34), a vibrant Golden Yellow (#FFC72C), a striking Electric Green (#1DED80), a strong Dark Grey (#2D2D2D), and a deep Berry Red (#8C1B4A). This collection is perfect for projects that demand a contemporary, edgy, and high-impact aesthetic, reflecting urban dynamism. Designers can leverage these distinct hues for modern branding, tech-focused interfaces, or compelling digital campaigns. Developers will find these hex codes invaluable for creating responsive designs, engaging animations, and consistent branding across web and mobile applications, ensuring a truly energetic user experience.

Best used for

  • Modern tech startups
  • Urban fashion brands
  • Event marketing and promotions
  • Dynamic app and web interfaces
  • Creative agency branding
  • Music and entertainment industry

Suggested color roles

primary

#FF3F34 makes a bold, energetic statement, excellent for calls to action, main headings, or key brand elements.

secondary

#2D2D2D provides a sophisticated, grounding anchor, ideal for main body text, backgrounds, or structural elements.

accent

#1DED80 offers a sharp, modern pop, perfect for interactive elements, notifications, or highlighting critical information.

background

#2D2D2D can serve as a primary background for a dark mode, or a clean white/light grey for a vibrant foreground.

text

Use white or a very light grey on #2D2D2D and #8C1B4A. For lighter colors like #FFC72C or #1DED80, use #2D2D2D or black.

Accessibility notes

  • Ensure high contrast when using #FFC72C for text, especially on light backgrounds; #2D2D2D is a good text color here.
  • #2D2D2D provides excellent contrast for white or light-colored text.
  • #FF3F34 and #8C1B4A offer good contrast for white text.
  • Avoid placing #FFC72C directly on #1DED80 without significant visual separation.

Recommended combinations

Urban Edge

Excellent for creating modern, high-contrast layouts, impactful banners, or strong branding.

#FF3F34 · #2D2D2D · #1DED80

Dynamic Pop

Ideal for highlighting key features, interactive elements, or creating engaging data visualizations.

#FFC72C · #2D2D2D · #8C1B4A

Bold & Grounded

Effective for creating a sophisticated yet energetic feel in illustrations or UI accents.

#8C1B4A · #FF3F34 · #1DED80

CSS variables

:root {
  --vibrant-city-pulse-1: #FF3F34;
  --vibrant-city-pulse-2: #FFC72C;
  --vibrant-city-pulse-3: #1DED80;
  --vibrant-city-pulse-4: #2D2D2D;
  --vibrant-city-pulse-5: #8C1B4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vibrant-city-pulse": {
        1: "#FF3F34",
        2: "#FFC72C",
        3: "#1DED80",
        4: "#2D2D2D",
        5: "#8C1B4A",
      }
    }
  }
}

Related searches

modern city palettedark mode vibrant colorsenergetic urban designtech brand color schemedynamic app UI colors

Palette colors

Hex values

Color 1#FF3F34
·
Color 2#FFC72C
·
Color 3#1DED80
·
Color 4#2D2D2D
·
Color 5#8C1B4A
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
2.2:1Fail
3.9:1AA18
2.5:1Fail
2
2.2:1Fail
1:1Fail
8.8:1AAA
5.7:1AA
3
2.2:1Fail
1:1Fail
8.8:1AAA
5.7:1AA
4
3.9:1AA18
8.8:1AAA
8.8:1AAA
1.6:1Fail
5
2.5:1Fail
5.7:1AA
5.7:1AA
1.6:1Fail

Similar palettes

More like Vibrant City Pulse

View all Vibrant
City Night Electric
Digital Circuit Matrix
Neon City Glimmer
Abstract Brush Stroke
Abstract Geometric Canvas
Cybernetic Chroma Burst