Palette

Urban Night Chroma

Reflects the electric energy of city streets after dark, filled with neon signs and blurred lights.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Night Chroma 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 Night Chroma.

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

Data visualization

#0F0F0F#FF00FF#00FFFF#FFD700#800080

Palette guide

How to use Urban Night Chroma

Overview

The Urban Night Chroma palette reflects the electric energy of city streets after dark, filled with neon signs and blurred lights. It grounds itself with a deep, authoritative #0F0F0F (near-black), allowing four intensely vibrant neons to truly shine: #FF00FF (magenta), #00FFFF (cyan), #FFD700 (gold), and a rich #800080 (purple). This palette is designed for designers who want to create a high-impact, dynamic, and modern aesthetic. It's particularly effective for projects related to nightlife, digital entertainment, or any brand seeking to convey a sense of excitement and cutting-edge urban flair through bold and contrasting colors.

Best used for

Nightclub and bar promotions
Gaming event branding
Digital art and motion graphics
E-sports team identity
Fashion and streetwear campaigns
Music festival visuals

Suggested color roles

primary

Use #00FFFF for primary calls-to-action or key navigational elements, providing a clear, high-tech glow.

secondary

Employ #FF00FF as a secondary accent for interactive components or to add a powerful, energetic punch.

accent

Apply #FFD700 for critical highlights, warnings, or to add a touch of luxury and distinct visibility.

background

Utilize #0F0F0F for the main background, ensuring maximum contrast and allowing the neon colors to radiate.

text

For primary text, white or a very light grey is recommended on #0F0F0F. For headlines, #00FFFF or #FF00FF are highly impactful.

Accessibility notes

The neon colors (#FF00FF, #00FFFF, #FFD700) offer excellent contrast against #0F0F0F for large text and UI elements.
Ensure white or very light grey text is used on #0F0F0F for optimal readability of body text.
Avoid using #800080 for small body text on #0F0F0F without checking WCAG contrast ratios, as it might be insufficient.
Consider using a thicker font weight for text in #FFD700 to enhance legibility against darker backgrounds.

Recommended combinations

Urban Core

Ideal for dark mode interfaces, showcasing vibrant interactive elements against a deep, solid black.

#0F0F0F · #00FFFF · #FF00FF

Electric Glam

Great for secondary sections or decorative elements, adding a sophisticated glow with rich purple.

#0F0F0F · #FFD700 · #800080

Dynamic Glow

Apply for headers, hero images, or animated elements where maximum visual punch and multi-color vibrancy are needed.

#FF00FF · #00FFFF · #FFD700

CSS variables

:root {
  --urban-night-chroma-1: #0F0F0F;
  --urban-night-chroma-2: #FF00FF;
  --urban-night-chroma-3: #00FFFF;
  --urban-night-chroma-4: #FFD700;
  --urban-night-chroma-5: #800080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-night-chroma": {
        1: "#0F0F0F",
        2: "#FF00FF",
        3: "#00FFFF",
        4: "#FFD700",
        5: "#800080",
      }
    }
  }
}

Hex values

Color 1#0F0F0F

Color 2#FF00FF

Color 3#00FFFF

Color 4#FFD700

Color 5#800080

Accessibility

Contrast checker

6.1:1AA

15.3:1AAA

13.7:1AAA

2:1Fail

6.1:1AA

2.5:1Fail

2.2:1Fail

3:1AA18

15.3:1AAA

2.5:1Fail

1.1:1Fail

7.5:1AAA

13.7:1AAA

2.2:1Fail

1.1:1Fail

6.7:1AA

2:1Fail

3:1AA18

7.5:1AAA

6.7:1AA

Similar palettes

More like Urban Night Chroma