Palette

Urban Teal Grunge

A cool, muted palette reflecting city shadows and weathered structures with a hint of urban chic.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Teal Grunge 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 Teal Grunge.

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

Data visualization

#2F4F4F#5F9EA0#A2B5BF#708090#2C3E50

Palette guide

How to use Urban Teal Grunge

Overview

The "Urban Teal Grunge" palette offers a sophisticated, muted blend of cool teals and grays, perfect for designs requiring a modern yet slightly weathered aesthetic. Dominated by the deep slate gray of #2C3E50 and the dark teal of #2F4F4F, it evokes urban shadows and concrete textures. The palette lightens with a muted cadet blue #5F9EA0 and a soft slate gray #708090, culminating in the airy light blue-gray #A2B5BF. This scheme is ideal for projects aiming for an understated, industrial-chic feel without being overly stark, reflecting a cool, contemporary urban landscape for designers and developers.

Best used for

Modern architectural portfolios
Tech startup branding (minimalist)
Urban lifestyle blogs/apps
Apparel and fashion e-commerce (streetwear)
Industrial design concepts
Digital art with a somber, reflective mood

Suggested color roles

primary

Use #2C3E50 as a deep, foundational color for main elements, large text, or background sections.

secondary

Apply #708090 for supporting backgrounds, secondary headings, or UI elements.

accent

Utilize #5F9EA0 for subtle highlights, interactive elements, or data visualizations to add a touch of color.

background

Employ #A2B5BF as a light, airy base for content areas, ensuring good readability.

text

Use #2F4F4F for dark, readable body text on lighter backgrounds like #A2B5BF, or a crisp white for text on #2C3E50.

Accessibility notes

Ensure sufficient contrast when using #5F9EA0 for text on #A2B5BF; consider darkening the text.
#2C3E50 offers excellent contrast with #A2B5BF for body text, providing strong readability.
Use #708090 carefully for text on #A2B5BF; it might lack sufficient contrast for small font sizes.
Consider a pure white or very light gray for text on #2C3E50 or #2F4F4F for optimal readability.

Recommended combinations

Concrete Edge

Base for UI elements, strong dark/light contrast, and a modern, grounded feel.

#2C3E50 · #708090 · #A2B5BF

Teal Shadows

Depth and subtle color variation in graphics or illustrations, evoking urban mystery.

#2F4F4F · #5F9EA0 · #708090

Muted Urban

Clean, minimalist layouts with a touch of muted color for a sophisticated aesthetic.

#A2B5BF · #2C3E50 · #5F9EA0

CSS variables

:root {
  --urban-teal-grunge-1: #2F4F4F;
  --urban-teal-grunge-2: #5F9EA0;
  --urban-teal-grunge-3: #A2B5BF;
  --urban-teal-grunge-4: #708090;
  --urban-teal-grunge-5: #2C3E50;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-teal-grunge": {
        1: "#2F4F4F",
        2: "#5F9EA0",
        3: "#A2B5BF",
        4: "#708090",
        5: "#2C3E50",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#5F9EA0

Color 3#A2B5BF

Color 4#708090

Color 5#2C3E50

Accessibility

Contrast checker

2.9:1Fail

4.2:1AA18

2.2:1Fail

1.2:1Fail

2.9:1Fail

1.4:1Fail

1.3:1Fail

3.6:1AA18

4.2:1AA18

1.4:1Fail

1.9:1Fail

5.2:1AA

2.2:1Fail

1.3:1Fail

1.9:1Fail

2.7:1Fail

1.2:1Fail

3.6:1AA18

5.2:1AA

2.7:1Fail

Similar palettes

More like Urban Teal Grunge

Urban Puddle Reflection

Urban Steel Echo

Cyber Cityscape