Palette

Rainy Neon Reflex

Electric blues and purples mirroring the vibrant, blurred reflections of neon lights on a rainy city street.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rainy Neon Reflex 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 Rainy Neon Reflex.

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

Data visualization

#1A0F2B#3D1E5E#7A2BD9#CC00FF#00BFFF

Palette guide

How to use Rainy Neon Reflex

Overview

The Rainy Neon Reflex palette offers a high-energy, futuristic vibe, perfect for digital interfaces and vibrant branding. Anchored by the deep, mysterious #1A0F2B, it features rich purples like #3D1E5E and a striking #7A2BD9. The true stars are the electric neon accents: a vivid #CC00FF and a brilliant #00BFFF. This palette excels in creating dynamic contrasts, evoking the blurred, reflective glow of city lights on a wet night. Designers can leverage its depth and luminosity for impactful visual communication, from bold headlines to interactive elements, ensuring a modern and captivating user experience.

Best used for

High-tech branding and logos
Gaming UI and visual effects
Music festival promotions
Digital art and abstract designs
Sci-fi themed websites or apps
Nightlife event posters

Suggested color roles

primary

#1A0F2B - A deep, foundational dark purple, excellent for main backgrounds or large sections requiring a mysterious, sophisticated base.

secondary

#3D1E5E - A richer, mid-tone purple that adds depth and can be used for secondary panels, hover states, or subtle gradients.

accent

#CC00FF - A brilliant neon magenta, ideal for calls-to-action, highlights, or energetic graphical elements that demand attention.

background

#1A0F2B - Provides a dark, absorbing canvas that makes the neon accents truly pop, perfect for dark mode interfaces.

text

#00BFFF - A bright electric blue, highly effective for headlines and interactive text against dark backgrounds, or use a crisp white for body copy.

Accessibility notes

Ensure sufficient contrast when using #CC00FF or #00BFFF for text on #1A0F2B or #3D1E5E. Large text sizes are recommended.
Avoid placing #3D1E5E text directly on #1A0F2B as contrast might be too low for readability.
Use a stark white or very light gray for body text to maintain readability on dark backgrounds like #1A0F2B.
Consider alternative text colors for users with color vision deficiencies, especially when relying solely on neon accents.

Recommended combinations

Urban Glow

Creates a deep, moody base with vibrant, reflective highlights, perfect for modern digital interfaces and branding.

#1A0F2B · #7A2BD9 · #00BFFF

Energetic Pop

Delivers a powerful, high-contrast visual for interactive elements, buttons, and striking graphic accents.

#3D1E5E · #CC00FF · #00BFFF

Subtle Depth

Ideal for gradients or layered effects where a dark base provides depth for brighter transitions.

#1A0F2B · #3D1E5E · #7A2BD9

CSS variables

:root {
  --rainy-neon-reflex-1: #1A0F2B;
  --rainy-neon-reflex-2: #3D1E5E;
  --rainy-neon-reflex-3: #7A2BD9;
  --rainy-neon-reflex-4: #CC00FF;
  --rainy-neon-reflex-5: #00BFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainy-neon-reflex": {
        1: "#1A0F2B",
        2: "#3D1E5E",
        3: "#7A2BD9",
        4: "#CC00FF",
        5: "#00BFFF",
      }
    }
  }
}

Hex values

Color 1#1A0F2B

Color 2#3D1E5E

Color 3#7A2BD9

Color 4#CC00FF

Color 5#00BFFF

Accessibility

Contrast checker

1.3:1Fail

2.8:1Fail

4.4:1AA18

8.6:1AAA

1.3:1Fail

2.1:1Fail

3.2:1AA18

6.4:1AA

2.8:1Fail

2.1:1Fail

1.6:1Fail

3.1:1AA18

4.4:1AA18

3.2:1AA18

1.6:1Fail

2:1Fail

8.6:1AAA

6.4:1AA

3.1:1AA18

2:1Fail

Similar palettes

More like Rainy Neon Reflex

Electric Metropolis Glow