Back to palettes

Palette

Urban Night Bloom

Captures the sophisticated darkness of a city night, illuminated by soft, distant lights.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A2E#2F2D4E#4A4575#6C638E#8C80AD

Palette guide

How to use Urban Night Bloom

Overview

The Urban Night Bloom palette captures the sophisticated darkness of a city night, illuminated by soft, distant lights. It is a harmonious collection of deep, muted purples and blues, starting from the near-black #1A1A2E and subtly transitioning through #2F2D4E, #4A4575, and #6C638E, culminating in the lighter, yet still subdued #8C80AD. This palette evokes elegance, mystery, and a sense of calm. It's an excellent choice for designers seeking a refined, dark aesthetic that offers depth without harsh contrasts, perfect for professional interfaces, sophisticated branding, or any project aiming for a luxurious and serene nocturnal feel.

Best used for

  • Corporate dark mode themes
  • Luxury brand websites
  • Abstract art and photography backdrops
  • Elegance-focused app design
  • Editorial design for sophisticated content
  • Personal portfolio sites

Suggested color roles

primary

Use #1A1A2E as the foundational dark background, providing a deep and immersive canvas.

secondary

Employ #2F2D4E for secondary content blocks or large panels, adding subtle variation without stark contrast.

accent

Apply #4A4575 for muted accents, borders, or inactive UI states, offering a hint of color and depth.

background

The palette itself is designed for a dark background. #1A1A2E serves as the deepest background.

text

For primary text, #8C80AD or a crisp white provides excellent readability on darker shades. For subheadings, #6C638E works well.

Accessibility notes

  • Ensure sufficient contrast when pairing #8C80AD with darker shades like #1A1A2E for body text.
  • Using white text on #1A1A2E or #2F2D4E will provide the highest contrast and readability.
  • Avoid using #2F2D4E or #4A4575 for small text on #1A1A2E without verifying WCAG contrast ratios, as they are close in value.
  • Consider larger font sizes or bolding for text in shades like #6C638E to improve legibility against similar tones.

Recommended combinations

Deep Serenity

Ideal for main content areas, providing a dark, sophisticated base with clear, readable highlights.

#1A1A2E · #2F2D4E · #8C80AD

Subtle Depth

Great for creating visual hierarchy within sections, using gradual tonal shifts for a refined look.

#2F2D4E · #4A4575 · #6C638E

Elegant Contrast

Effective for navigation menus or footer designs, offering a distinct yet harmonious separation of elements.

#1A1A2E · #6C638E · #8C80AD

CSS variables

:root {
  --urban-night-bloom-1: #1A1A2E;
  --urban-night-bloom-2: #2F2D4E;
  --urban-night-bloom-3: #4A4575;
  --urban-night-bloom-4: #6C638E;
  --urban-night-bloom-5: #8C80AD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-night-bloom": {
        1: "#1A1A2E",
        2: "#2F2D4E",
        3: "#4A4575",
        4: "#6C638E",
        5: "#8C80AD",
      }
    }
  }
}

Related searches

dark elegant color palettemuted purple blue themesophisticated dark modenight city ambiance colorsmonochromatic dark palette

Palette colors

Hex values

Color 1#1A1A2E
·
Color 2#2F2D4E
·
Color 3#4A4575
·
Color 4#6C638E
·
Color 5#8C80AD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
3.1:1AA18
4.7:1AA
2
1.3:1Fail
1.5:1Fail
2.4:1Fail
3.6:1AA18
3
1.9:1Fail
1.5:1Fail
1.6:1Fail
2.4:1Fail
4
3.1:1AA18
2.4:1Fail
1.6:1Fail
1.5:1Fail
5
4.7:1AA
3.6:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Urban Night Bloom

View all dark
Deep Plum Twilight
Midnight Velvet Cloak
City Night Canvas
Enigmatic Shadow Tale
Ethereal Night Bloom
Gothic Cloister Arch