Palette

Neon City Echoes

A dramatic palette capturing the mysterious glow of city lights reflecting on dark, wet streets.

DarkDark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon City Echoes 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 Neon City Echoes.

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

Data visualization

#1A1A2E#16213E#0F3460#E94560#FFD700

Palette guide

How to use Neon City Echoes

Overview

The "Neon City Echoes" palette masterfully blends deep, mysterious blues with electric, high-contrast accents, perfect for evoking a dramatic, urban night aesthetic. Its core dark shades, such as `#1A1A2E` and `#0F3460`, provide a sophisticated backdrop, while the vivid `#E94560` (a striking red-pink) and `#FFD700` (bright gold) inject energetic focal points. This palette is designed for digital interfaces and branding that demand a futuristic, cyberpunk, or high-tech feel. Developers and designers will find its inherent contrast useful for creating visually impactful and memorable experiences, ensuring key elements pop against the dark expanse.

Best used for

Cyberpunk-themed video games and streaming interfaces
Modern tech and software branding
Nightlife event promotions and digital posters
Futuristic UI/UX designs for mobile and web apps
Dark mode implementations requiring high contrast
Digital art and illustration with a neon aesthetic

Suggested color roles

primary

Use `#1A1A2E` as the dominant background or main container color, providing a solid, dark foundation.

secondary

Apply `#16213E` or `#0F3460` for secondary backgrounds, panels, or subtle UI distinctions to add depth without distracting from the primary dark.

accent

Deploy `#E94560` sparingly for critical calls-to-action, alerts, or interactive elements that demand immediate attention.

background

The deepest hue, `#1A1A2E`, serves as the foundational background, creating a canvas for the brighter accents.

text

For optimal readability against the dark backgrounds, use white or a very light gray (e.g., #F0F0F0). For headings or interactive elements, `#FFD700` or `#E94560` provide excellent contrast and visual pop.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using `#E94560` or `#FFD700` for text, to meet WCAG guidelines.
Avoid using `#E94560` or `#FFD700` for large blocks of body text; reserve them for headings, links, or crucial highlights.
Use a contrast checker tool to verify readability for all text-color combinations, particularly against the dark blues.
Consider providing a light mode alternative if the primary dark design relies heavily on these high-contrast accents, for users with specific visual impairments.

Recommended combinations

Vibrant CTA

Ideal for striking call-to-action buttons or important alerts against a dark backdrop, with the deep blue providing structure.

#1A1A2E · #0F3460 · #E94560

Information Highlight

Effective for highlighting key data, progress indicators, or informational text on dark interfaces, offering clear visibility.

#16213E · #1A1A2E · #FFD700

Layered Depth

Creates a rich, dark gradient foundation for backgrounds or large sections, providing depth and setting a mysterious mood before adding accents.

#1A1A2E · #16213E · #0F3460

CSS variables

:root {
  --neon-city-echoes-1: #1A1A2E;
  --neon-city-echoes-2: #16213E;
  --neon-city-echoes-3: #0F3460;
  --neon-city-echoes-4: #E94560;
  --neon-city-echoes-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-echoes": {
        1: "#1A1A2E",
        2: "#16213E",
        3: "#0F3460",
        4: "#E94560",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#16213E

Color 3#0F3460

Color 4#E94560

Color 5#FFD700

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

4.5:1AA18

12.2:1AAA

1.1:1Fail

1.3:1Fail

4.2:1AA18

11.3:1AAA

1.4:1Fail

1.3:1Fail

3.3:1AA18

8.9:1AAA

4.5:1AA18

4.2:1AA18

3.3:1AA18

2.7:1Fail

12.2:1AAA

11.3:1AAA

8.9:1AAA

2.7:1Fail

Similar palettes

More like Neon City Echoes

View all Dark

Cyber City Echoes

Midnight Urban Blues

Midnight Forest Whisper

Starry Night

Winter Arctic Midnight

Abyssal Bioluminescence