Palette

Urban Bloom Concrete

A sophisticated range of grays with a subtle warmth, reflecting city textures and modern design.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7B7D7D#A0A3A2#B9BDBB#E2DFD2#5D636B

Palette guide

How to use Urban Bloom Concrete

Overview

The Urban Bloom Concrete palette offers a sophisticated range of neutral grays with a subtle, earthy warmth, reminiscent of weathered concrete and natural urban textures. From the deeper #5D636B to the bright, almost off-white #E2DFD2, this collection provides a versatile foundation for elegant and modern designs. Designers can create depth and visual interest using the mid-tones #7B7D7D, #A0A3A2, and #B9BDBB, which have a gentle, organic feel. This palette is perfect for projects seeking a refined, understated, and timeless aesthetic, providing a calm backdrop that allows content to shine without being stark.

Best used for

eco-friendly branding
interior design concepts
sustainable product packaging
clean web interfaces
architectural firms
art gallery websites

Suggested color roles

primary

#5D636B makes an excellent primary color for its grounding and sophisticated presence, ideal for headings or prominent UI.

secondary

#7B7D7D serves as a versatile secondary, perfect for subheadings, borders, or subtle background elements.

accent

Use #E2DFD2 as a bright, warm accent for highlights, or to add a touch of luminosity.

background

#E2DFD2 provides a clean, inviting canvas, while #B9BDBB offers a slightly deeper, soft base.

text

#5D636B or #7B7D7D against #E2DFD2 or #B9BDBB for optimal readability. Conversely, white text on #5D636B.

Accessibility notes

Ensure sufficient contrast between lighter shades like #B9BDBB and #E2DFD2 for text and background pairings.
Use darker grays like #5D636B for primary text to enhance legibility.
Avoid using adjacent mid-tones (e.g., #A0A3A2 text on #B9BDBB background) for critical information.
Always check contrast ratios with accessibility tools to meet WCAG guidelines for readability.

Recommended combinations

Warm Neutral Base

For creating a welcoming, modern background with clear, readable text and subtle depth.

#E2DFD2 · #5D636B · #7B7D7D

Textured Layers

Ideal for UI elements, layered graphics, or subtle gradients to add sophistication.

#7B7D7D · #A0A3A2 · #B9BDBB

Clean Contrast

A timeless pairing for body text and background, ensuring clarity and an elegant feel.

#5D636B · #E2DFD2 · #B9BDBB

CSS variables

:root {
  --urban-bloom-concrete-1: #7B7D7D;
  --urban-bloom-concrete-2: #A0A3A2;
  --urban-bloom-concrete-3: #B9BDBB;
  --urban-bloom-concrete-4: #E2DFD2;
  --urban-bloom-concrete-5: #5D636B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-bloom-concrete": {
        1: "#7B7D7D",
        2: "#A0A3A2",
        3: "#B9BDBB",
        4: "#E2DFD2",
        5: "#5D636B",
      }
    }
  }
}

Hex values

Color 1#7B7D7D

Color 2#A0A3A2

Color 3#B9BDBB

Color 4#E2DFD2

Color 5#5D636B

Accessibility

Contrast checker

1.6:1Fail

2.2:1Fail

3.1:1AA18

1.5:1Fail

1.6:1Fail

1.3:1Fail

1.9:1Fail

2.4:1Fail

2.2:1Fail

1.3:1Fail

1.4:1Fail

3.2:1AA18

3.1:1AA18

1.9:1Fail

1.4:1Fail

4.5:1AA

1.5:1Fail

2.4:1Fail

3.2:1AA18

4.5:1AA

Similar palettes

More like Urban Bloom Concrete

View all neutral

City Concrete Grind

Industrial Urban Grit

Urban Echo Canvas

Bare Concrete Stillness

Brutalist Bloom Grey

Concrete Canyon Dusk