Back to palettes

Palette

Urban Dusk Bloom

Reflecting the soft glow on concrete structures as twilight paints the city in gentle hues.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#708090#DCDCDC#A0522D#C0C0C0

Palette guide

How to use Urban Dusk Bloom

Overview

The Urban Dusk Bloom palette captures the quiet beauty of twilight descending on a city, blending deep, muted blues and grays with a surprising, warm accent. From the profound #2F4F4F to the bright #DCDCDC, this collection offers a sophisticated and slightly moody foundation. The rich, earthy #A0522D provides a unique, inviting contrast, reminiscent of a hidden bloom in a concrete jungle. Developers will find this palette excellent for creating interfaces that need depth and a touch of warmth. Designers can leverage its balance of cool and warm tones to craft engaging experiences for brands seeking elegance, introspection, and a modern, urban feel.

Best used for

  • Boutique hotel websites
  • Upscale restaurant branding
  • Art and design portfolios
  • Editorial content platforms
  • Interior design showcases
  • Modern lifestyle e-commerce

Suggested color roles

primary

#2F4F4F serves as a deep, calming primary color, ideal for main navigation, backgrounds, or robust headers.

secondary

#708090 offers a lighter, yet equally sophisticated secondary tone, perfect for subheadings, information panels, or subtle data elements.

accent

#A0522D is the palette's distinctive bloom, best used for calls-to-action, important highlights, or to add warmth and personality.

background

#DCDCDC provides a clean, neutral canvas, ensuring excellent readability and allowing the deeper and accent colors to stand out.

text

For dark text on light backgrounds, use #2F4F4F. For light text on dark backgrounds, a crisp white or #DCDCDC is highly effective.

Accessibility notes

  • Ensure #2F4F4F text on #DCDCDC background provides good contrast for readability.
  • The accent #A0522D may need careful pairing for text; use it for larger text or as a background element with white or #DCDCDC text.
  • Avoid using #C0C0C0 or #708090 for small text on #DCDCDC backgrounds due to potential low contrast.
  • Use #DCDCDC for text on #2F4F4F and #708090 backgrounds to maintain accessibility.

Recommended combinations

Twilight Base

Ideal for main layouts, providing strong contrast and a professional, serene feel.

#2F4F4F · #DCDCDC · #708090

Warm Accent

Perfect for highlighting key features, buttons, or calls-to-action against a light background.

#DCDCDC · #A0522D · #2F4F4F

Subtle Depth

Use for layering content cards or sections, adding a touch of warmth to the cool grays.

#708090 · #C0C0C0 · #A0522D

CSS variables

:root {
  --urban-dusk-bloom-1: #2F4F4F;
  --urban-dusk-bloom-2: #708090;
  --urban-dusk-bloom-3: #DCDCDC;
  --urban-dusk-bloom-4: #A0522D;
  --urban-dusk-bloom-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-dusk-bloom": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#DCDCDC",
        4: "#A0522D",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

urban twilight color schememuted blue grey palettemodern earthy accent colorssophisticated concrete paletteelegant web design colors

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#DCDCDC
·
Color 4#A0522D
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
6.5:1AA
1.6:1Fail
4.9:1AA
2
2.2:1Fail
3:1Fail
1.4:1Fail
2.2:1Fail
3
6.5:1AA
3:1Fail
4.1:1AA18
1.3:1Fail
4
1.6:1Fail
1.4:1Fail
4.1:1AA18
3.1:1AA18
5
4.9:1AA
2.2:1Fail
1.3:1Fail
3.1:1AA18

Similar palettes

More like Urban Dusk Bloom

View all neutral
Graphite Urban Grid
Gritty Urban Canvas
Urban Alley Canvas
Urban Concrete Jungle
Urban Stone
Brutalist Bloom Grey