Palette

Metropolitan Dusk

A muted and sophisticated palette reflecting the cool, shadowed tones of a city at dusk.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Metropolitan Dusk 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 Metropolitan Dusk.

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

Data visualization

#2C3E50#34495E#7F8C8D#95A5A6#1C2B39

Palette guide

How to use Metropolitan Dusk

Overview

The Metropolitan Dusk palette captures the cool, muted tones of a city at twilight, offering a sophisticated and contemporary feel. This palette blends deep blues and versatile greys, making it ideal for creating minimalist yet impactful designs. With core colors like the profound #2C3E50, the grounding #34495E, and the subtly luminous #95A5A6, designers and developers can craft professional interfaces, sleek branding, and modern digital experiences. Its understated elegance ensures a calm and focused user experience, perfect for conveying professionalism and understated style.

Best used for

Modern corporate branding and websites
Minimalist UI/UX design for professional applications
Architectural and design portfolios
Contemporary art gallery websites
Professional presentation templates
High-tech product interfaces

Suggested color roles

primary

#2C3E50 - A deep, cool blue-grey, serving as a robust foundation for main backgrounds, headers, or primary content blocks.

secondary

#34495E - A slightly darker, richer blue-grey, excellent for supporting panels, navigation, or subtle content separation.

accent

#7F8C8D - A muted, cool teal-grey, perfect for understated calls to action, subtle highlights, or graphic elements.

background

#2C3E50 or #1C2B39 - Provides a deep, tranquil base for a sophisticated and focused visual experience.

text

#95A5A6 - A light, cool grey that offers good readability on the darker palette colors, ideal for primary body text or white for maximum contrast.

Accessibility notes

Ensure #95A5A6 text on #2C3E50 or #34495E backgrounds meets WCAG AA contrast guidelines.
Use #7F8C8D for secondary text or less critical information, verifying its contrast against adjacent colors.
Avoid using #1C2B39 on #2C3E50 for text due to very low contrast; reserve for background layering.
Verify that interactive elements, such as buttons and links, have sufficient contrast and clear hover states.

Recommended combinations

Twilight Core

A balanced dark base with a muted accent and clear, light text for content.

#2C3E50 · #7F8C8D · #95A5A6

Urban Shadow

Layering the deepest tones for a rich, immersive backdrop with subtle highlights.

#1C2B39 · #34495E · #7F8C8D

Cool Contrast

A mid-dark base with light text and a complementary muted accent for clarity.

#34495E · #95A5A6 · #7F8C8D

CSS variables

:root {
  --metropolitan-dusk-1: #2C3E50;
  --metropolitan-dusk-2: #34495E;
  --metropolitan-dusk-3: #7F8C8D;
  --metropolitan-dusk-4: #95A5A6;
  --metropolitan-dusk-5: #1C2B39;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "metropolitan-dusk": {
        1: "#2C3E50",
        2: "#34495E",
        3: "#7F8C8D",
        4: "#95A5A6",
        5: "#1C2B39",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#34495E

Color 3#7F8C8D

Color 4#95A5A6

Color 5#1C2B39

Accessibility

Contrast checker

1.2:1Fail

3.2:1AA18

4.3:1AA18

1.3:1Fail

1.2:1Fail

2.7:1Fail

3.6:1AA18

1.6:1Fail

3.2:1AA18

2.7:1Fail

1.4:1Fail

4.2:1AA18

4.3:1AA18

3.6:1AA18

1.4:1Fail

5.6:1AA

1.3:1Fail

1.6:1Fail

4.2:1AA18

5.6:1AA

Similar palettes

More like Metropolitan Dusk

View all cool

Digital Rainstorm

Industrial Edge Steel

Steel Skyline Haze

Urban Puddle Reflection

Urban Teal Grunge

Arctic Shoreline Chill