Palette

Concrete Jungle Bloom

Cool, stark greys embodying the raw, unadorned aesthetic of an urban concrete landscape.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3C4B4B#627575#8BA1A1#B9C8C8#DCE3E3

Palette guide

How to use Concrete Jungle Bloom

Overview

The "Concrete Jungle Bloom" palette features cool, stark grays that embody the raw, unadorned aesthetic of an urban concrete landscape. Ranging from a deep #3C4B4B to a very light #DCE3E3, with versatile mid-tones like #627575, #8BA1A1, and #B9C8C8, this monochromatic collection is perfect for designers seeking a minimalist, modern, and robust visual identity. It excels in creating designs that convey strength, sophistication, and a clean, uncluttered feel, making it ideal for high-tech, architectural, or urban-themed projects where clarity and understated elegance are paramount.

Best used for

Urban infrastructure branding
Industrial design websites
Minimalist UI/UX for applications
Corporate branding for engineering firms
Modern art gallery interfaces
High-tech product showcases

Suggested color roles

primary

#627575 - A balanced, cool grey that serves as a strong yet understated foundation for primary content and branding.

secondary

#8BA1A1 - A lighter, clean grey, ideal for supporting information, subtle backgrounds, or secondary UI elements, offering a soft presence.

accent

#3C4B4B - A deep, rich charcoal that can provide a powerful accent for calls to action, important headings, or strong graphic elements.

background

#DCE3E3 - The lightest shade, offering a crisp, expansive, and highly readable background for all content.

text

#3C4B4B - This darkest grey ensures excellent contrast for all body text against lighter backgrounds like #DCE3E3 or #B9C8C8, promoting optimal readability.

Accessibility notes

Ensure #3C4B4B text on #DCE3E3 or #B9C8C8 backgrounds meets WCAG AA contrast standards.
Avoid using #DCE3E3 for small text on #8BA1A1 as contrast will be insufficient.
Lighter grays like #B9C8C8 should be used carefully for text on mid-tones like #627575 to maintain readability.
Always check contrast ratios for interactive elements, especially if using a lighter grey for a button on a similar background.

Recommended combinations

Deep Urban

Creates a strong, high-contrast visual hierarchy, ideal for headers, footers, or impactful sections.

#3C4B4B · #627575 · #DCE3E3

Clean Balance

Provides a harmonious, soft feel for content blocks, navigation, or subtle background variations.

#8BA1A1 · #B9C8C8 · #627575

Minimal Clarity

Emphasizes a clean, airy aesthetic with dark text, suitable for body content and minimalist layouts.

#DCE3E3 · #B9C8C8 · #3C4B4B

CSS variables

:root {
  --concrete-jungle-bloom-1: #3C4B4B;
  --concrete-jungle-bloom-2: #627575;
  --concrete-jungle-bloom-3: #8BA1A1;
  --concrete-jungle-bloom-4: #B9C8C8;
  --concrete-jungle-bloom-5: #DCE3E3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "concrete-jungle-bloom": {
        1: "#3C4B4B",
        2: "#627575",
        3: "#8BA1A1",
        4: "#B9C8C8",
        5: "#DCE3E3",
      }
    }
  }
}

Hex values

Color 1#3C4B4B

Color 2#627575

Color 3#8BA1A1

Color 4#B9C8C8

Color 5#DCE3E3

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.3:1AA

7:1AAA

1.9:1Fail

1.8:1Fail

2.8:1Fail

3.7:1AA18

3.4:1AA18

1.8:1Fail

1.6:1Fail

2.1:1Fail

5.3:1AA

2.8:1Fail

1.6:1Fail

1.3:1Fail

7:1AAA

3.7:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Concrete Jungle Bloom

Grayscale Metropolis Grid

Industrial Chic Echo

Industrial Cityscape Grey