Back to palettes

Palette

Concrete Bloom Grey

A sophisticated grayscale palette inspired by modern cityscapes and minimalist design.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2F33#5F676B#959DA1#C4CDD2#E6EBF0

Palette guide

How to use Concrete Bloom Grey

Overview

The Concrete Bloom Grey palette is a sophisticated grayscale collection inspired by modern cityscapes and minimalist design. Ranging from the deep #2B2F33 to the airy #E6EBF0, and including balanced mid-tones like #5F676B and #959DA1, this palette exudes urban elegance and calm. Designers can leverage these versatile grays to create contemporary and serene digital and physical spaces. Developers will appreciate the excellent contrast range, ensuring clear readability and harmonious UI elements across various applications, from corporate websites to architectural portfolios, with a clean and professional aesthetic.

Best used for

  • Minimalist website designs
  • Architectural portfolios and renderings
  • Corporate and professional branding
  • Urban-themed photography backdrops
  • Industrial design concepts
  • Modern art gallery websites

Suggested color roles

primary

Use #2B2F33 for dominant elements like headers, footers, or main brand colors to establish a deep, grounding presence.

secondary

Apply #5F676B or #959DA1 for subheadings, navigation, or larger content blocks, adding subtle depth and readability.

accent

Introduce #C4CDD2 or #E6EBF0 for highlights, subtle dividers, or icons to provide gentle contrast and visual interest.

background

The light #E6EBF0 offers a clean, airy backdrop. For a deeper background, #2B2F33 can be used with light text.

text

Pair a dark color like #2B2F33 or #5F676B with lighter backgrounds. For darker backgrounds, use white or near-white text.

Accessibility notes

  • Ensure sufficient contrast when using lighter shades like #C4CDD2 or #E6EBF0 for text on similar backgrounds.
  • Darker shades such as #2B2F33 or #5F676B provide excellent contrast for white or very light gray text.
  • Avoid pairing adjacent mid-tones for small text due to their proximity in value.
  • The range from dark to light allows for good contrast, but always test specific pairings for readability.

Recommended combinations

Urban Foundation

Creates a strong and sophisticated base, ideal for brand identity or modern dark mode designs.

#2B2F33 · #5F676B · #959DA1

Minimalist Flow

Perfect for backgrounds and content areas, offering a soft, natural, and harmonious feel.

#5F676B · #C4CDD2 · #E6EBF0

Subtle Depth

Use for highlights and interactive elements, providing a pleasant contrast and visual interest.

#2B2F33 · #959DA1 · #E6EBF0

CSS variables

:root {
  --concrete-bloom-grey-1: #2B2F33;
  --concrete-bloom-grey-2: #5F676B;
  --concrete-bloom-grey-3: #959DA1;
  --concrete-bloom-grey-4: #C4CDD2;
  --concrete-bloom-grey-5: #E6EBF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "concrete-bloom-grey": {
        1: "#2B2F33",
        2: "#5F676B",
        3: "#959DA1",
        4: "#C4CDD2",
        5: "#E6EBF0",
      }
    }
  }
}

Related searches

grayscale urban paletteminimalist grey schememodern concrete colorssophisticated industrialarchitectural greys

Palette colors

Hex values

Color 1#2B2F33
·
Color 2#5F676B
·
Color 3#959DA1
·
Color 4#C4CDD2
·
Color 5#E6EBF0
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
4.9:1AA
8.4:1AAA
11.2:1AAA
2
2.3:1Fail
2.1:1Fail
3.6:1AA18
4.8:1AA
3
4.9:1AA
2.1:1Fail
1.7:1Fail
2.3:1Fail
4
8.4:1AAA
3.6:1AA18
1.7:1Fail
1.3:1Fail
5
11.2:1AAA
4.8:1AA
2.3:1Fail
1.3:1Fail

Similar palettes

More like Concrete Bloom Grey

View all monochrome
Pavement Abstract Greys
City Steel Gleam
Concrete Jungle Haze
Grayscale Metropolis Grid
Industrial Chic Echo
Industrial Cityscape Grey