Back to palettes

Palette

Vibrant City Pulse

Bold, electric hues reflect the non-stop energy, diverse cultures, and vibrant lights of a bustling metropolis at night.

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

#FF3E5C#FFC300#38B48F#008DDF#A34EAC

Palette guide

How to use Vibrant City Pulse

Overview

The "Vibrant City Pulse" palette captures the non-stop energy and diverse cultures of a bustling metropolis at night with its bold, electric hues. This modern collection features a striking Rose Red (#FF3E5C), a vibrant Goldenrod (#FFC300), a refreshing Teal Green (#38B48F), a deep Sky Blue (#008DDF), and an enigmatic Purple (#A34EAC). It's perfect for projects requiring a contemporary, dynamic, and urban feel. Designers can utilize these distinct colors for fashion branding, tech interfaces, or lively event promotions. Developers will find these hex codes invaluable for creating responsive designs, engaging animations, and consistent branding across digital platforms, ensuring a modern and energetic user experience.

Best used for

  • Urban lifestyle brands
  • Modern tech dashboards
  • Event promotion and ticketing
  • Fashion and apparel design
  • Music festival branding
  • Dynamic app interfaces

Suggested color roles

primary

#FF3E5C makes a bold statement, ideal for calls to action, prominent headlines, or main branding elements.

secondary

#008DDF provides a stable, modern contrast, suitable for navigation, background sections, or informational blocks.

accent

#FFC300 offers a warm, bright highlight, perfect for interactive elements, icons, or subtle design details.

background

A clean white, light grey, or a dark charcoal can serve as an effective backdrop, allowing the vibrant colors to pop.

text

For maximum legibility, use a deep black or dark grey on lighter backgrounds, or white on the darker palette colors.

Accessibility notes

  • Ensure sufficient contrast when placing #FFC300 on light backgrounds; dark text is usually required.
  • #FF3E5C and #A34EAC can support white or light-colored text well.
  • Avoid using #38B48F as text on #FFC300 without careful contrast checking.
  • Use a robust color contrast checker for all text and interactive elements.

Recommended combinations

Urban Glow

Excellent for energetic banners, promotional graphics, or vibrant UI headers.

#FF3E5C · #FFC300 · #008DDF

Modern Edge

Ideal for creating contemporary illustrations, data visualizations, or unique brand patterns.

#38B48F · #A34EAC · #FF3E5C

Dynamic Depth

Effective for layered designs, interactive elements, or bringing depth to digital interfaces.

#008DDF · #FFC300 · #A34EAC

CSS variables

:root {
  --vibrant-city-pulse-2-1: #FF3E5C;
  --vibrant-city-pulse-2-2: #FFC300;
  --vibrant-city-pulse-2-3: #38B48F;
  --vibrant-city-pulse-2-4: #008DDF;
  --vibrant-city-pulse-2-5: #A34EAC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vibrant-city-pulse-2": {
        1: "#FF3E5C",
        2: "#FFC300",
        3: "#38B48F",
        4: "#008DDF",
        5: "#A34EAC",
      }
    }
  }
}

Related searches

urban color palettemodern vibrant colorscity nightlife paletteenergetic tech brandingdynamic app color scheme

Palette colors

Hex values

Color 1#FF3E5C
·
Color 2#FFC300
·
Color 3#38B48F
·
Color 4#008DDF
·
Color 5#A34EAC
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
1.3:1Fail
1:1Fail
1.4:1Fail
2
2.1:1Fail
1.6:1Fail
2.2:1Fail
3.1:1AA18
3
1.3:1Fail
1.6:1Fail
1.4:1Fail
1.9:1Fail
4
1:1Fail
2.2:1Fail
1.4:1Fail
1.4:1Fail
5
1.4:1Fail
3.1:1AA18
1.9:1Fail
1.4:1Fail

Similar palettes

More like Vibrant City Pulse

View all vibrant