Palette

Electric City Night

Intense purples and blacks evoke the high-contrast glow of a futuristic city at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F0F#2A0A4A#6A0A8A#AA0AF0#EE4BEE

Palette guide

How to use Electric City Night

Overview

The 'Electric City Night' palette, with its intense purples and near-black tones, evokes the high-contrast glow of a futuristic city at night. Featuring a deep #0F0F0F base, it progresses through rich #2A0A4A and #6A0A8A, culminating in vibrant electric purples #AA0AF0 and #EE4BEE. This scheme is ideal for creating designs that require depth, sophistication, and a powerful, modern urban aesthetic, making it perfect for tech, gaming, or high-end digital art.

Best used for

Tech brand identity and digital interfaces
Cyberpunk game UI and character design
Music festival and concert branding
Digital art installations and motion graphics
Dark mode applications and websites
Futuristic website and app designs

Suggested color roles

primary

Use #AA0AF0 as the dominant electric purple for main calls-to-action, primary interactive elements, or focal points in a design.

secondary

Employ #6A0A8A for supporting backgrounds, subheadings, or to create a subtle depth within the purple spectrum, complementing the primary hue.

accent

Apply #EE4BEE sparingly for high-energy highlights, glowing effects, notifications, or key information that needs to pop dramatically.

background

Utilize #0F0F0F as the primary background color to establish a deep, atmospheric canvas, enhancing the luminosity of the brighter purples.

text

For body text on dark backgrounds, use white or a very light grey. For impactful headings or alerts, #EE4BEE will provide excellent contrast and visibility.

Accessibility notes

Ensure sufficient contrast for text, especially on the darker purples. White or light grey text is recommended on #0F0F0F.
Avoid using #2A0A4A for small text on #0F0F0F, as their low contrast may hinder readability.
Bright purples like #EE4BEE are excellent for highlights but can be fatiguing for large blocks of text.
Test color pairings for contrast ratios against WCAG guidelines, particularly for interactive elements.

Recommended combinations

Deep Purple Glow

Ideal for a dark UI: #0F0F0F as background, #AA0AF0 for primary content, and #EE4BEE for urgent notifications or interactive elements.

#0F0F0F · #AA0AF0 · #EE4BEE

Gradient Urban Night

Create a smooth, sophisticated gradient for backgrounds or large graphical elements, adding depth and visual interest.

#2A0A4A · #6A0A8A · #AA0AF0

Electric Contrast

Use #0F0F0F as a base, #6A0A8A for subtle elements, and #EE4BEE for striking, eye-catching accents in digital art.

#0F0F0F · #6A0A8A · #EE4BEE

CSS variables

:root {
  --electric-city-night-1: #0F0F0F;
  --electric-city-night-2: #2A0A4A;
  --electric-city-night-3: #6A0A8A;
  --electric-city-night-4: #AA0AF0;
  --electric-city-night-5: #EE4BEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-city-night": {
        1: "#0F0F0F",
        2: "#2A0A4A",
        3: "#6A0A8A",
        4: "#AA0AF0",
        5: "#EE4BEE",
      }
    }
  }
}

Hex values

Color 1#0F0F0F

Color 2#2A0A4A

Color 3#6A0A8A

Color 4#AA0AF0

Color 5#EE4BEE

Accessibility

Contrast checker

1.1:1Fail

1.8:1Fail

3.7:1AA18

6.3:1AA

1.1:1Fail

1.6:1Fail

3.2:1AA18

5.5:1AA

1.8:1Fail

1.6:1Fail

2:1Fail

3.4:1AA18