Palette

Neon Arcade Bliss

Explosive, electric colors pulsate with the exciting energy of a classic retro arcade at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon Arcade Bliss 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 Arcade Bliss.

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

Data visualization

#FF006E#FFBE0B#3A86FF#8338EC#FB5607

Palette guide

How to use Neon Arcade Bliss

Overview

The Neon Arcade Bliss palette pulsates with the exciting energy of a classic retro arcade at night, offering an explosive, electric mix of bright colors. It features vibrant #FF006E (Neon Pink), sunny #FFBE0B (Arcade Yellow), striking #3A86FF (Electric Blue), rich #8338EC (Deep Violet), and fiery #FB5607 (Bright Orange). This high-energy collection is perfect for designers and developers looking to inject projects with a sense of playful nostalgia and dynamic vibrancy. Ideal for gaming interfaces, youth-oriented branding, or any design that needs to feel immediate and exciting, these colors demand attention and create an unforgettable visual impact.

Best used for

Retro gaming website and app design
Youth-oriented brand identity and marketing
Event posters for concerts or parties
Animated graphics and motion design
Product packaging for toys or tech gadgets
Digital illustrations with a vibrant, playful mood

Suggested color roles

primary

Use #FF006E (Neon Pink) or #3A86FF (Electric Blue) as a dominant color for backgrounds or large graphical elements to set a high-energy tone.

secondary

Employ #FFBE0B (Arcade Yellow) for secondary navigation, highlights, or key information to draw the eye with its bright warmth.

accent

Apply #FB5607 (Bright Orange) sparingly for call-to-action buttons, alerts, or small, impactful details, ensuring maximum visibility.

background

Dark grey or black backgrounds are highly recommended to make these neon colors glow intensely and achieve optimal contrast.

text

For general text, use white or a very light grey on dark backgrounds. For headings or emphasis, #8338EC (Deep Violet) can provide a rich, legible contrast on lighter elements or as a subtle glow on darks.

Accessibility notes

Ensure high contrast ratios for text and interactive elements, especially when pairing bright neons, to meet accessibility standards.
Avoid using these bright colors for large blocks of body text directly on other bright colors, as it can cause significant eye strain.
Always test readability across different screen types and lighting conditions, as neon colors can vary in appearance.
Provide clear visual hierarchy; use the most vibrant colors for key actions or information, and more subdued options for less critical content.

Recommended combinations

Arcade Pop

Creates a warm, energetic, and playful vibe, perfect for retro game titles or vibrant logos.

#FF006E · #FFBE0B · #FB5607

Cyber Glow

Ideal for a cool-toned, futuristic aesthetic, excellent for digital interfaces or sci-fi themes.

#3A86FF · #8338EC · #FF006E

Power Up

A balanced, dynamic trio that suggests energy and action, great for interactive elements or progress bars.

#FFBE0B · #3A86FF · #FB5607

CSS variables

:root {
  --neon-arcade-bliss-1: #FF006E;
  --neon-arcade-bliss-2: #FFBE0B;
  --neon-arcade-bliss-3: #3A86FF;
  --neon-arcade-bliss-4: #8338EC;
  --neon-arcade-bliss-5: #FB5607;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-arcade-bliss": {
        1: "#FF006E",
        2: "#FFBE0B",
        3: "#3A86FF",
        4: "#8338EC",
        5: "#FB5607",
      }
    }
  }
}

Hex values

Color 1#FF006E

Color 2#FFBE0B

Color 3#3A86FF

Color 4#8338EC

Color 5#FB5607

Accessibility

Contrast checker

2.3:1Fail

1.1:1Fail

1.5:1Fail

1.2:1Fail

2.3:1Fail

2.1:1Fail

3.4:1AA18

2:1Fail

1.1:1Fail

2.1:1Fail

1.6:1Fail

1.1:1Fail

1.5:1Fail

3.4:1AA18

1.6:1Fail

1.7:1Fail

1.2:1Fail

2:1Fail

1.1:1Fail

1.7:1Fail

Similar palettes

More like Neon Arcade Bliss

Neon Arcade Bliss

See it in context.

Ready when you are.

Built with Neon Arcade Bliss.

How to use Neon Arcade Bliss

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Arcade Pop

Cyber Glow

Power Up

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Neon Arcade Bliss