Palette

Neo Synth Grid

A vivid splash of electric blues and purples, capturing the buzzing energy of a futuristic, dark city grid at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neo Synth Grid 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 Synth Grid.

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

Data visualization

#1A0F2B#6A1B9A#EF33F0#1DE9B6#2E0B40

Palette guide

How to use Neo Synth Grid

Overview

The Neo Synth Grid palette conjures a vivid, retro-futuristic atmosphere, blending deep, dark purples with electrifying neon accents. It features the profound #1A0F2B and #2E0B40 as its base, punctuated by the vibrant #6A1B9A, glowing #EF33F0 (electric pink), and striking #1DE9B6 (aqua green). This palette is perfect for designs that evoke synthwave aesthetics, cyberpunk themes, or any project requiring a blend of mystery and energetic glow. Designers can create immersive interfaces, captivating branding, or dynamic digital art. Developers will find these colors ideal for dark mode applications, gaming UIs, or platforms aiming for a cutting-edge, nostalgic yet futuristic appeal.

Best used for

Synthwave music production visuals
Cyberpunk game environments
Retro-futuristic branding
Dark mode web and app interfaces
Event promotions (EDM, retro nights)
Sci-fi digital art and illustrations

Suggested color roles

primary

Use #1A0F2B as the dominant background, providing a deep, mysterious canvas for neon elements.

secondary

Apply #6A1B9A for prominent headings or UI sections, offering a rich purple depth.

accent

Highlight key interactive elements or calls-to-action with #EF33F0 or #1DE9B6 for an electrifying pop.

background

A dark base of #1A0F2B or #2E0B40 is essential to maximize the glow and impact of the neon accents.

text

For optimal legibility on dark backgrounds, use #EF33F0, #1DE9B6, or white. #6A1B9A can be used for secondary text if contrast allows.

Accessibility notes

Ensure high contrast between neon accents and dark backgrounds for all text elements.
Avoid using #6A1B9A for small text on #1A0F2B backgrounds without careful contrast checking.
The vibrant #EF33F0 and #1DE9B6 offer excellent visibility against the dark base colors.
Consider larger font sizes for neon text to enhance readability in high-energy contexts.

Recommended combinations

Synth Glow

Ideal for creating dynamic digital interfaces, loading screens, or futuristic visual effects.

#1A0F2B · #EF33F0 · #1DE9B6

Grid Pulse

Perfect for deep, moody backgrounds with vibrant highlights, evoking a sense of mystery and energy.

#2E0B40 · #6A1B9A · #EF33F0

Neon Abyss

Effective for branding or visuals needing a sophisticated yet energetic synthwave aesthetic.

#1A0F2B · #6A1B9A · #1DE9B6

CSS variables

:root {
  --neo-synth-grid-1: #1A0F2B;
  --neo-synth-grid-2: #6A1B9A;
  --neo-synth-grid-3: #EF33F0;
  --neo-synth-grid-4: #1DE9B6;
  --neo-synth-grid-5: #2E0B40;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neo-synth-grid": {
        1: "#1A0F2B",
        2: "#6A1B9A",
        3: "#EF33F0",
        4: "#1DE9B6",
        5: "#2E0B40",
      }
    }
  }
}

Hex values

Color 1#1A0F2B

Color 2#6A1B9A

Color 3#EF33F0

Color 4#1DE9B6

Color 5#2E0B40

Accessibility

Contrast checker

1.9:1Fail

5.6:1AA

11.7:1AAA

1.1:1Fail

1.9:1Fail

2.9:1Fail

6:1AA

1.8:1Fail

5.6:1AA

2.9:1Fail

2.1:1Fail

5.2:1AA

11.7:1AAA

6:1AA

2.1:1Fail

10.8:1AAA

1.1:1Fail

1.8:1Fail

5.2:1AA

10.8:1AAA

Similar palettes

More like Neo Synth Grid

View all vibrant

Digital Synthwave Horizon

Vaporwave Neon Horizon

Cyber Synth Glow

Cybernetic Gridscape

Cybernetic Vista Glow

Cyberpunk Afterglow