Palette

Retro Comic Pop

Punchy and graphic, reminiscent of classic comic book panels with their iconic, bold color schemes.

Vibrantplayful5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Comic Pop 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 Retro Comic Pop.

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

Data visualization

#E74C3C#3498DB#F1C40F#000000#ECF0F1

Palette guide

How to use Retro Comic Pop

Overview

The Retro Comic Pop palette is punchy and graphic, reminiscent of classic comic book panels with their iconic, bold color schemes. This palette features a strong #E74C3C (red), vivid #3498DB (blue), bright #F1C40F (yellow), a foundational #000000 (black), and a clean #ECF0F1 (light gray). The inclusion of black and a versatile light gray makes it exceptionally strong for designs requiring clear outlines and high contrast. Designers and developers will find this palette excellent for creating impactful visuals with clear hierarchy and a distinct retro appeal.

Best used for

Graphic novels and comic art
App icons and branding
Designs with strong outlines
Retro poster creation
Web design with clear hierarchy
Merchandise and product packaging

Suggested color roles

primary

#E74C3C is ideal for main branding elements, calls-to-action, or any feature requiring immediate attention.

secondary

#3498DB provides robust support for navigational elements, subheadings, or distinct content blocks.

accent

#F1C40F serves as a bright accent for highlights, interactive components, or playful graphic details.

background

#ECF0F1 offers a clean, light base, while #000000 creates dramatic, high-contrast backdrops.

text

Use #000000 for maximum readability on light backgrounds like #ECF0F1; use white for text on dark backgrounds.

Accessibility notes

#E74C3C, #3498DB, and #F1C40F all contrast well with both #000000 and #ECF0F1 for text.
Ensure sufficient contrast for text on #F1C40F backgrounds; black text is usually the best choice.
#000000 as a background color will require light-colored text (e.g., #ECF0F1 or white) for readability.
Avoid using #F1C40F for small text on a light background like #ECF0F1 due to potential low contrast.

Recommended combinations

Classic Trio

Perfect for comic book covers, bold illustrations, or energetic graphic elements.

#E74C3C · #3498DB · #F1C40F

High Contrast

Excellent for striking headers, strong typography, or impactful visual statements.

#000000 · #ECF0F1 · #E74C3C

Vibrant Pop

Ideal for informational graphics, playful UI elements, or distinct content blocks.

#F1C40F · #3498DB · #ECF0F1

CSS variables

:root {
  --retro-comic-pop-3-1: #E74C3C;
  --retro-comic-pop-3-2: #3498DB;
  --retro-comic-pop-3-3: #F1C40F;
  --retro-comic-pop-3-4: #000000;
  --retro-comic-pop-3-5: #ECF0F1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-comic-pop-3": {
        1: "#E74C3C",
        2: "#3498DB",
        3: "#F1C40F",
        4: "#000000",
        5: "#ECF0F1",
      }
    }
  }
}

Hex values

Color 1#E74C3C

Color 2#3498DB

Color 3#F1C40F

Color 4#000000

Color 5#ECF0F1

Accessibility

Contrast checker

1.2:1Fail

2.3:1Fail

5.5:1AA

3.3:1AA18

1.2:1Fail

1.9:1Fail

6.7:1AA

2.7:1Fail

2.3:1Fail

1.9:1Fail

12.6:1AAA

1.4:1Fail

5.5:1AA

6.7:1AA

12.6:1AAA

18.3:1AAA

3.3:1AA18

2.7:1Fail

1.4:1Fail

18.3:1AAA

Similar palettes

More like Retro Comic Pop

View all Vibrant

Bubblegum Pop Blast

Playful Gumball Brights