Palette

Graffiti Wall Chroma

Bold and electric, showcasing the vibrant clash of neon colors against a dark, industrial urban backdrop.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Graffiti Wall 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 Graffiti Wall Chroma.

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

Data visualization

#1D1D1B#333333#FF00FF#00FFFF#FFFF00

Palette guide

How to use Graffiti Wall Chroma

Overview

The Graffiti Wall Chroma palette is bold and electric, showcasing the vibrant clash of neon colors against a dark, industrial urban backdrop. Featuring deep tones like #1D1D1B and #333333, it provides a powerful stage for the striking neon magenta #FF00FF, the electric cyan #00FFFF, and the brilliant yellow #FFFF00. This palette is an excellent choice for designers and developers aiming to create edgy, modern, and visually arresting designs. It’s perfect for projects that require a high-contrast, energetic aesthetic, reminiscent of city nights and illuminated street art.

Best used for

Dark mode UI/UX design
Gaming interfaces and branding
Cyberpunk or futuristic themes
Nightclub and event promotions
Tech startup branding
Digital art with a neon aesthetic

Suggested color roles

primary

Use #1D1D1B as the foundational background, providing a deep, rich canvas for neon elements.

secondary

Employ #333333 for secondary backgrounds, panels, or subtle textured overlays, maintaining a dark theme.

accent

Apply #FF00FF or #00FFFF for high-impact accents, interactive elements, or glow effects that stand out vividly.

background

The dark #1D1D1B is the ideal background, allowing the neon colors to truly pop with maximum contrast.

text

For body text, use a light gray on the dark backgrounds. For headlines and calls to action, #FFFF00 or #00FFFF provides excellent visibility and impact.

Accessibility notes

Ensure sufficient contrast between neon text and dark backgrounds; test with WCAG tools.
Avoid using #FFFF00 on light gray backgrounds, as contrast will be poor.
Use neon colors sparingly for text; they are best for headlines, icons, or interactive states.
Provide alternative text for purely color-coded information to aid users with visual impairments.

Recommended combinations

Neon Night

Perfect for dark mode interfaces, futuristic themes, or creating striking digital art with an illuminated feel.

#1D1D1B · #FF00FF · #00FFFF

Electric Glow

Ideal for highlighting interactive elements, calls to action, or creating vibrant accents on a muted dark base.

#333333 · #FFFF00 · #FF00FF

Urban Contrast

A powerful combination for branding, website headers, or any design needing a bold, modern, and energetic statement.

#1D1D1B · #FFFF00 · #00FFFF

CSS variables

:root {
  --graffiti-wall-chroma-1: #1D1D1B;
  --graffiti-wall-chroma-2: #333333;
  --graffiti-wall-chroma-3: #FF00FF;
  --graffiti-wall-chroma-4: #00FFFF;
  --graffiti-wall-chroma-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graffiti-wall-chroma": {
        1: "#1D1D1B",
        2: "#333333",
        3: "#FF00FF",
        4: "#00FFFF",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#1D1D1B

Color 2#333333

Color 3#FF00FF

Color 4#00FFFF

Color 5#FFFF00

Accessibility

Contrast checker

1.3:1Fail

5.4:1AA

13.5:1AAA

15.7:1AAA

1.3:1Fail

4:1AA18

10.1:1AAA

11.8:1AAA

5.4:1AA

4:1AA18

2.5:1Fail

2.9:1Fail