Palette

Urban Concrete Bloom

Stark concrete greys receive a jolt of vibrant, almost artificial green and yellow, like street art on a wall.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5D6D7E#85929E#CCFF33#FFFF99

Palette guide

How to use Urban Concrete Bloom

Overview

The Urban Concrete Bloom palette (version 4) injects a jolt of vibrant energy into stark concrete grays, creating a dynamic and edgy aesthetic. This palette is reminiscent of street art on a city wall, where industrial textures meet electrifying pops of color. It features a deep charcoal `#36454F`, a cool medium gray `#5D6D7E`, and a lighter, versatile grey `#85929E`. The true stars are the intense, almost artificial lime green `#CCFF33` and a bright, sunny yellow `#FFFF99`, which provide striking contrast and an energetic, modern vibe. This palette is perfect for designs that aim to be bold, youthful, and contemporary.

Best used for

Youthful tech or gaming branding
Edgy marketing campaigns
Streetwear fashion labels
Energetic event promotion materials
Creative agency websites
Dynamic app interfaces

Suggested color roles

primary

Use `#36454F` as a strong, grounding dark base for large areas, robust typography, or to provide dramatic contrast.

secondary

Apply `#5D6D7E` for supporting sections, subheadings, or as a background for lighter content, offering depth without being overwhelming.

accent

Deploy `#CCFF33` for high-impact calls-to-action, critical alerts, or graphic elements that demand immediate attention.

background

Utilize `#85929E` for a neutral yet cool background, allowing the vibrant accents to truly pop and command focus.

text

For dark text on light backgrounds, `#36454F` offers excellent legibility. For vibrant textual accents, `#CCFF33` or `#FFFF99` can be used carefully, ensuring contrast.

Accessibility notes

Ensure `#CCFF33` and `#FFFF99` have sufficient contrast against any background they are placed upon, especially for text.
Avoid using `#FFFF99` for body text, as its low contrast can hinder readability for many users.
Test the contrast of `#36454F` text on `#85929E` to ensure it meets WCAG standards for body copy.
Be mindful of colorblind users when using `#CCFF33` as a sole indicator for action, consider adding secondary cues.

Recommended combinations

Vibrant Statement

Ideal for bold headlines, impactful hero sections, or branding where a strong, energetic contrast is key.

#36454F · #CCFF33 · #85929E

Dynamic UI

Excellent for user interfaces, providing a clear visual hierarchy with a vibrant accent for interactive elements.

#85929E · #5D6D7E · #CCFF33

Street Art Glow

Perfect for graphic elements, social media visuals, or backgrounds where a dark base highlights a bright, almost neon glow.

#36454F · #FFFF99 · #5D6D7E

CSS variables

:root {
  --urban-concrete-bloom-4-1: #36454F;
  --urban-concrete-bloom-4-2: #5D6D7E;
  --urban-concrete-bloom-4-3: #85929E;
  --urban-concrete-bloom-4-4: #CCFF33;
  --urban-concrete-bloom-4-5: #FFFF99;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-bloom-4": {
        1: "#36454F",
        2: "#5D6D7E",
        3: "#85929E",
        4: "#CCFF33",
        5: "#FFFF99",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5D6D7E

Color 3#85929E

Color 4#CCFF33

Color 5#FFFF99

Accessibility

Contrast checker

1.9:1Fail

3.1:1AA18

8.4:1AAA

9.4:1AAA

1.9:1Fail

1.7:1Fail

4.5:1AA

5.1:1AA

3.1:1AA18

1.7:1Fail

2.7:1Fail

3:1AA18

8.4:1AAA

4.5:1AA

2.7:1Fail

1.1:1Fail

9.4:1AAA

5.1:1AA

3:1AA18

1.1:1Fail

Similar palettes

More like Urban Concrete Bloom

Abstract Expression Burst

Abstract Expression Hues