Back to palettes

Palette

Urban Chroma

Bold, contrasting colors burst forth, inspired by vivid street art and the energetic pulse of city life.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E84A5F#FF8C42#FFC700#3E4C6C#1E2B4B

Palette guide

How to use Urban Chroma

Overview

The "Urban Chroma" palette bursts with bold, contrasting colors inspired by vivid street art and the energetic pulse of city life. Featuring the passionate #E84A5F (Coral Red), the lively #FF8C42 (Orange Peel), and the radiant #FFC700 (Golden Yellow), this palette is grounded by the deep, sophisticated #3E4C6C (Dark Steel Blue) and #1E2B4B (Midnight Blue). This dynamic combination allows for designs that are both vibrant and grounded, perfect for conveying a sense of modern urban dynamism, creativity, and impactful presence. It's an excellent choice for brands that want to communicate energy without sacrificing a professional edge.

Best used for

  • Creative agencies and design studios
  • Youth-oriented lifestyle and fashion brands
  • Digital marketing and tech startups
  • Event promotion and entertainment media
  • Sports and active lifestyle branding
  • Apparel and merchandise design

Suggested color roles

primary

#1E2B4B (Midnight Blue) - A deep, grounding color for main structural elements, headers, and footers, providing stability to the vibrant accents.

secondary

#3E4C6C (Dark Steel Blue) - Excellent for subheadings, navigation, or larger content blocks, offering a sophisticated counterpoint to the brights.

accent

#E84A5F (Coral Red) - A powerful, attention-grabbing accent for call-to-action buttons, key highlights, or interactive elements.

background

#FFC700 (Golden Yellow) - A bright, energetic background that makes darker text pop and infuses the design with warmth and vibrancy.

text

#1E2B4B (Midnight Blue) for dark text on lighter backgrounds like #FFC700, or a crisp white like #FFFFFF for text on #1E2B4B or #3E4C6C.

Accessibility notes

  • Ensure strong contrast when using #E84A5F or #FF8C42 for text on #FFC700.
  • Prioritize #1E2B4B for critical text on lighter backgrounds like #FFC700 for optimal readability.
  • Avoid placing #FF8C42 text directly on #E84A5F or similar vibrant combinations without checking contrast.
  • Use the darker blues for body text to ensure legibility when paired with the bright accents.

Recommended combinations

Street Art Pop

Creates a bold, dynamic contrast for hero sections or key branding elements, combining depth with vibrant energy.

#1E2B4B · #E84A5F · #FFC700

Urban Energy

Ideal for banners, infographics, or interactive cards, balancing cool stability with warm, inviting tones.

#3E4C6C · #FF8C42 · #FFC700

Dynamic Focus

Use for call-to-action buttons or important alerts, ensuring maximum visual impact against a dark background.

#1E2B4B · #E84A5F · #FF8C42

CSS variables

:root {
  --urban-chroma-1: #E84A5F;
  --urban-chroma-2: #FF8C42;
  --urban-chroma-3: #FFC700;
  --urban-chroma-4: #3E4C6C;
  --urban-chroma-5: #1E2B4B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-chroma": {
        1: "#E84A5F",
        2: "#FF8C42",
        3: "#FFC700",
        4: "#3E4C6C",
        5: "#1E2B4B",
      }
    }
  }
}

Related searches

vibrant urban color schemebold city colorsstreet art inspired paletteenergetic branding colorsmodern contrasting palette

Palette colors

Hex values

Color 1#E84A5F
·
Color 2#FF8C42
·
Color 3#FFC700
·
Color 4#3E4C6C
·
Color 5#1E2B4B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
2.3:1Fail
3.7:1AA18
2
1.6:1Fail
1.5:1Fail
3.7:1AA18
6:1AA
3
2.4:1Fail
1.5:1Fail
5.5:1AA
8.9:1AAA
4
2.3:1Fail
3.7:1AA18
5.5:1AA
1.6:1Fail
5
3.7:1AA18
6:1AA
8.9:1AAA
1.6:1Fail

Similar palettes

More like Urban Chroma

View all vibrant
Urban Alley Graffiti
Urban Street Art
Abstract Expression Burst
Abstract Expression Hues
Alley Canvas Pulse
Bauhaus Primary Forms