Palette

Urban Art Canvas

A dynamic and rebellious blend of electrifying brights and dark contrasts, capturing the raw energy of urban street art.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Art Canvas 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 Art Canvas.

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

Data visualization

#FF1493#39FF14#FFFF00#00FFFF#2A2A2A

Palette guide

How to use Urban Art Canvas

Overview

The Urban Art Canvas palette blends electrifying brights with a grounding dark neutral, capturing the dynamic energy of street art. Featuring a striking hot pink #FF1493, an intense lime green #39FF14, a radiant yellow #FFFF00, and a vivid cyan #00FFFF, this collection is balanced by the deep charcoal #2A2A2A. This contrast allows for incredibly bold statements, making it perfect for designers creating impactful visual experiences. It’s ideal for projects that require a rebellious yet sophisticated edge, where vibrant hues can truly pop against a strong, dark foundation, evoking a modern urban aesthetic.

Best used for

modern brand identities
streetwear design
event posters
digital product launches
music album art
interactive web experiences

Suggested color roles

primary

Utilize #FF1493 for main branding elements or focal points, offering a bold and energetic presence.

secondary

Employ #39FF14 for supporting graphics or interactive states, providing a lively contrast.

accent

Reserve #FFFF00 or #00FFFF for highlights, warnings, or small, impactful details to draw attention.

background

The deep #2A2A2A serves as an excellent, sophisticated base, allowing brighter colors to truly radiate.

text

Use crisp white or a light grey against #2A2A2A. For text over brights, #2A2A2A or black works best.

Accessibility notes

Ensure high contrast when placing bright colors like #FFFF00 on light backgrounds or vice-versa.
Utilize #2A2A2A for text against the vibrant hues to maintain readability.
Avoid using #FFFF00 for small text unless on a very dark background due to its inherent lightness.
Provide sufficient spacing between vibrant elements to prevent visual clutter and improve legibility.

Recommended combinations

Bold Statement

For strong branding, headers, or call-to-action sections where impact is key.

#FF1493 · #2A2A2A · #39FF14

Dynamic Duo

Excellent for dual-tone graphics, icons, or highlighting contrasting information.

#FFFF00 · #00FFFF · #39FF14

Urban Glow

Creates a sophisticated dark theme with vibrant, glowing elements for UI or digital art.

#2A2A2A · #FF1493 · #FFFF00

CSS variables

:root {
  --urban-art-canvas-1: #FF1493;
  --urban-art-canvas-2: #39FF14;
  --urban-art-canvas-3: #FFFF00;
  --urban-art-canvas-4: #00FFFF;
  --urban-art-canvas-5: #2A2A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-art-canvas": {
        1: "#FF1493",
        2: "#39FF14",
        3: "#FFFF00",
        4: "#00FFFF",
        5: "#2A2A2A",
      }
    }
  }
}

Hex values

Color 1#FF1493

Color 2#39FF14

Color 3#FFFF00

Color 4#00FFFF

Color 5#2A2A2A

Accessibility

Contrast checker

2.7:1Fail

3.4:1AA18

2.9:1Fail

3.9:1AA18

2.7:1Fail

1.3:1Fail

1.1:1Fail

10.6:1AAA

3.4:1AA18

1.3:1Fail

1.2:1Fail

13.4:1AAA

2.9:1Fail

1.1:1Fail

1.2:1Fail

11.4:1AAA

3.9:1AA18

10.6:1AAA

13.4:1AAA

11.4:1AAA

Similar palettes

More like Urban Art Canvas