Palette

City Canvas Pop

Explosive and bold colors inspired by dynamic street art and vibrant city energy.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Canvas Pop 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 Canvas Pop.

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

Data visualization

#FF3F3F#FF8C00#FFD700#00FF00#00BFFF

Palette guide

How to use City Canvas Pop

Overview

The City Canvas Pop palette is an explosive and bold collection of primary and secondary colors, directly inspired by vibrant street art and dynamic urban energy. Featuring intense hues like the fiery red #FF3F3F, the striking orange #FF8C00, the brilliant yellow #FFD700, the electric green #00FF00, and the vivid blue #00BFFF, this palette is designed for maximum visual impact. It's an excellent choice for designers aiming to create energetic, playful, or rebellious aesthetics. This palette communicates creativity, youthfulness, and a strong sense of individuality, making it perfect for projects that demand to stand out.

Best used for

Youth-oriented fashion brands
Streetwear e-commerce sites
Music festival branding and posters
Creative agency websites
Gaming interfaces and marketing
Art and design portfolios with a modern edge

Suggested color roles

primary

Use #FF3F3F as a powerful primary for calls-to-action or key focal points, demanding immediate attention.

secondary

Employ #00BFFF or #00FF00 for secondary headers or graphical elements, adding a cool contrast to the warm primaries.

accent

Reserve #FFD700 for vibrant accents, highlights, or interactive elements, ensuring they pop against any background.

background

A neutral background like a light grey or white is recommended to allow these intense colors to truly shine without competing.

text

For text, a stark black or deep charcoal will provide the necessary contrast against these bright, saturated colors. White text works well on the darker primary/secondary colors.

Accessibility notes

Many combinations within this vibrant palette will have low contrast; careful testing is crucial for text readability.
Avoid placing similarly bright colors next to each other for text or critical information (e.g., #FFD700 text on #00FF00 background).
Always use a dark text (e.g., black) on #FFD700, #00FF00, and #00BFFF to meet WCAG AA contrast standards.
Prioritize high contrast for interactive elements and essential information, possibly using white text on the darkest options.

Recommended combinations

Street Bold

Creates a high-contrast, energetic visual, perfect for headlines, banners, or striking graphical elements.

#FF3F3F · #00BFFF · #FFD700

Graffiti Flow

Ideal for dynamic patterns, illustrations, or elements that require a playful yet impactful color transition.

#FF8C00 · #00FF00 · #FF3F3F

Neon Beat

Offers a bright, almost neon aesthetic, suitable for digital interfaces, event promotion, or youth-focused marketing.

#00BFFF · #FFD700 · #FF8C00

CSS variables

:root {
  --city-canvas-pop-1: #FF3F3F;
  --city-canvas-pop-2: #FF8C00;
  --city-canvas-pop-3: #FFD700;
  --city-canvas-pop-4: #00FF00;
  --city-canvas-pop-5: #00BFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-canvas-pop": {
        1: "#FF3F3F",
        2: "#FF8C00",
        3: "#FFD700",
        4: "#00FF00",
        5: "#00BFFF",
      }
    }
  }
}

Hex values

Color 1#FF3F3F

Color 2#FF8C00

Color 3#FFD700

Color 4#00FF00

Color 5#00BFFF

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

1.6:1Fail

1.5:1Fail

1.7:1Fail

1.1:1Fail

2.5:1Fail

1.7:1Fail

1:1Fail

1.5:1Fail

2.5:1Fail

1.7:1Fail

1:1Fail

1.5:1Fail

1.6:1Fail

1.1:1Fail

1.5:1Fail

Similar palettes

More like City Canvas Pop

City Canvas Pop

See it in context.

Ready when you are.

Built with City Canvas Pop.

How to use City Canvas Pop

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Street Bold

Graffiti Flow

Neon Beat

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like City Canvas Pop