Palette

Electro City Beat

Intense, contrasting electric colors, pulsating with the dynamic energy of a modern city.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Electro City Beat 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 Electro City Beat.

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

Data visualization

#FF00FF#00FF00#FFD700#00BFFF#8A2BE2

Palette guide

How to use Electro City Beat

Overview

The Electro City Beat palette pulsates with the dynamic energy of a modern city, featuring intense, contrasting electric colors. This vibrant collection includes vibrant magenta (#FF00FF), luminous lime green (#00FF00), brilliant gold (#FFD700), electric sky blue (#00BFFF), and radiant amethyst (#8A2BE2). It's an ideal choice for designs that demand a high-energy, futuristic, and urban aesthetic. Designers and developers can leverage these striking hues to create captivating digital experiences, from interactive interfaces to bold branding. The palette's playful yet powerful nature ensures elements stand out, making it perfect for conveying excitement and a distinct modern, energetic vibe.

Best used for

Modern urban branding and marketing materials
Electronic music festival promotions
Interactive app interfaces and dashboards
Futuristic game design elements
Dynamic website hero sections
Youth-oriented fashion and lifestyle content

Suggested color roles

primary

Vibrant magenta (#FF00FF) or electric sky blue (#00BFFF) can lead the design, used for main headings, calls-to-action, or dominant graphical elements.

secondary

Luminous lime green (#00FF00) or brilliant gold (#FFD700) provide excellent support for subheadings, secondary interactive elements, or accentuating graphics.

accent

Radiant amethyst (#8A2BE2) offers a sophisticated accent, perfect for subtle highlights, interactive states, or adding depth to gradients.

background

A deep charcoal or near-black background is highly recommended to allow these intense electric colors to truly pop and achieve their maximum impact.

text

Use white or a very light gray for body text on dark backgrounds to ensure readability. For headings, any of the vibrant palette colors will stand out against a dark ground.

Accessibility notes

Ensure high contrast when pairing any two vibrant colors, especially for text, by checking WCAG guidelines.
Avoid using highly saturated colors like #00FF00 or #FFD700 for extensive body text to prevent eye strain.
Consider larger font sizes for text elements with lower contrast ratios to improve overall legibility.
Prioritize dark backgrounds for optimal readability of the bright, electric text colors.

Recommended combinations

City Night

Ideal for gradients in hero sections, backgrounds, or animated elements, evoking a futuristic urban skyline at night.

#FF00FF · #00BFFF · #8A2BE2

Electro Pop

Perfect for calls-to-action, buttons, or iconography that needs to be energetic and highly visible against a dark background.

#FFD700 · #00FF00 · #FF00FF

Dynamic Duo

Excellent for data visualizations, progress indicators, or UI elements where a vibrant and playful contrast is desired.

#00BFFF · #8A2BE2 · #FFD700

CSS variables

:root {
  --electro-city-beat-1: #FF00FF;
  --electro-city-beat-2: #00FF00;
  --electro-city-beat-3: #FFD700;
  --electro-city-beat-4: #00BFFF;
  --electro-city-beat-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electro-city-beat": {
        1: "#FF00FF",
        2: "#00FF00",
        3: "#FFD700",
        4: "#00BFFF",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FF00

Color 3#FFD700

Color 4#00BFFF

Color 5#8A2BE2

Accessibility

Contrast checker

2.3:1Fail

2.2:1Fail

1.5:1Fail

1.9:1Fail

2.3:1Fail

1:1Fail

1.5:1Fail

4.3:1AA18

2.2:1Fail

1:1Fail

1.5:1Fail

4.2:1AA18

1.5:1Fail

2.8:1Fail

1.9:1Fail

4.3:1AA18

4.2:1AA18

2.8:1Fail

Similar palettes

More like Electro City Beat

Electro City Beat

See it in context.

Ready when you are.

Built with Electro City Beat.

How to use Electro City Beat

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

City Night

Electro Pop

Dynamic Duo

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Electro City Beat