Palette

Neon Skyline

Electrifying colors glow against deep urban shadows, evoking a futuristic city's night scene.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A0F2B#3A1F4C#5C2D70#00FFCC#FF66FF

Palette guide

How to use Neon Skyline

Overview

The Neon Skyline palette masterfully combines deep, brooding urban shadows with electrifying neon accents, evoking a futuristic city at night. Anchored by profound dark tones like #1A0F2B and #3A1F4C, it provides the perfect canvas for the piercing brightness of #00FFCC (Caribbean Green) and the vivid #FF66FF (Shocking Pink). This palette is exceptionally useful for designers aiming to create an immersive, cyberpunk aesthetic in digital interfaces, gaming environments, or atmospheric branding. The rich purple of #5C2D70 acts as a sophisticated bridge between the dark foundations and the striking neons, ensuring a cohesive yet dramatic visual experience.

Best used for

Cyberpunk game UI/UX
Dark mode application themes
Sci-fi movie posters
Twitch stream overlays
Futuristic event branding
Digital art and concept design

Suggested color roles

primary

Utilize #1A0F2B (Dark Purple) as the dominant background or primary structural color for a deep, mysterious foundation.

secondary

Employ #3A1F4C (Medium Purple) for secondary panels, cards, or subtle background variations to add depth.

accent

Apply #00FFCC (Caribbean Green) and #FF66FF (Shocking Pink) for glowing accents, interactive elements, or critical call-to-actions.

background

The deep #1A0F2B and #3A1F4C are ideal backgrounds, providing the necessary contrast for the bright neons.

text

For body text, use a bright white or light gray for maximum readability against the dark backgrounds. Accent text can use #00FFCC or #FF66FF.

Accessibility notes

Ensure high contrast for text, especially when using #00FFCC or #FF66FF for small type on dark backgrounds.
Avoid placing the two bright neons (#00FFCC, #FF66FF) directly adjacent for critical information due to potential visual vibration.
Leverage the dark background colors to ensure bright neon elements are highly visible and accessible.
Test color combinations for readability against varying screen brightness levels.

Recommended combinations

Urban Glow

Perfect for dark mode interfaces with glowing highlights and interactive elements.

#1A0F2B · #00FFCC · #FF66FF

Cyberpunk Mood

Creates a mysterious atmosphere, ideal for background imagery or subtle UI components.

#3A1F4C · #5C2D70 · #00FFCC

Electric Contrast

Use for striking headlines, brand logos, or focal points against a deep, rich background.

#1A0F2B · #5C2D70 · #FF66FF

CSS variables

:root {
  --neon-skyline-1: #1A0F2B;
  --neon-skyline-2: #3A1F4C;
  --neon-skyline-3: #5C2D70;
  --neon-skyline-4: #00FFCC;
  --neon-skyline-5: #FF66FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-skyline": {
        1: "#1A0F2B",
        2: "#3A1F4C",
        3: "#5C2D70",
        4: "#00FFCC",
        5: "#FF66FF",
      }
    }
  }
}

Hex values

Color 1#1A0F2B

Color 2#3A1F4C

Color 3#5C2D70

Color 4#00FFCC

Color 5#FF66FF

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

14.1:1AAA

7.5:1AAA

1.3:1Fail

1.4:1Fail

10.9:1AAA

5.8:1AA

1.8:1Fail

1.4:1Fail

7.8:1AAA

4.2:1AA18

14.1:1AAA

10.9:1AAA

7.8:1AAA

1.9:1Fail

7.5:1AAA

5.8:1AA

4.2:1AA18

1.9:1Fail

Similar palettes

More like Neon Skyline

View all vibrant

Cybernetic Vista Glow

Cyberpunk Afterglow

Cyberpunk Alley Neon

Cyberpunk Alley Night

Cyberpunk City Glow

Cyberpunk Neon Drive