Palette

Abstract City Lights

Dynamic, glowing hues representing the blurred, vibrant energy of city lights at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abstract City 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 Abstract City Lights.

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

Data visualization

#140F2D#372A73#5F4AC2#946DE9#D9BFF7

Palette guide

How to use Abstract City Lights

Overview

The "Abstract City Lights" palette captures the dynamic, glowing hues representing the blurred, vibrant energy of city lights at night. It features a deep #140F2D (midnight blue), a rich #372A73 (dark purple), a luminous #5F4AC2 (medium purple), a bright #946DE9 (lavender), and a soft #D9BFF7 (pale lilac). This gradient of purples and blues offers a sophisticated yet energetic feel, perfect for projects requiring a modern, electric aesthetic. Designers can leverage this palette for creating immersive digital experiences, sleek branding, or captivating visual art. Developers will find these harmonious shades excellent for establishing depth, visual hierarchy, and a memorable user experience, especially in dark mode interfaces.

Best used for

Nightlife event promotions
Tech startup branding
Dark mode UI designs
Futuristic digital art
Music streaming apps
Luxury brand websites

Suggested color roles

primary

#140F2D (Midnight Blue) - Establishes a deep, immersive foundation for backgrounds, navigation, or large content blocks, evoking a night sky.

secondary

#372A73 (Dark Purple) - Excellent for subheadings, secondary interactive elements, or layered backgrounds, adding rich depth.

accent

#946DE9 (Lavender) - Use for highlights, active states, or small graphic details to simulate glowing city lights and draw attention.

background

#140F2D (Midnight Blue) or a very dark gray - A dark canvas allows the lighter purples to glow, creating a dramatic, immersive effect.

text

#D9BFF7 or #E0E0E0 (light gray) - For primary text on dark backgrounds, #D9BFF7 offers excellent readability and a soft glow. Light gray is also a good option.

Accessibility notes

Ensure sufficient contrast for #D9BFF7 when used for text against #140F2D or #372A73, meeting WCAG AA standards.
Avoid using #5F4AC2 or #946DE9 for small text on mid-tone backgrounds without careful contrast checks.
Use the lighter shades for interactive elements to ensure they are easily distinguishable on darker backgrounds.
Consider larger font sizes for text in mid-range purples to improve legibility.

Recommended combinations

Deep Glow

For hero sections or feature blocks that need to convey mystery and sophistication with a luminous touch.

#140F2D · #946DE9 · #D9BFF7

Urban Flow

Ideal for layered UI elements or animated backgrounds, creating a sense of movement and depth.

#372A73 · #5F4AC2 · #D9BFF7

Electric Focus

Excellent for navigation elements or calls-to-action, providing a clear visual path with an energetic feel.

#140F2D · #5F4AC2 · #946DE9

CSS variables

:root {
  --abstract-city-lights-1: #140F2D;
  --abstract-city-lights-2: #372A73;
  --abstract-city-lights-3: #5F4AC2;
  --abstract-city-lights-4: #946DE9;
  --abstract-city-lights-5: #D9BFF7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-city-lights": {
        1: "#140F2D",
        2: "#372A73",
        3: "#5F4AC2",
        4: "#946DE9",
        5: "#D9BFF7",
      }
    }
  }
}

Hex values

Color 1#140F2D

Color 2#372A73

Color 3#5F4AC2

Color 4#946DE9

Color 5#D9BFF7

Accessibility

Contrast checker

1.5:1Fail

2.9:1Fail

5:1AA

11.2:1AAA

1.5:1Fail

1.9:1Fail

3.2:1AA18

7.3:1AAA

2.9:1Fail

1.9:1Fail

1.7:1Fail

3.9:1AA18

5:1AA

3.2:1AA18

1.7:1Fail

2.3:1Fail

11.2:1AAA

7.3:1AAA

3.9:1AA18

2.3:1Fail

Similar palettes

More like Abstract City Lights