Palette

Street Art Canvas

A bold and dynamic palette inspired by the raw, expressive energy of street art murals.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF1493#00BFFF#7FFF00#2C2C2C#9E9E9E

Palette guide

How to use Street Art Canvas

Overview

The Street Art Canvas palette captures the raw, expressive energy of urban murals with a bold and dynamic selection of colors. It features the striking #FF1493 (deep pink) and the vibrant #00BFFF (deep sky blue), creating an immediate sense of modern contrast. The lively #7FFF00 (chartreuse green) adds an unexpected pop, while the grounding #2C2C2C (dark charcoal) and the versatile #9E9E9E (medium gray) provide crucial balance. This palette is ideal for designs that aim to be energetic, contemporary, and a little edgy. Designers can use these hues to craft compelling branding, engaging digital interfaces, or marketing materials for creative industries, youth brands, or any project that thrives on individuality and strong visual statements.

Best used for

Creative agency branding
Youth-oriented fashion marketing
Dynamic app UI/UX design
Music and entertainment platforms
Streetwear brand identity
Digital art and illustration

Suggested color roles

primary

Use #FF1493 for main calls-to-action, prominent headlines, or key branding elements to convey passion and vibrancy.

secondary

Apply #00BFFF for supporting graphics, navigation features, or significant content blocks, offering a cool contrast.

accent

Utilize #7FFF00 for interactive states, subtle highlights, or graphic details to introduce an energetic, unexpected pop.

background

Employ #2C2C2C for a strong, dark background that makes the vibrant colors resonate, or #9E9E9E for a softer base.

text

On dark backgrounds like #2C2C2C, use #FF1493, #00BFFF, or #7FFF00 for impactful text. For lighter elements, black or charcoal provides good readability.

Accessibility notes

Ensure high contrast when using #FF1493 or #7FFF00 for text on #2C2C2C background.
Avoid placing #9E9E9E text directly on #2C2C2C for critical information due to potential low contrast.
Test combinations like #00BFFF on #9E9E9E for sufficient contrast in smaller text sizes.
Provide clear visual cues for interactive elements, especially if using a vibrant color on a similar background.

Recommended combinations

Urban Pop

Excellent for creating high-impact visuals, bold headers, or a dark theme with striking color accents.

#FF1493 · #00BFFF · #2C2C2C

Energetic Contrast

Ideal for highlighting key information, interactive elements, or adding a fresh, modern touch against neutrals.

#7FFF00 · #2C2C2C · #9E9E9E

Dynamic Trio

Combine these three vibrant colors for abstract art, playful branding, or energetic illustrations.

#FF1493 · #7FFF00 · #00BFFF

CSS variables

:root {
  --street-art-canvas-2-1: #FF1493;
  --street-art-canvas-2-2: #00BFFF;
  --street-art-canvas-2-3: #7FFF00;
  --street-art-canvas-2-4: #2C2C2C;
  --street-art-canvas-2-5: #9E9E9E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "street-art-canvas-2": {
        1: "#FF1493",
        2: "#00BFFF",
        3: "#7FFF00",
        4: "#2C2C2C",
        5: "#9E9E9E",
      }
    }
  }
}

Hex values

Color 1#FF1493

Color 2#00BFFF

Color 3#7FFF00

Color 4#2C2C2C

Color 5#9E9E9E

Accessibility

Contrast checker

1.7:1Fail

2.8:1Fail

3.8:1AA18

1.4:1Fail

1.7:1Fail

1.6:1Fail

6.6:1AA

1.3:1Fail

2.8:1Fail

1.6:1Fail

10.8:1AAA

2.1:1Fail

3.8:1AA18

6.6:1AA

10.8:1AAA

5.2:1AA

1.4:1Fail

1.3:1Fail

2.1:1Fail

5.2:1AA

Similar palettes

More like Street Art Canvas