Palette

City Night Electric

A high-voltage palette capturing the dynamic interplay of electric light and shadow in a bustling city at night.

VibrantEnergetic5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Night Electric 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 City Night Electric.

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

Data visualization

#F44336#FFC107#FFEB3B#00BCD4#424242

Palette guide

How to use City Night Electric

Overview

The "City Night Electric" palette is a high-voltage collection capturing the dynamic interplay of electric light and shadow in a bustling city at night. Featuring vibrant #F44336 (red), energetic #FFC107 (amber), bright #FFEB3B (yellow), and striking #00BCD4 (cyan), all grounded by a deep #424242 (dark grey), this palette is designed for impact and excitement. Designers can leverage these vivid colors to create visually arresting interfaces, dynamic branding, and digital experiences that pulse with urban energy. Developers will find these hex codes excellent for implementing glow effects, interactive highlights, and visually stunning UI elements, making it ideal for entertainment, gaming, or cutting-edge technology projects.

Best used for

Gaming website interfaces
Concert and event promotions
Futuristic UI/UX designs
Dynamic advertising campaigns
High-energy social media graphics
Modern tech product showcases

Suggested color roles

primary

#F44336 - A powerful, electrifying red, excellent for main calls-to-action, primary headlines, or key brand elements that demand immediate attention.

secondary

#00BCD4 - A brilliant cyan, perfect for supporting interactive elements, subheadings, or as a vibrant contrasting color to the red.

accent

#FFC107 - An energetic amber, ideal for drawing focus to alerts, notifications, or as a dynamic visual highlight that pops.

background

#424242 - A deep, dark grey, providing a sophisticated canvas that allows the vibrant colors to glow intensely and create depth.

text

White or #FFEB3B - Use white for primary body text against #424242 for optimal readability. #FFEB3B can be used for highlighted text or important informational elements.

Accessibility notes

Ensure significant contrast between vibrant colors and #424242 for all text and interactive elements.
Avoid using #FFEB3B for extensive blocks of text, as its brightness can cause eye strain.
Provide clear non-color-based indicators (e.g., icons) for interactive states to aid users with color vision deficiencies.
Use a true black or charcoal for critical legal or warning text if the palette's darker shades don't provide sufficient contrast.

Recommended combinations

Electric Nightscape

Ideal for creating striking dark mode interfaces, setting a vibrant, nocturnal mood for digital platforms.

#424242 · #F44336 · #00BCD4

Dynamic Highlight

Perfect for drawing attention to specific data points, new features, or urgent notifications in an engaging way.

#424242 · #FFC107 · #FFEB3B

Urban Energy

Great for creating energetic visual branding, dynamic web banners, or game UI elements that need to stand out.

#F44336 · #00BCD4 · #424242

CSS variables

:root {
  --city-night-electric-1: #F44336;
  --city-night-electric-2: #FFC107;
  --city-night-electric-3: #FFEB3B;
  --city-night-electric-4: #00BCD4;
  --city-night-electric-5: #424242;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-night-electric": {
        1: "#F44336",
        2: "#FFC107",
        3: "#FFEB3B",
        4: "#00BCD4",
        5: "#424242",
      }
    }
  }
}

Hex values

Color 1#F44336

Color 2#FFC107

Color 3#FFEB3B

Color 4#00BCD4

Color 5#424242

Accessibility

Contrast checker

2.3:1Fail

3:1AA18

1.6:1Fail

2.7:1Fail

2.3:1Fail

1.3:1Fail

1.4:1Fail

6.2:1AA

3:1AA18

1.3:1Fail

1.9:1Fail

8.2:1AAA

1.6:1Fail

1.4:1Fail

1.9:1Fail

4.4:1AA18

2.7:1Fail

6.2:1AA

8.2:1AAA

4.4:1AA18

Similar palettes

More like City Night Electric

View all Vibrant

Cyberpunk Alley Glow

Digital Glitch Burst

Electric Circuit Pulse

Neon City Glimmer

Retro Comic Brights

Vibrant City Pulse