Palette

Future Noir Skyline

Blazing neons against a deep, dark backdrop, capturing the high-tech, low-life vibe of a cyberpunk city.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#FF00FF#33FF33#FFD700#1A1A1A

Palette guide

How to use Future Noir Skyline

Overview

The "Future Noir Skyline" is a high-octane palette that plunges into the heart of a cyberpunk city at night, where dazzling neons clash with deep shadows. With electric cyan #00FFFF, intense magenta #FF00FF, vivid green #33FF33, and a striking gold #FFD700, all set against a profound #1A1A1A, this palette screams high-tech and edgy. It's a perfect choice for designers and developers aiming to create visually arresting, dynamic, and modern aesthetics. This palette excels in projects that require a bold statement, evoking themes of technology, mystery, and vibrant urban decay.

Best used for

Cyberpunk game environments
Sci-fi movie posters or trailers
Music festival branding
Digital art and illustration
Vibrant dark mode interfaces
Tech event promotional materials

Suggested color roles

primary

#1A1A1A - The essential deep black, providing the dramatic backdrop that allows the neon colors to truly pop and glow with intensity.

secondary

#00FFFF - A brilliant electric cyan, excellent for main UI elements, interactive states, or to establish a futuristic, digital ambiance.

accent

#FF00FF - A powerful, vivid magenta, perfect for highlighting critical information, call-to-action buttons, or creating strong visual contrast and energy.

background

#1A1A1A - The primary canvas, creating an immersive, dark environment that enhances the luminosity of the accent colors.

text

#33FF33 - A sharp, neon green, ideal for headings, alerts, or key text on dark backgrounds, offering high readability and a distinct tech-infused glow.

Accessibility notes

Crucially ensure all neon colors (#00FFFF, #FF00FF, #33FF33, #FFD700) have excellent contrast when used for text against #1A1A1A.
Avoid using lighter neon colors for small text or critical information if contrast is borderline.
For extensive body text on #1A1A1A, a simple white or light grey might be more comfortable than a strong neon.
Maintain distinct visual cues for interactive states using these vibrant colors to guide users effectively.

Recommended combinations

Cyber Glow

Perfect for a high-contrast UI, with #1A1A1A as the base, #00FFFF for primary elements, and #FF00FF for alerts or hover states.

#1A1A1A · #00FFFF · #FF00FF

Tech Pulse

Great for dynamic digital displays or dashboards, using the green and gold for data visualization against a dark backdrop.

#33FF33 · #FFD700 · #1A1A1A

Noir Spectrum

Ideal for creating striking gradients or color overlays in futuristic artwork or website hero sections, blending the vibrant neons.

#00FFFF · #FF00FF · #33FF33

CSS variables

:root {
  --future-noir-skyline-1: #00FFFF;
  --future-noir-skyline-2: #FF00FF;
  --future-noir-skyline-3: #33FF33;
  --future-noir-skyline-4: #FFD700;
  --future-noir-skyline-5: #1A1A1A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "future-noir-skyline": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#33FF33",
        4: "#FFD700",
        5: "#1A1A1A",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#33FF33

Color 4#FFD700

Color 5#1A1A1A

Accessibility

Contrast checker

2.5:1Fail

1.1:1Fail

13.9:1AAA

2.5:1Fail

2.3:1Fail

2.2:1Fail

5.5:1AA

1.1:1Fail

2.3:1Fail

1:1Fail

12.8:1AAA

1.1:1Fail

2.2:1Fail

1:1Fail

12.4:1AAA

13.9:1AAA

5.5:1AA

12.8:1AAA

12.4:1AAA

Similar palettes

More like Future Noir Skyline

Future Noir Skyline

See it in context.

Ready when you are.

Built with Future Noir Skyline.

How to use Future Noir Skyline

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cyber Glow

Tech Pulse

Noir Spectrum

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Future Noir Skyline