Palette

Electro Pop Arcade

Bright, contrasting colors bursting with the playful, electric energy of an old arcade.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Electro Pop Arcade 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 Electro Pop Arcade.

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

Data visualization

#E63946#F1FAEE#A8DADC#457B9D#1D3557

Palette guide

How to use Electro Pop Arcade

Overview

The Electro Pop Arcade palette bursts with the playful, electric energy of an old arcade, offering a unique blend of bright, contrasting colors. This collection features a striking rich red (#E63946), a soft near-white (#F1FAEE), a calming light blue (#A8DADC), a deep muted blue (#457B9D), and a sophisticated dark blue (#1D3557). It's an ideal choice for designs that aim for a retro yet fresh aesthetic, balancing vibrancy with approachability. Designers and developers can leverage these hues to create engaging interfaces, fun branding, or inviting digital content that evokes nostalgia while remaining distinctly modern. The mix of bright and subdued tones ensures versatility.

Best used for

Retro-themed branding and logos
Children's educational app interfaces
Casual gaming UI and assets
Creative agency websites and portfolios
Product packaging with a playful vintage feel
Social media graphics for youthful brands

Suggested color roles

primary

The sophisticated dark blue (#1D3557) can serve as a strong base, while rich red (#E63946) is excellent for prominent calls-to-action or key brand elements.

secondary

Deep muted blue (#457B9D) offers a versatile secondary color for larger content blocks or navigation, providing stability.

accent

Rich red (#E63946) provides a vibrant, playful accent, perfect for highlights, interactive elements, or warnings.

background

Soft near-white (#F1FAEE) provides a clean, inviting background that allows the other colors to stand out gently.

text

Use sophisticated dark blue (#1D3557) or deep muted blue (#457B9D) for body text on light backgrounds (#F1FAEE) for excellent readability. White text works well on #1D3557.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing #A8DADC with #F1FAEE, which may have low contrast.
Use #1D3557 or #457B9D for body text on light backgrounds for optimal WCAG compliance.
Avoid using #E63946 for extensive body text due to its vibrancy; reserve it for headings or accents.
Test all color combinations for interactive elements to ensure they meet contrast requirements.

Recommended combinations

Retro Play

Ideal for creating a clean, fun aesthetic with a pop of color for headings or interactive elements against a light background.

#F1FAEE · #E63946 · #457B9D

Arcade Depth

Excellent for layered designs, dark mode interfaces, or illustrations that need depth and a vibrant accent.

#1D3557 · #A8DADC · #E63946

Cool Balance

Perfect for creating serene yet engaging backgrounds or content blocks, maintaining a calm and clear visual hierarchy.

#F1FAEE · #A8DADC · #457B9D

CSS variables

:root {
  --electro-pop-arcade-1: #E63946;
  --electro-pop-arcade-2: #F1FAEE;
  --electro-pop-arcade-3: #A8DADC;
  --electro-pop-arcade-4: #457B9D;
  --electro-pop-arcade-5: #1D3557;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electro-pop-arcade": {
        1: "#E63946",
        2: "#F1FAEE",
        3: "#A8DADC",
        4: "#457B9D",
        5: "#1D3557",
      }
    }
  }
}

Hex values

Color 1#E63946

Color 2#F1FAEE

Color 3#A8DADC

Color 4#457B9D

Color 5#1D3557

Accessibility

Contrast checker

3.9:1AA18

2.7:1Fail

1.1:1Fail

3:1Fail

3.9:1AA18

1.4:1Fail

4.3:1AA18

11.6:1AAA

2.7:1Fail

1.4:1Fail

3:1AA18

8.1:1AAA

1.1:1Fail

4.3:1AA18

3:1AA18

2.7:1Fail

3:1Fail

11.6:1AAA

8.1:1AAA

2.7:1Fail

Similar palettes

More like Electro Pop Arcade

Electro Pop Arcade

See it in context.

Ready when you are.

Built with Electro Pop Arcade.

How to use Electro Pop Arcade

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Retro Play

Arcade Depth

Cool Balance

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Electro Pop Arcade