Palette

Urban Sprawl Neon

Captures the electric energy of a bustling city at night, with bright, glowing artificial lights against dark skies.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Sprawl Neon 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 Urban Sprawl Neon.

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

Data visualization

#2C0F4A#612185#A04FD7#E584FF#FFDAF4

Palette guide

How to use Urban Sprawl Neon

Overview

The Urban Sprawl Neon palette pulsates with the electric energy of a bustling city at night, featuring a vibrant gradient of purples and pinks. From the deep, mysterious #2C0F4A to the glowing #612185, the striking #A04FD7, the luminous #E584FF, and the soft, diffused #FFDAF4, this palette captures the essence of artificial lights against dark skies. It's ideal for designers and developers aiming to create energetic, futuristic, or playful experiences. This collection offers a dynamic range for impactful branding, engaging digital interfaces, or compelling visual content that demands attention. It provides a bold, contemporary feel, perfect for conveying innovation and excitement.

Best used for

Event promotions and concert branding
Gaming interfaces and streaming platforms
Tech startups and innovative product launches
Music festivals and entertainment venues
Fashion-forward or youth-oriented brands
Digital art and abstract design projects

Suggested color roles

primary

#2C0F4A - A deep, enigmatic purple, perfect for dark mode backgrounds, large headers, or elements needing a strong, impactful base.

secondary

#612185 - A rich, vibrant purple suitable for prominent UI elements, section backgrounds, or impactful subheadings.

accent

#E584FF - A bright, luminous pink-purple that serves as an excellent accent for interactive elements, calls-to-action, or glowing highlights.

background

#2C0F4A - The darkest shade, providing a dramatic backdrop that allows the brighter neon colors to truly pop and create a sense of depth.

text

#FFDAF4 or white for primary text on dark backgrounds, ensuring readability. For accents, #E584FF can be used on very dark elements.

Accessibility notes

Ensure high contrast between #FFDAF4 or white text and #2C0F4A background for readability.
Avoid using #E584FF text on #A04FD7 or #612185 backgrounds due to potential low contrast and vibrancy clashes.
Provide clear hover and focus states for interactive elements, perhaps using a brighter glow or subtle animation.
Test color combinations with a contrast checker, especially when using vibrant shades for critical information.

Recommended combinations

Neon Glow

Dramatic dark background with a bright, glowing accent and a soft, legible text color for high impact.

#2C0F4A · #E584FF · #FFDAF4

Energetic Pop

Creates an energetic, layered gradient effect, ideal for hero sections, banners, or vibrant infographics.

#612185 · #A04FD7 · #E584FF

Deep Contrast

A strong base color with light text and a vibrant secondary color for depth and visual interest in UI.

#2C0F4A · #FFDAF4 · #612185

CSS variables

:root {
  --urban-sprawl-neon-1: #2C0F4A;
  --urban-sprawl-neon-2: #612185;
  --urban-sprawl-neon-3: #A04FD7;
  --urban-sprawl-neon-4: #E584FF;
  --urban-sprawl-neon-5: #FFDAF4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-sprawl-neon": {
        1: "#2C0F4A",
        2: "#612185",
        3: "#A04FD7",
        4: "#E584FF",
        5: "#FFDAF4",
      }
    }
  }
}

Hex values

Color 1#2C0F4A

Color 2#612185

Color 3#A04FD7

Color 4#E584FF

Color 5#FFDAF4

Accessibility

Contrast checker

1.6:1Fail

3.6:1AA18

7.1:1AAA

13:1AAA

1.6:1Fail

2.2:1Fail

4.4:1AA18

8:1AAA

3.6:1AA18

2.2:1Fail

2:1Fail

3.6:1AA18

7.1:1AAA

4.4:1AA18

2:1Fail

1.8:1Fail

13:1AAA

8:1AAA

3.6:1AA18

1.8:1Fail

Similar palettes

More like Urban Sprawl Neon

Urban Sprawl Neon

See it in context.

Ready when you are.

Built with Urban Sprawl Neon.

How to use Urban Sprawl Neon

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Neon Glow

Energetic Pop

Deep Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Sprawl Neon