Back to palettes

Palette

Midnight Urban Blues

Deep, somber blues reflecting the quiet, reflective atmosphere of a city under the cloak of night.

DarkDark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0E1A29#263B52#446788#0A131F#050B13

Palette guide

How to use Midnight Urban Blues

Overview

The Midnight Urban Blues palette offers a deep, somber collection of blues, reflecting the quiet, reflective atmosphere of a city under the cloak of night. With profoundly dark shades like #050B13 and #0A131F, alongside the slightly brighter #446788, this palette is designed for projects requiring seriousness, professionalism, and a moody yet sophisticated tone. The subtle variations between #0E1A29 and #263B52 allow for depth and structure, making it ideal for corporate, financial, or tech-oriented designs.

Best used for

  • Financial services websites
  • Serious journalism platforms
  • Documentary film branding
  • Cybersecurity interfaces
  • Professional tech dashboards
  • Data visualization tools

Suggested color roles

primary

Use #050B13 as the deepest, anchoring background color, establishing a serious and immersive tone.

secondary

Apply #0A131F for large sections, containers, or subtle overlays, providing depth and a sense of professionalism.

accent

Highlight subtle interactive elements, key data points, or navigational cues with #446788, offering a muted but clear focal point.

background

Employ #050B13 as the primary canvas for a truly dark, moody, and sophisticated urban blue theme.

text

For legibility on dark backgrounds, use #446788 for primary text. For essential information, a near-white or light grey text color would offer maximum contrast.

Accessibility notes

  • Exercise caution when using #446788 for text on #050B13 or #0A131F; ensure it meets WCAG AA contrast standards, possibly requiring larger font sizes or bolder weights.
  • Avoid using #0E1A29 or #263B52 for any text, as they lack sufficient contrast against the darkest backgrounds.
  • For critical information, always provide a high-contrast alternative, such as white or light grey text.
  • Ensure interactive elements using #446788 are clearly distinguishable and provide sufficient feedback.

Recommended combinations

Deep Urban

Forms a profoundly deep and layered blue foundation for backgrounds and primary content, establishing a serious, moody tone.

#050B13 · #0A131F · #0E1A29

City Night

Ideal for creating subtle visual hierarchy with a brighter accent against a dark, urban blue backdrop.

#0E1A29 · #263B52 · #446788

Subtle Mood

Perfect for gradients, layered effects, or graphical elements that require a gentle transition of deep urban blues.

#0A131F · #263B52 · #446788

CSS variables

:root {
  --midnight-urban-blues-1: #0E1A29;
  --midnight-urban-blues-2: #263B52;
  --midnight-urban-blues-3: #446788;
  --midnight-urban-blues-4: #0A131F;
  --midnight-urban-blues-5: #050B13;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-urban-blues": {
        1: "#0E1A29",
        2: "#263B52",
        3: "#446788",
        4: "#0A131F",
        5: "#050B13",
      }
    }
  }
}

Related searches

dark blue urban palettemoody city colorsnight themed bluesdeep professional huessubtle dark mode

Palette colors

Hex values

Color 1#0E1A29
·
Color 2#263B52
·
Color 3#446788
·
Color 4#0A131F
·
Color 5#050B13
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3:1Fail
1.1:1Fail
1.1:1Fail
2
1.5:1Fail
1.9:1Fail
1.6:1Fail
1.7:1Fail
3
3:1Fail
1.9:1Fail
3.1:1AA18
3.3:1AA18
4
1.1:1Fail
1.6:1Fail
3.1:1AA18
1.1:1Fail
5
1.1:1Fail
1.7:1Fail
3.3:1AA18
1.1:1Fail

Similar palettes

More like Midnight Urban Blues

View all Dark