Back to palettes

Palette

Urban Concrete Bloom

A cool, sophisticated blend of city greys with a subtle hint of blossoming light, reflecting metropolitan calm.

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

#3A4047#5D6873#93A5B5#BBC8D9#F0F3F7

Palette guide

How to use Urban Concrete Bloom

Overview

The Urban Concrete Bloom palette presents a cool, sophisticated blend of city grays with a subtle hint of blossoming light, embodying metropolitan calm. This palette is designed for elegance and clarity, moving from a deep, anchoring charcoal to airy, almost-white tones. Key colors include the robust `#3A4047`, a balanced medium gray `#5D6873`, and a lighter, gentle blue-gray `#93A5B5`. The progression continues with a very light blue-gray `#BBC8D9` and a pristine near-white `#F0F3F7`, creating an expansive and clean aesthetic. It's a versatile choice for modern designs that require a refined and understated presence.

Best used for

  • Corporate branding and websites
  • Luxury real estate marketing
  • Minimalist app design
  • High-end editorial layouts
  • Professional services collateral
  • Modern architectural portfolios

Suggested color roles

primary

Use `#3A4047` for commanding headlines, primary navigation, or as a strong, grounding footer color.

secondary

Apply `#5D6873` for body text, secondary call-to-actions, or large background sections that need a softer presence than the primary.

accent

Introduce `#BBC8D9` as a subtle accent for hover states, light dividers, or background elements that add a touch of luminosity.

background

Utilize `#F0F3F7` for clean, expansive backgrounds, providing an airy canvas that enhances readability and sophistication.

text

For dark text on light backgrounds, `#3A4047` provides excellent contrast and a professional feel. For lighter text on darker elements, a crisp white is ideal.

Accessibility notes

  • Ensure `#3A4047` text on `#F0F3F7` background meets WCAG contrast requirements for body text.
  • Verify that `#5D6873` text on `#F0F3F7` also has sufficient contrast for readability.
  • Avoid using `#BBC8D9` or `#93A5B5` for small text elements against very light backgrounds due to potential low contrast.
  • When using multiple light grays, ensure enough visual distinction between them for users with low vision.

Recommended combinations

Metropolitan Core

Ideal for a professional website's main structure, offering strong text, supporting elements, and a clean background.

#3A4047 · #5D6873 · #F0F3F7

Subtle Bloom

Excellent for backgrounds, layered graphics, or subtle visual interest where a gentle, airy progression of light grays is desired.

#F0F3F7 · #93A5B5 · #BBC8D9

Corporate Elegance

Perfect for headings and accent details against a darker background, conveying sophistication and clear information hierarchy.

#3A4047 · #BBC8D9 · #5D6873

CSS variables

:root {
  --urban-concrete-bloom-1: #3A4047;
  --urban-concrete-bloom-2: #5D6873;
  --urban-concrete-bloom-3: #93A5B5;
  --urban-concrete-bloom-4: #BBC8D9;
  --urban-concrete-bloom-5: #F0F3F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-bloom": {
        1: "#3A4047",
        2: "#5D6873",
        3: "#93A5B5",
        4: "#BBC8D9",
        5: "#F0F3F7",
      }
    }
  }
}

Related searches

sophisticated grey palettemetropolitan calm colorscool urban designminimalist corporatelight blue grey scheme

Palette colors

Hex values

Color 1#3A4047
·
Color 2#5D6873
·
Color 3#93A5B5
·
Color 4#BBC8D9
·
Color 5#F0F3F7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
4.1:1AA18
6.2:1AA
9.4:1AAA
2
1.8:1Fail
2.2:1Fail
3.4:1AA18
5.1:1AA
3
4.1:1AA18
2.2:1Fail
1.5:1Fail
2.3:1Fail
4
6.2:1AA
3.4:1AA18
1.5:1Fail
1.5:1Fail
5
9.4:1AAA
5.1:1AA
2.3:1Fail
1.5:1Fail

Similar palettes

More like Urban Concrete Bloom

View all neutral
Concrete Jungle Bloom
Concrete Garden Grey
Concrete Grid Lines
Concrete Loft Living
Industrial Chic Loft
Industrial Loft Concrete