Palette

Urban Grime Blues

A gritty yet sophisticated blend of muted blues and grays, mirroring the textures of a concrete city.

neutraldark5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Grime Blues 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 Grime Blues.

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

Data visualization

#3D4A5C#606D7C#8A9BA8#B5C2CD#DDE7EF

Palette guide

How to use Urban Grime Blues

Overview

The Urban Grime Blues palette offers a gritty yet sophisticated blend of muted blues and grays, mirroring the textures of a concrete city. This neutral collection features deep blue-grey #3D4A5C, versatile #606D7C, balanced #8A9BA8, lighter #B5C2CD, and the very light #DDE7EF. Designers and developers will find this palette excellent for creating a grounded, modern, and subtly industrial aesthetic. The cool, desaturated tones provide a sense of calm and professionalism, while the range offers ample contrast for clear visual hierarchy and a refined finish, perfect for projects seeking understated elegance with a touch of urban realism.

Best used for

Modern corporate branding
Architectural visualization and portfolios
Tech industry websites
Minimalist app interfaces with a cool tone
Urban photography and art platforms
Environmental or sustainability reports

Suggested color roles

primary

#3D4A5C - A deep, muted blue-grey that serves as a strong, foundational color for headers, main calls to action, or dominant structural elements.

secondary

#606D7C - A versatile medium blue-grey, ideal for subheadings, navigation, or secondary content areas, providing a harmonious and cool contrast.

accent

#DDE7EF - A very light, almost white, cool blue-grey, perfect for subtle highlights, interactive states (hover/active), or delicate separators, adding crispness.

background

#B5C2CD - A light, cool blue-grey, providing a serene and professional canvas for content, ensuring good readability for darker text.

text

#3D4A5C - The deep blue-grey offers excellent legibility and a sophisticated tone for body text, especially against lighter backgrounds like #DDE7EF or #B5C2CD.

Accessibility notes

Ensure #3D4A5C text on #DDE7EF or #B5C2CD backgrounds meets WCAG AA contrast standards for readability.
Avoid using #8A9BA8 text on #B5C2CD backgrounds for critical information due to potentially low contrast.
Use #DDE7EF for text only against very dark backgrounds such as #3D4A5C or #606D7C to maintain legibility.
Verify that interactive elements have clear focus states beyond color, especially with subtle tonal variations.

Recommended combinations

Urban Contrast

Ideal for a clean, professional look, using dark blue-grey text on a light background, with a mid-tone for secondary elements.

#3D4A5C · #DDE7EF · #8A9BA8

Concrete Layers

Creates a layered, cool-toned effect suitable for dashboards or complex interfaces, using harmonious blue-greys to define sections.

#B5C2CD · #606D7C · #8A9BA8

Muted Professional

Excellent for a sharp, contemporary aesthetic, using the light blue-grey as a canvas, deep blue-grey for headings, and a mid-tone for body text.

#DDE7EF · #3D4A5C · #606D7C

CSS variables

:root {
  --urban-grime-blues-1: #3D4A5C;
  --urban-grime-blues-2: #606D7C;
  --urban-grime-blues-3: #8A9BA8;
  --urban-grime-blues-4: #B5C2CD;
  --urban-grime-blues-5: #DDE7EF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grime-blues": {
        1: "#3D4A5C",
        2: "#606D7C",
        3: "#8A9BA8",
        4: "#B5C2CD",
        5: "#DDE7EF",
      }
    }
  }
}

Hex values

Color 1#3D4A5C

Color 2#606D7C

Color 3#8A9BA8

Color 4#B5C2CD

Color 5#DDE7EF

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

5:1AA

7.2:1AAA

1.7:1Fail

1.8:1Fail

2.9:1Fail

4.2:1AA18

3.1:1AA18

1.8:1Fail

1.6:1Fail

2.3:1Fail

5:1AA

2.9:1Fail

1.6:1Fail

1.4:1Fail

7.2:1AAA

4.2:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Urban Grime Blues

View all neutral

Urban Alley Grit

Urban Canyon Rust

Urban Rain Reflection

Volcanic Ash Bloom

Gargoyle Grey

Gritty Urban Canvas