Back to palettes

Palette

Suburban Night Lights

Cool, deep blues and greys evoke the tranquil yet mysterious feel of a suburban night sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Suburban Night Lights 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 Suburban Night Lights.

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

Data visualization

#1C212B#2F3947#425164#627A91#82A3BE

Palette guide

How to use Suburban Night Lights

Overview

The Suburban Night Lights palette offers a sophisticated range of cool, deep blues and greys, perfect for evoking a tranquil yet modern aesthetic. With shades like the profound #1C212B and the serene #82A3BE, this palette transitions seamlessly from a mysterious twilight to a clear, starry suburban sky. Designers can leverage these tones for elegant dark mode interfaces, while developers will appreciate the distinct contrast opportunities for UI elements. The cohesive blend of #2F3947 and #627A91 ensures a harmonious flow, ideal for creating immersive digital experiences or sleek branding that conveys professionalism and depth. This collection provides excellent flexibility for both subtle gradients and bold, contrasting statements.

Best used for

  • Dark mode UI/UX design for tech products
  • Sophisticated corporate branding and websites
  • Evening event promotions or luxury service marketing
  • Modern architectural visualizations and interior design
  • Cinematic or mysterious digital art and photography portfolios
  • Automotive or high-end electronics branding

Suggested color roles

primary

#1C212B serves as a deep, anchoring foundation for backgrounds or dominant elements, establishing a serious and elegant tone.

secondary

#2F3947 provides a slightly lighter yet still dark hue, excellent for secondary backgrounds, navigation, or subtle dividers.

accent

#82A3BE offers the brightest point, perfect for call-to-action buttons, key data highlights, or illustrative details that need to stand out.

background

Use #1C212B for a truly dark, immersive background, or #2F3947 for a slightly softer dark base that still maintains depth.

text

For optimal readability, use #82A3BE or #627A91 for primary text on darker backgrounds, ensuring clear contrast. A pure white or light grey can also be effective.

Accessibility notes

  • Ensure sufficient contrast between lighter text (#82A3BE) and darker backgrounds (#1C212B or #2F3947) for WCAG compliance.
  • Avoid using #1C212B and #2F3947 for adjacent text and background without careful contrast checking, as they are very similar.
  • Use #627A91 or #82A3BE for interactive elements to provide clear visual cues.
  • Consider using a slightly off-white for body text on the darkest backgrounds to reduce eye strain over long reading periods.

Recommended combinations

Deep Twilight

Ideal for creating a layered, dark interface with clear visual hierarchy, using the lightest for interactive elements.

#1C212B · #2F3947 · #627A91

Modern Accent

Excellent for highlighting key information or calls to action against a mid-dark background, with a supporting mid-tone.

#2F3947 · #82A3BE · #425164

Suburban Sky

Perfect for subtle gradients or layered elements where a progression from mid-dark to light is desired, evoking depth.

#425164 · #627A91 · #82A3BE

CSS variables

:root {
  --suburban-night-lights-1: #1C212B;
  --suburban-night-lights-2: #2F3947;
  --suburban-night-lights-3: #425164;
  --suburban-night-lights-4: #627A91;
  --suburban-night-lights-5: #82A3BE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "suburban-night-lights": {
        1: "#1C212B",
        2: "#2F3947",
        3: "#425164",
        4: "#627A91",
        5: "#82A3BE",
      }
    }
  }
}

Related searches

dark blue grey color palettemodern night aesthetic colorsurban twilight design schemecool dark ui colorssophisticated blue grey branding

Palette colors

Hex values

Color 1#1C212B
·
Color 2#2F3947
·
Color 3#425164
·
Color 4#627A91
·
Color 5#82A3BE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
3.6:1AA18
6.1:1AA
2
1.4:1Fail
1.4:1Fail
2.6:1Fail
4.4:1AA18
3
2:1Fail
1.4:1Fail
1.8:1Fail
3.1:1AA18
4
3.6:1AA18
2.6:1Fail
1.8:1Fail
1.7:1Fail
5
6.1:1AA
4.4:1AA18
3.1:1AA18
1.7:1Fail

Similar palettes

More like Suburban Night Lights

View all dark
City After Hours
City Neon Rain
Midnight Urban Glow
Acid Rain Gloom
Basalt Edge
Celestial Night Sky