Palette

Neon City Grid

A dynamic blend of electric blues, reds, and yellows, capturing the glowing energy of a neon city grid.

VibrantEnergetic5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon City 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 Neon City Grid.

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

Data visualization

#1A237E#F44336#FFEB3B#00BCD4#E040FB

Palette guide

How to use Neon City Grid

Overview

The Neon City Grid palette offers a dynamic blend of electric blues, reds, and yellows, perfectly capturing the glowing energy of a futuristic urban landscape. Featuring a deep #1A237E (indigo) base, vibrant #F44336 (red), bright #FFEB3B (yellow), cool #00BCD4 (cyan), and striking #E040FB (purple), this palette is designed for impact. Designers and developers can utilize these highly contrasting colors to create compelling tech branding, dynamic digital interfaces, or captivating visual content that reflects an energetic and modern aesthetic. It's an ideal choice for projects seeking a bold, electric, and urban feel.

Best used for

Tech company branding and websites
Digital dashboards and data visualization
Futuristic game UI and asset design
Event invitations and promotional materials
Urban-themed digital art and illustrations
Interactive kiosks and smart city displays

Suggested color roles

primary

Use #1A237E (Indigo) as the foundational dark blue, providing depth and stability for main layouts and backgrounds.

secondary

Employ #00BCD4 (Cyan) for secondary navigation, status indicators, or to add a cool, digital glow to elements.

accent

Apply #F44336 (Red) for urgent alerts, call-to-action buttons, or to highlight critical information with high energy.

background

Utilize #1A237E (Indigo) as the primary background color, allowing the brighter neon accents to stand out vividly.

text

For headlines, #FFEB3B (Yellow) offers excellent visibility. For body text, white or a light gray ensures readability on the dark blue.

Accessibility notes

Ensure all bright colors like #F44336, #FFEB3B, #00BCD4, and #E040FB have sufficient contrast against the #1A237E background.
Avoid using #F44336 and #E040FB in close proximity for critical information, as their distinction might be difficult for some colorblind users.
For long-form text, use a light, neutral color such as white or a very light gray on the #1A237E background.
Test text legibility for #FFEB3B against #1A237E to ensure it meets WCAG AA or AAA standards for optimal readability.

Recommended combinations

Core Grid Display

Ideal for primary UI elements, navigation, and data displays in a tech-focused interface.

#1A237E · #00BCD4 · #FFEB3B

Alert & Emphasis

Perfect for warning messages, error states, and high-priority call-to-action buttons.

#F44336 · #FFEB3B · #1A237E

Electric Accent

Excellent for subtle glowing effects, secondary interactive elements, or stylish graphic accents.

#E040FB · #00BCD4 · #1A237E

CSS variables

:root {
  --neon-city-grid-2-1: #1A237E;
  --neon-city-grid-2-2: #F44336;
  --neon-city-grid-2-3: #FFEB3B;
  --neon-city-grid-2-4: #00BCD4;
  --neon-city-grid-2-5: #E040FB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-grid-2": {
        1: "#1A237E",
        2: "#F44336",
        3: "#FFEB3B",
        4: "#00BCD4",
        5: "#E040FB",
      }
    }
  }
}

Hex values

Color 1#1A237E

Color 2#F44336

Color 3#FFEB3B

Color 4#00BCD4

Color 5#E040FB

Accessibility

Contrast checker

3.6:1AA18

10.8:1AAA

5.8:1AA

4:1AA18

3.6:1AA18

3:1AA18

1.6:1Fail

1.1:1Fail

10.8:1AAA

3:1AA18

1.9:1Fail

2.7:1Fail

5.8:1AA

1.6:1Fail

1.9:1Fail

1.5:1Fail

4:1AA18

1.1:1Fail

2.7:1Fail

1.5:1Fail

Similar palettes

More like Neon City Grid

View all Vibrant

Neon City Glimmer

Cybernetic Chroma Burst

Glitch System Interface

City Night Electric

Cyberpunk Alley Glow

Electric City Nights