Palette

Concrete Jungle Haze

A cool, muted take on the urban landscape, blending concrete grays with the hazy blues of a city skyline.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E3A4D#4D627F#7B9ABF#AEC0D8#D8E0EB

Palette guide

How to use Concrete Jungle Haze

Overview

The "Concrete Jungle Haze" palette offers a cool, muted take on the urban landscape, blending concrete grays with the hazy blues of a city skyline. Ranging from a deep #2E3A4D to a very light #D8E0EB, with versatile mid-tones like #4D627F, #7B9ABF, and #AEC0D8, this monochromatic collection is perfect for designers seeking a minimalist, modern, and serene aesthetic. It excels in creating designs that convey sophistication, calm, and an expansive feel, making it ideal for high-tech, architectural, or urban-themed projects where clarity and understated elegance are paramount.

Best used for

Modern architectural firm websites
Urban planning visualizations
Tech company branding with a serene feel
Cloud computing service interfaces
Minimalist art and photography showcases
Luxury real estate marketing

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

#2E3A4D - This darkest blue-grey ensures excellent contrast for all body text against lighter backgrounds like #D8E0EB or #AEC0D8, promoting optimal readability.

Accessibility notes

Ensure #2E3A4D text on #D8E0EB or #AEC0D8 backgrounds meets WCAG AA contrast standards.
Avoid using #D8E0EB for small text on #AEC0D8 as contrast will be insufficient.
Lighter blue-grays like #AEC0D8 should be used carefully for text on mid-tones like #7B9ABF to maintain readability.
Always check contrast ratios for interactive elements, especially if using a lighter color for a button on a similar background.

Recommended combinations

City Haze

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

#2E3A4D · #4D627F · #D8E0EB

Skyline Blend

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

#7B9ABF · #AEC0D8 · #4D627F

Muted Clarity

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

#D8E0EB · #AEC0D8 · #2E3A4D

CSS variables

:root {
  --concrete-jungle-haze-1: #2E3A4D;
  --concrete-jungle-haze-2: #4D627F;
  --concrete-jungle-haze-3: #7B9ABF;
  --concrete-jungle-haze-4: #AEC0D8;
  --concrete-jungle-haze-5: #D8E0EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "concrete-jungle-haze": {
        1: "#2E3A4D",
        2: "#4D627F",
        3: "#7B9ABF",
        4: "#AEC0D8",
        5: "#D8E0EB",
      }
    }
  }
}

Hex values

Color 1#2E3A4D

Color 2#4D627F

Color 3#7B9ABF

Color 4#AEC0D8

Color 5#D8E0EB

Accessibility

Contrast checker

1.8:1Fail

3.9:1AA18

6.2:1AA

8.6:1AAA

1.8:1Fail

2.1:1Fail

3.4:1AA18

4.7:1AA

3.9:1AA18

2.1:1Fail

1.6:1Fail

2.2:1Fail

6.2:1AA

3.4:1AA18

1.6:1Fail

1.4:1Fail

8.6:1AAA

4.7:1AA

2.2:1Fail

1.4:1Fail

Similar palettes

More like Concrete Jungle Haze

View all monochrome

Concrete Bloom Grey

Pavement Abstract Greys