Palette

Neo-Tokyo Streetlights

Bold, electrifying hues capture the pulsating energy of a futuristic, neon-lit metropolis.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neo-Tokyo Streetlights 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 Neo-Tokyo Streetlights.

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

Data visualization

#0D0B13#2A0C4E#8A307F#FF4C6F#1DFF8F

Palette guide

How to use Neo-Tokyo Streetlights

Overview

The 'Neo-Tokyo Streetlights' palette encapsulates the pulsating energy of a futuristic, neon-lit metropolis. It masterfully balances deep, mysterious darks with electrifying neons. The foundational #0D0B13 (Deep Plum Black) and #2A0C4E (Dark Violet) provide a rich, shadowy base, against which the vibrant #FF4C6F (Electric Rose) and #1DFF8F (Vivid Mint) truly pop. A sophisticated #8A307F (Royal Magenta) adds depth and a touch of urban chic. This palette is perfect for designers and developers aiming to create immersive, high-contrast experiences with a clear cyberpunk or dark mode aesthetic.

Best used for

dark mode application interfaces
sci-fi gaming environments
cyberpunk narrative design
synthwave music video aesthetics
futuristic branding and logos
live event visuals and projections

Suggested color roles

primary

Utilize #1DFF8F (Vivid Mint) as a compelling primary color for interactive elements, key icons, or crucial data points due to its high visibility and energetic glow.

secondary

Apply #FF4C6F (Electric Rose) for secondary calls-to-action, status indicators, or to add a warm, dynamic contrast to the cooler primary neon.

accent

Use #8A307F (Royal Magenta) for subtle highlights, decorative elements, or as a transitional color in gradients, adding sophistication without overwhelming the neons.

background

The deep #0D0B13 (Deep Plum Black) serves as an excellent primary background, providing a dark, immersive canvas that makes the neon accents truly shine.

text

For body text, use a crisp white or very light gray (e.g., #F0F0F0) against #0D0B13. For headings or emphasized text, #1DFF8F offers high impact and readability.

Accessibility notes

Ensure sufficient contrast for all text against the dark backgrounds, especially #0D0B13 and #2A0C4E, using bright neons or white.
Avoid using #2A0C4E as a primary text color due to its low contrast against darker backgrounds and potential for eye strain.
Verify that interactive elements using #8A307F have adequate contrast against both #0D0B13 and #2A0C4E for usability.
Consider providing alternative text representations for users with color vision deficiencies, particularly with similar hues like #8A307F and #FF4C6F.

Recommended combinations

Dark UI Accent

Perfect for a dark-themed UI, where #0D0B13 forms the base with vibrant #1DFF8F and #FF4C6F as interactive highlights.

#0D0B13 · #1DFF8F · #FF4C6F

Streetlight Glow

Create atmospheric background elements or subtle gradients that evoke the depth and mystery of a neon-lit alley.

#2A0C4E · #8A307F · #1DFF8F

Call to Action

Combine the brightest neons for impactful buttons and alerts, ensuring high visibility against the dark background.

#1DFF8F · #FF4C6F · #0D0B13

CSS variables

:root {
  --neo-tokyo-streetlights-1: #0D0B13;
  --neo-tokyo-streetlights-2: #2A0C4E;
  --neo-tokyo-streetlights-3: #8A307F;
  --neo-tokyo-streetlights-4: #FF4C6F;
  --neo-tokyo-streetlights-5: #1DFF8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neo-tokyo-streetlights": {
        1: "#0D0B13",
        2: "#2A0C4E",
        3: "#8A307F",
        4: "#FF4C6F",
        5: "#1DFF8F",
      }
    }
  }
}

Hex values

Color 1#0D0B13

Color 2#2A0C4E

Color 3#8A307F

Color 4#FF4C6F

Color 5#1DFF8F

Accessibility

Contrast checker

1.2:1Fail

2.6:1Fail

6.1:1AA

14.7:1AAA

1.2:1Fail

2.2:1Fail

5.2:1AA

12.5:1AAA

2.6:1Fail

2.2:1Fail

2.3:1Fail

5.6:1AA

6.1:1AA

5.2:1AA

2.3:1Fail

2.4:1Fail

14.7:1AAA

12.5:1AAA

5.6:1AA

2.4:1Fail

Similar palettes

More like Neo-Tokyo Streetlights

View all vibrant

Cyber Orchid Glow

Cybernetic Vista Glow

Cyberpunk Afterglow

Cyberpunk Alley Glow

Cyberpunk Alley Night

Cyberpunk Neon Drive