Palette

Urban Concrete Bloom

Industrial grays meet subtle greens, reflecting urban resilience and the surprising natural beauty found in cityscapes.

neutralminimal5 colors

More neutral 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#545B62#7A8086#C0C0C0#A5D6A7

Palette guide

How to use Urban Concrete Bloom

Overview

The Urban Concrete Bloom palette offers a sophisticated blend of industrial grays and a surprising touch of nature's resilience, ideal for designs that evoke modern cityscapes. Featuring a deep charcoal `#36454F`, a balanced medium gray `#545B62`, and a lighter concrete hue `#7A8086`, it provides a solid neutral foundation. The soft, natural green `#A5D6A7` serves as a subtle accent, reminiscent of urban flora, while a bright silver `#C0C0C0` adds a clean, reflective quality. This palette is perfect for projects seeking a contemporary, grounded yet subtly vibrant aesthetic, balancing strength with organic softness.

Best used for

Modern architectural visualizations
Sustainable urban development branding
Eco-conscious product packaging
Contemporary art gallery websites
Minimalist interior design concepts
Tech interfaces with a natural touch

Suggested color roles

primary

Use `#36454F` as a foundational dark element for headers, primary buttons, or strong graphic elements to ground the design.

secondary

Apply `#545B62` for body text, secondary navigation, or larger content blocks, providing a softer contrast than the primary.

accent

Introduce `#A5D6A7` for calls-to-action, icons, or subtle highlights, bringing a refreshing 'bloom' to the concrete base.

background

Utilize `#C0C0C0` for clean, expansive backgrounds, allowing other colors to stand out while maintaining a light, airy feel.

text

For dark text on light backgrounds, `#36454F` offers excellent readability. For lighter text on darker backgrounds, a crisp white or near-white is recommended.

Accessibility notes

Ensure sufficient contrast between `#36454F` text and `#C0C0C0` background for optimal readability.
Verify that `#A5D6A7` used as text or interactive elements meets WCAG contrast standards against its background.
Avoid using `#C0C0C0` and `#7A8086` for adjacent, small text elements without testing their distinction.
When placing `#A5D6A7` on `#545B62`, check contrast carefully as it might be subtle for some users.

Recommended combinations

Urban Foundation

Ideal for strong branding elements, website footers, or hero sections, providing depth with a vibrant accent.

#36454F · #545B62 · #A5D6A7

Concrete Bloom UI

Excellent for user interfaces where a light background is desired, with clear hierarchy and a refreshing call-to-action.

#C0C0C0 · #7A8086 · #A5D6A7

Subtle Resilience

Perfect for print collateral or presentations, offering a sophisticated balance of dark grounding, light space, and organic pop.

#36454F · #C0C0C0 · #A5D6A7

CSS variables

:root {
  --urban-concrete-bloom-2-1: #36454F;
  --urban-concrete-bloom-2-2: #545B62;
  --urban-concrete-bloom-2-3: #7A8086;
  --urban-concrete-bloom-2-4: #C0C0C0;
  --urban-concrete-bloom-2-5: #A5D6A7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-bloom-2": {
        1: "#36454F",
        2: "#545B62",
        3: "#7A8086",
        4: "#C0C0C0",
        5: "#A5D6A7",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#545B62

Color 3#7A8086

Color 4#C0C0C0

Color 5#A5D6A7

Accessibility

Contrast checker

1.4:1Fail

2.5:1Fail

5.4:1AA

6:1AA

1.4:1Fail

1.7:1Fail

3.8:1AA18

4.2:1AA18

2.5:1Fail

1.7:1Fail

2.2:1Fail

2.4:1Fail

5.4:1AA

3.8:1AA18

2.2:1Fail

1.1:1Fail

6:1AA

4.2:1AA18

2.4:1Fail

1.1:1Fail

Similar palettes

More like Urban Concrete Bloom

Industrial Urban Grit

Metro Grid Serene