Back to palettes

Palette

Urban Concrete Bloom

Blends cool concrete grays with soft greens, representing nature's resilience in an urban landscape.

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

#7F8C8D#BCC4C5#E1E8E9#6A8E6A#B2D1B2

Palette guide

How to use Urban Concrete Bloom

Overview

The Urban Concrete Bloom palette (version 3) is a serene exploration of nature's resilience within an urban context, featuring a range of cool grays and soft, muted greens. It balances the robustness of city materials with organic growth, offering a calming and sophisticated feel. Key colors include the grounding medium gray `#7F8C8D`, a lighter concrete shade `#BCC4C5`, and an airy near-white `#E1E8E9`. The soft, muted green `#6A8E6A` and its lighter counterpart `#B2D1B2` introduce a gentle, natural accent. This palette is perfect for designs aiming for a gentle, modern, and eco-conscious aesthetic.

Best used for

  • Eco-friendly branding and packaging
  • Health and wellness applications
  • Nature-inspired web designs
  • Sustainable product marketing
  • Minimalist interior decor concepts
  • Environmental non-profit materials

Suggested color roles

primary

Use `#7F8C8D` as a stable, grounding color for headers, main navigation, or important textual elements.

secondary

Apply `#BCC4C5` for supporting text, subheadings, or background elements that require a lighter, complementary tone.

accent

Introduce `#6A8E6A` for calls-to-action, icons, or decorative elements where a natural, muted pop is desired.

background

Utilize `#E1E8E9` for expansive, clean backgrounds, providing an airy and fresh canvas that highlights other colors.

text

For optimal readability on light backgrounds, use `#7F8C8D` or a dark charcoal. For light text on darker elements, a crisp white works well.

Accessibility notes

  • Ensure sufficient contrast when using `#BCC4C5` or `#7F8C8D` for body text on the very light `#E1E8E9` background.
  • Verify that accent colors like `#6A8E6A` meet WCAG contrast guidelines if used for interactive elements or important information.
  • Avoid placing `#BCC4C5` text directly on `#E1E8E9` background without checking contrast for readability.
  • Ensure adequate distinction if using `#6A8E6A` and `#B2D1B2` in close proximity for small details.

Recommended combinations

Calm Interface

Excellent for clean web interfaces, providing clear hierarchy with a refreshing, natural accent for calls-to-action.

#E1E8E9 · #7F8C8D · #6A8E6A

Muted Branding

Ideal for sophisticated branding that conveys a sense of calm, sustainability, and understated elegance.

#7F8C8D · #BCC4C5 · #B2D1B2

Organic Flow

Perfect for backgrounds or graphic elements where a gentle gradient or layering of natural greens is desired against a light base.

#E1E8E9 · #6A8E6A · #B2D1B2

CSS variables

:root {
  --urban-concrete-bloom-3-1: #7F8C8D;
  --urban-concrete-bloom-3-2: #BCC4C5;
  --urban-concrete-bloom-3-3: #E1E8E9;
  --urban-concrete-bloom-3-4: #6A8E6A;
  --urban-concrete-bloom-3-5: #B2D1B2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-bloom-3": {
        1: "#7F8C8D",
        2: "#BCC4C5",
        3: "#E1E8E9",
        4: "#6A8E6A",
        5: "#B2D1B2",
      }
    }
  }
}

Related searches

muted urban greensoft concrete palettenature resilience colorslight grey green designcalming city tones

Palette colors

Hex values

Color 1#7F8C8D
·
Color 2#BCC4C5
·
Color 3#E1E8E9
·
Color 4#6A8E6A
·
Color 5#B2D1B2
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
2.8:1Fail
1.1:1Fail
2.1:1Fail
2
2:1Fail
1.4:1Fail
2.1:1Fail
1.1:1Fail
3
2.8:1Fail
1.4:1Fail
3:1Fail
1.3:1Fail
4
1.1:1Fail
2.1:1Fail
3:1Fail
2.2:1Fail
5
2.1:1Fail
1.1:1Fail
1.3:1Fail
2.2:1Fail

Similar palettes

More like Urban Concrete Bloom

View all neutral
Urban Concrete Bloom
Brutalist Bloom Grey
City Concrete Grind
Concrete Garden Grey
Concrete Jungle Bloom
Graffiti Alley Hue