Back to palettes

Palette

Midnight Urban Bloom

Dark, brooding blues and purples with an unexpected vibrant accent, like flowers pushing through city asphalt.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A2E40#3C4A6B#6D5E99#B87BEE#E6E6E6

Palette guide

How to use Midnight Urban Bloom

Overview

The Midnight Urban Bloom palette merges the brooding deep blues of a city night with unexpected vibrant purples, reflecting an urban landscape where beauty emerges amidst the grit. With grounding colors like #1A2E40 and #3C4A6B, contrasted by the striking #B87BEE, this palette is modern and dynamic. The inclusion of #6D5E99 and a near-white #E6E6E6 provides versatility, making it perfect for tech-forward brands, creative agencies, or any design seeking a contemporary, energetic, and slightly mysterious feel.

Best used for

  • Modern tech startup branding
  • Creative agency portfolios
  • Music festival and event promotion
  • Urban photography websites
  • Youth-oriented fashion brands
  • Interactive digital experiences

Suggested color roles

primary

Use #1A2E40 as the deep, urban background, setting a modern and slightly mysterious tone for the design.

secondary

Apply #3C4A6B for supporting content, card backgrounds, or subtle gradients to add depth and structure.

accent

Highlight interactive elements, calls to action, or key information with #B87BEE, providing a vibrant and energetic pop.

background

Employ #1A2E40 as the primary canvas for a dynamic and contemporary dark urban theme.

text

For optimal legibility, use #E6E6E6 for main text on dark backgrounds. #B87BEE can be used for headings or key navigational links to add vibrancy.

Accessibility notes

  • Ensure #E6E6E6 provides sufficient contrast against #1A2E40 for all text to meet WCAG AA standards.
  • Test #B87BEE for contrast when used as text on darker blues like #1A2E40 or #3C4A6B; it may require larger font sizes.
  • Avoid using mid-tones like #3C4A6B for small body text on the darkest backgrounds.
  • For interactive elements, ensure the vibrant accent color offers clear visual feedback and strong contrast.

Recommended combinations

Urban Base

Forms a deep, layered blue-purple foundation, ideal for backgrounds and primary content, creating an urban night feel.

#1A2E40 · #3C4A6B · #6D5E99

Bloom Contrast

Perfect for creating strong visual hierarchy with vibrant accents and clear text against a profound dark urban backdrop.

#1A2E40 · #B87BEE · #E6E6E6

Modern Fusion

Ideal for gradients, layered effects, or graphical elements that require a smooth transition of blues and purples with a vibrant edge.

#3C4A6B · #6D5E99 · #B87BEE

CSS variables

:root {
  --midnight-urban-bloom-1: #1A2E40;
  --midnight-urban-bloom-2: #3C4A6B;
  --midnight-urban-bloom-3: #6D5E99;
  --midnight-urban-bloom-4: #B87BEE;
  --midnight-urban-bloom-5: #E6E6E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-urban-bloom": {
        1: "#1A2E40",
        2: "#3C4A6B",
        3: "#6D5E99",
        4: "#B87BEE",
        5: "#E6E6E6",
      }
    }
  }
}

Related searches

dark urban color palettemodern night themevibrant purple bluecity glow colorstech dark mode

Palette colors

Hex values

Color 1#1A2E40
·
Color 2#3C4A6B
·
Color 3#6D5E99
·
Color 4#B87BEE
·
Color 5#E6E6E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
4.7:1AA
11.2:1AAA
2
1.6:1Fail
1.6:1Fail
3:1Fail
7.1:1AAA
3
2.5:1Fail
1.6:1Fail
1.9:1Fail
4.5:1AA
4
4.7:1AA
3:1Fail
1.9:1Fail
2.4:1Fail
5
11.2:1AAA
7.1:1AAA
4.5:1AA
2.4:1Fail

Similar palettes

More like Midnight Urban Bloom

View all dark
Midnight Urban Glow
City Neon Rain
Basalt Edge
Black Shard Reflection
Celestial Deep Blue
Charcoal Depths