Back to palettes

Palette

Neo Cyber City

A dark, futuristic blend with neon highlights, inspired by cyberpunk city nights.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neo Cyber 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 Neo Cyber City.

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

Data visualization

#0A0A0A#FF00FF#00FFFF#39FF14#FFD700

Palette guide

How to use Neo Cyber City

Overview

The Neo Cyber City palette plunges into a dark, futuristic aesthetic, defined by a stark #0A0A0A black base accented with electrifying neon hues. The vibrant #FF00FF (magenta), #00FFFF (cyan), #39FF14 (electric green), and #FFD700 (cyber gold) create an intense visual experience, reminiscent of a cyberpunk metropolis at night. This palette is designed for high-impact, modern, and edgy projects. Designers will find it ideal for creating dynamic digital interfaces, gaming environments, or branding that demands attention. Developers can leverage these bold contrasts to build immersive, tech-forward applications and websites with strong visual appeal.

Best used for

  • Cyberpunk game interfaces and assets
  • Tech startup branding
  • Futuristic event promotions
  • Music album covers (EDM, synthwave)
  • Digital art and graphic design with a dark theme
  • High-contrast web applications

Suggested color roles

primary

Use #0A0A0A as the dominant background, establishing a deep, dark foundation for neon elements.

secondary

Apply #FF00FF for prominent headings or interactive elements that demand immediate attention.

accent

Highlight key actions or notifications with #00FFFF or #39FF14 for a striking, futuristic glow.

background

Predominantly #0A0A0A to maximize the impact and luminosity of the neon accents.

text

Use #FF00FF, #00FFFF, #39FF14, or #FFD700 for text on the #0A0A0A background for maximum legibility and cyberpunk flair.

Accessibility notes

  • Ensure neon colors have sufficient contrast against #0A0A0A for text legibility.
  • Avoid using multiple neon colors in close proximity for extensive body text to prevent visual strain.
  • The contrast between #0A0A0A and all neon accents is generally high, promoting readability for headings.
  • Consider larger font sizes for neon text to enhance readability, especially for #FFD700.

Recommended combinations

Neon Grid

Perfect for digital displays, UI elements, or backgrounds emphasizing a tech-grid aesthetic.

#0A0A0A · #00FFFF · #39FF14

Cyber Glow

Ideal for striking headings, call-to-action buttons, or vibrant graphic accents.

#0A0A0A · #FF00FF · #FFD700

Dark Future

Excellent for creating a classic cyberpunk mood in interfaces or illustrations with strong visual impact.

#0A0A0A · #FF00FF · #00FFFF

CSS variables

:root {
  --neo-cyber-city-1: #0A0A0A;
  --neo-cyber-city-2: #FF00FF;
  --neo-cyber-city-3: #00FFFF;
  --neo-cyber-city-4: #39FF14;
  --neo-cyber-city-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neo-cyber-city": {
        1: "#0A0A0A",
        2: "#FF00FF",
        3: "#00FFFF",
        4: "#39FF14",
        5: "#FFD700",
      }
    }
  }
}

Related searches

cyberpunk color schemeneon black palettefuturistic UI colorsdark mode neon designtech glow palette

Palette colors

Hex values

Color 1#0A0A0A
·
Color 2#FF00FF
·
Color 3#00FFFF
·
Color 4#39FF14
·
Color 5#FFD700
·

Accessibility

Contrast checker

1
2
3
4
5
1
6.3:1AA
15.8:1AAA
14.6:1AAA
14.1:1AAA
2
6.3:1AA
2.5:1Fail
2.3:1Fail
2.2:1Fail
3
15.8:1AAA
2.5:1Fail
1.1:1Fail
1.1:1Fail
4
14.6:1AAA
2.3:1Fail
1.1:1Fail
1:1Fail
5
14.1:1AAA
2.2:1Fail
1.1:1Fail
1:1Fail

Similar palettes

More like Neo Cyber City

View all vibrant
Cybernetic Urban Glow
Cyberpunk Glitch
AI Data Stream
Cyber City Synth
Cyber Neon Glitch
Cyber Neon Pulse