Palette

Concrete Jungle Bloom

Reflects the cool, strong tones of urban architecture with soft sky accents, perfect for cityscapes.

neutralminimal5 colors

More neutral 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

#4F4F4F#8B8B8B#B0C4DE#E6E6FA#F0F8FF

Palette guide

How to use Concrete Jungle Bloom

Overview

The "Concrete Jungle Bloom" palette captures the cool, robust tones of urban architecture, softened by gentle sky accents. Ranging from a deep charcoal #4F4F4F to light, almost ethereal blues like #E6E6FA and #F0F8FF, with versatile grays like #8B8B8B, this collection is perfect for designers aiming for a minimalist yet serene cityscape aesthetic. It offers a unique blend of industrial strength and airy lightness, ideal for projects that require a modern, sophisticated, and calming visual identity. The subtle blues introduce a refreshing breath into the otherwise strong neutral foundation.

Best used for

Modern architectural firm websites
Urban real estate branding
Minimalist tech interfaces
City travel guides or apps
High-end automotive design
Contemporary art exhibits

Suggested color roles

primary

#4F4F4F - A strong, dark charcoal that provides a solid, grounding foundation for primary content and branding elements.

secondary

#8B8B8B - A versatile medium grey, excellent for supporting information, subtle backgrounds, or secondary UI elements, offering a clean look.

accent

#B0C4DE - A soft, muted blue that introduces a gentle sky accent, perfect for subtle highlights, interactive elements, or decorative details.

background

#F0F8FF - The lightest, airy blue, creating an expansive, serene backdrop that enhances readability and a sense of openness.

text

#4F4F4F - This deep charcoal ensures optimal contrast and readability for all body text against lighter backgrounds like #F0F8FF or #E6E6FA.

Accessibility notes

Ensure #4F4F4F text on #F0F8FF or #E6E6FA backgrounds meets WCAG AA contrast standards.
Avoid using #E6E6FA for small text on #B0C4DE as contrast will be low.
Lighter blues like #B0C4DE and #E6E6FA should be used with care for text on similar light backgrounds.
For interactive elements, ensure a strong visual distinction, possibly using #4F4F4F for text on lighter blue buttons.

Recommended combinations

Cityscape Depth

Creates a strong, grounded aesthetic with an airy feel, ideal for headers or hero sections.

#4F4F4F · #8B8B8B · #F0F8FF

Sky Accent

Provides a refreshing, soft blue accent against dark text, perfect for subtle branding or decorative elements.

#B0C4DE · #E6E6FA · #4F4F4F

Minimal Contrast

Delivers a soft, understated look for secondary content blocks or serene backgrounds.

#8B8B8B · #B0C4DE · #F0F8FF

CSS variables

:root {
  --concrete-jungle-bloom-4-1: #4F4F4F;
  --concrete-jungle-bloom-4-2: #8B8B8B;
  --concrete-jungle-bloom-4-3: #B0C4DE;
  --concrete-jungle-bloom-4-4: #E6E6FA;
  --concrete-jungle-bloom-4-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "concrete-jungle-bloom-4": {
        1: "#4F4F4F",
        2: "#8B8B8B",
        3: "#B0C4DE",
        4: "#E6E6FA",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#8B8B8B

Color 3#B0C4DE

Color 4#E6E6FA

Color 5#F0F8FF

Accessibility

Contrast checker

2.4:1Fail

4.6:1AA

6.7:1AA

7.6:1AAA

2.4:1Fail

1.9:1Fail

2.8:1Fail

3.2:1AA18

4.6:1AA

1.9:1Fail

1.4:1Fail

1.7:1Fail

6.7:1AA

2.8:1Fail

1.4:1Fail

1.1:1Fail

7.6:1AAA

3.2:1AA18

1.7:1Fail

1.1:1Fail

Similar palettes

More like Concrete Jungle Bloom

Industrial Loft Concrete