Palette

Urban Teal Haze

A cool, muted palette reflecting the steely calm of an urban landscape at twilight.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008080#2F4F4F#708090#A9A9A9#D3D3D3

Palette guide

How to use Urban Teal Haze

Overview

The "Urban Teal Haze" palette presents a serene, monochromatic journey through cool grays and deep teal, capturing the essence of a city at twilight. Anchored by the striking dark cyan #008080 and the deep slate gray #2F4F4F, it provides a strong, modern foundation. Mid-tones like the cool slate gray #708090 and dark gray #A9A9A9 offer balance, while light gray #D3D3D3 introduces an airy, almost misty quality. This palette is perfect for designs seeking a sophisticated, understated, and calming urban aesthetic, reminiscent of steel structures and misty cityscapes, making it versatile for designers and developers.

Best used for

Corporate websites (modern, minimalist)
Photography portfolios (urban landscape)
Interior design visualization (contemporary)
Luxury brand digital presence
Mobile app interfaces (clean, professional)
Sustainable architecture presentations

Suggested color roles

primary

Use #008080 as a key branding element, strong calls-to-action, or prominent headings for impact.

secondary

Apply #2F4F4F for dominant backgrounds, large text for impact, or key sections.

accent

Utilize #A9A9A9 for subtle highlights, dividers, icons, or secondary UI elements.

background

Employ #D3D3D3 as a light, clean content area background, providing excellent readability.

text

Use #708090 for readable body text on lighter backgrounds like #D3D3D3, or a crisp white on #008080 or #2F4F4F.

Accessibility notes

Ensure #708090 text on #D3D3D3 meets WCAG contrast standards; consider darkening text for small sizes.
#008080 provides excellent contrast against #D3D3D3 for headings and accents, ensuring legibility.
Avoid using #A9A9A9 for critical body text on #D3D3D3 due to potential low contrast.
White or near-white text on #008080 and #2F4F4F offers optimal readability for darker sections.

Recommended combinations

Twilight Core

Strong brand presence with a crisp contrast, ideal for hero sections or key information.

#2F4F4F · #008080 · #D3D3D3

Misty Layers

Subtle background variations or layered UI elements for a sophisticated, atmospheric feel.

#D3D3D3 · #A9A9A9 · #708090

Teal Accent

Dark base with a vibrant, yet sophisticated, accent, suitable for interactive elements.

#2F4F4F · #708090 · #008080

CSS variables

:root {
  --urban-teal-haze-1: #008080;
  --urban-teal-haze-2: #2F4F4F;
  --urban-teal-haze-3: #708090;
  --urban-teal-haze-4: #A9A9A9;
  --urban-teal-haze-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-teal-haze": {
        1: "#008080",
        2: "#2F4F4F",
        3: "#708090",
        4: "#A9A9A9",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#008080

Color 2#2F4F4F

Color 3#708090

Color 4#A9A9A9

Color 5#D3D3D3

Accessibility

Contrast checker

1.9:1Fail

1.2:1Fail

2:1Fail

3.2:1AA18

1.9:1Fail

2.2:1Fail

3.8:1AA18

6:1AA

1.2:1Fail

2.2:1Fail

1.7:1Fail

2.7:1Fail

2:1Fail

3.8:1AA18

1.7:1Fail

1.6:1Fail

3.2:1AA18

6:1AA

2.7:1Fail

1.6:1Fail

Similar palettes

More like Urban Teal Haze

Concrete Brutalism Form

Concrete Jungle Hue

Grayscale Urban Loft