Palette

Neon Future City

A bold, glowing vision of a city where technology meets art in a dazzling display of light.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#BF00FF#00FFFF#FF1493#333333#0F0F0F

Palette guide

How to use Neon Future City

Overview

The Neon Future City palette paints a dazzling picture of a technologically advanced urban landscape, where vibrant lights cut through the deep night. It features an electrifying range of hues including brilliant violet (#BF00FF), luminous cyan (#00FFFF), and bold hot pink (#FF1493), grounded by sophisticated dark grays like #333333 and #0F0F0F. This palette is perfect for designers and developers aiming to create a bold, energetic, and modern aesthetic. Its high contrast and glowing nature make it ideal for capturing attention and conveying a sense of innovation and excitement in any digital product or brand.

Best used for

Gaming UI and immersive environments
Concert and festival visual identities
Digital art installations and projections
Web design for creative agencies
Fashion technology branding
Interactive display interfaces

Suggested color roles

primary

Use #BF00FF (Violet) for primary branding, large headings, or background gradients to establish a strong, artistic presence.

secondary

Apply #00FFFF (Cyan) for interactive elements, active states, or key information that needs to stand out sharply.

accent

Incorporate #FF1493 (Hot Pink) for alerts, unique icons, or subtle glowing details to inject playful energy.

background

Utilize #0F0F0F (Very Dark Gray) for the main content areas, offering a near-black canvas, or #333333 (Dark Gray) for slightly softer backgrounds.

text

For body text, use white or a light silver. Headings and call-to-action text can leverage #00FFFF or #BF00FF for high impact against dark backgrounds.

Accessibility notes

Ensure sufficient contrast for all text and interactive elements against the dark gray backgrounds, adhering to WCAG guidelines.
Avoid using neon colors for small, dense blocks of text, as their intensity can reduce readability.
When layering neon colors, check for adequate luminance contrast to ensure distinctness.
Be mindful of potential eye strain from prolonged exposure to very bright, saturated colors; offer alternatives if possible.

Recommended combinations

Urban Night

Excellent for primary layouts, combining vibrant highlights with a deep, modern backdrop.

#BF00FF · #00FFFF · #0F0F0F

Tech Pop

Ideal for buttons, navigation, or secondary information blocks that require a lively, energetic feel.

#FF1493 · #00FFFF · #333333

Future Glow

Perfect for hero sections or brand accents, creating a high-contrast, artistic and futuristic impression.

#BF00FF · #FF1493 · #0F0F0F

CSS variables

:root {
  --neon-future-city-1: #BF00FF;
  --neon-future-city-2: #00FFFF;
  --neon-future-city-3: #FF1493;
  --neon-future-city-4: #333333;
  --neon-future-city-5: #0F0F0F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-future-city": {
        1: "#BF00FF",
        2: "#00FFFF",
        3: "#FF1493",
        4: "#333333",
        5: "#0F0F0F",
      }
    }
  }
}

Hex values

Color 1#BF00FF

Color 2#00FFFF

Color 3#FF1493

Color 4#333333

Color 5#0F0F0F

Accessibility

Contrast checker

3.6:1AA18

1.2:1Fail

2.8:1Fail

4.3:1AA18

3.6:1AA18

2.9:1Fail

10.1:1AAA

15.3:1AAA

1.2:1Fail

2.9:1Fail

3.5:1AA18

5.3:1AA

2.8:1Fail

10.1:1AAA

3.5:1AA18

1.5:1Fail

4.3:1AA18

15.3:1AAA

5.3:1AA

1.5:1Fail

Similar palettes

More like Neon Future City

Cyberpunk Alley Light

Cyberpunk Alley Neon