Palette

City Night Graffiti

Bold, electric neon shades pop against a backdrop of urban night, mimicking vibrant street art under city lights.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#2A2A2A#FF00FF#00FFFF#FFFF00

Palette guide

How to use City Night Graffiti

Overview

This palette, "City Night Graffiti", captures the raw energy of urban street art with its intense neon hues against a dark backdrop. Featuring deep black #0A0A0A and a slightly lighter dark gray #2A2A2A, it provides a perfect canvas for vibrant accents like electric magenta #FF00FF, striking cyan #00FFFF, and bold yellow #FFFF00. Designers can leverage this palette to create high-impact, modern interfaces, captivating digital art, or edgy branding that demands attention. The stark contrast between the dark neutrals and the luminous neons ensures visual excitement and a dynamic user experience, ideal for projects aiming for a distinctive, energetic, and contemporary aesthetic.

Best used for

Gaming interfaces and UI
Event posters and flyers
Music festival branding
Streetwear fashion websites
Digital art and illustrations
Youth-focused marketing campaigns

Suggested color roles

primary

#0A0A0A - The foundational deep black, providing a strong, immersive base for vibrant elements.

secondary

#2A2A2A - A slightly softer dark gray, offering subtle depth and texture in backgrounds or secondary elements.

accent

#FF00FF - The powerful magenta, perfect for calls-to-action, highlights, or energetic graphic elements.

background

#0A0A0A - Ideal for dark mode interfaces, setting a dramatic and sophisticated stage for neon accents.

text

#FFFF00 - For headlines and important information on dark backgrounds, or a near-white color like #F0F0F0 for body text.

Accessibility notes

Ensure sufficient contrast when using neon colors for text on dark backgrounds; #FF00FF and #FFFF00 on #0A0A0A might need larger font sizes.
Avoid using multiple vibrant neon colors for large blocks of text to prevent visual fatigue.
Pair high-contrast neon accents with softer, readable neutrals for body text (e.g., light grey on #2A2A2A).
Test color combinations with accessibility checkers, especially for users with color vision deficiencies, as bright neons can be challenging.

Recommended combinations

Neon Pop

Ideal for striking headlines, interactive elements, or graphic overlays against a dark, minimalist backdrop.

#0A0A0A · #FF00FF · #00FFFF

Urban Glow

Use for dynamic dashboards, subtle background textures with bright indicators, or modern branding.

#2A2A2A · #FFFF00 · #FF00FF

Dark Energy

Effective for dark mode themes where yellow highlights key information or interactive components.

#0A0A0A · #2A2A2A · #FFFF00

CSS variables

:root {
  --city-night-graffiti-1: #0A0A0A;
  --city-night-graffiti-2: #2A2A2A;
  --city-night-graffiti-3: #FF00FF;
  --city-night-graffiti-4: #00FFFF;
  --city-night-graffiti-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-night-graffiti": {
        1: "#0A0A0A",
        2: "#2A2A2A",
        3: "#FF00FF",
        4: "#00FFFF",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#2A2A2A

Color 3#FF00FF

Color 4#00FFFF

Color 5#FFFF00

Accessibility

Contrast checker

1.4:1Fail

6.3:1AA

15.8:1AAA

18.4:1AAA

1.4:1Fail

4.6:1AA

11.4:1AAA

13.4:1AAA

6.3:1AA

4.6:1AA

2.5:1Fail

2.9:1Fail