Palette

Vintage Comic Pop

Bold, dynamic blues and shocking pink, channeling the energetic flair of classic comic books.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A0CA3#4361EE#4CC9F0#F72585#3D0F70

Palette guide

How to use Vintage Comic Pop

Overview

The "Vintage Comic Pop" palette offers a sophisticated yet energetic take on classic comic aesthetics, blending deep purples and blues with a shocking pink. Key colors include a rich indigo (#3A0CA3), a vibrant royal blue (#4361EE), a bright sky blue (#4CC9F0), a bold fuchsia (#F72585), and a dark violet (#3D0F70). This collection is perfect for designers and developers aiming for a playful, modern retro feel without being overtly primary. It provides excellent depth and contrast, ideal for digital interfaces, branding, or illustrations that demand a unique, memorable color signature. The interplay of cool blues and warm pink creates a dynamic visual tension.

Best used for

Modern retro branding and logos
App designs with a playful, vibrant theme
Digital illustrations and character design
Fashion and beauty marketing materials
Youth-oriented product packaging
Website headers and interactive elements

Suggested color roles

primary

Use #F72585 for high-impact calls-to-action or standout graphical elements, drawing immediate attention.

secondary

Employ #4361EE for main sections or prominent UI components, offering a strong, stable presence.

accent

#4CC9F0 is excellent for highlights, small icons, or progress indicators, providing a bright, refreshing pop.

background

#3A0CA3 or #3D0F70 can serve as deep, moody backgrounds, allowing brighter colors to truly shine.

text

For dark backgrounds like #3A0CA3 or #3D0F70, use #4CC9F0 or white for readability. For lighter areas, a deep charcoal or #3D0F70 works well.

Accessibility notes

Ensure sufficient contrast when using #4CC9F0 (light blue) text on lighter backgrounds.
Verify that #F72585 (pink) text has adequate contrast on backgrounds like #4CC9F0.
Darker shades like #3A0CA3 and #3D0F70 provide good contrast for light text, such as white or #4CC9F0.
Consider larger font sizes for text elements using colors with lower contrast ratios within the palette.

Recommended combinations

Electric Pop

For vibrant hero sections or interactive elements, creating a strong, modern-retro statement.

#F72585 · #4361EE · #4CC9F0

Deep Contrast

Ideal for impactful headlines and sub-elements against a deep, rich background.

#3A0CA3 · #F72585 · #4CC9F0

Subtle Dynamics

Great for a cohesive, cool-toned design with subtle depth and brighter accents.

#3D0F70 · #4361EE · #4CC9F0

CSS variables

:root {
  --vintage-comic-pop-3-1: #3A0CA3;
  --vintage-comic-pop-3-2: #4361EE;
  --vintage-comic-pop-3-3: #4CC9F0;
  --vintage-comic-pop-3-4: #F72585;
  --vintage-comic-pop-3-5: #3D0F70;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-comic-pop-3": {
        1: "#3A0CA3",
        2: "#4361EE",
        3: "#4CC9F0",
        4: "#F72585",
        5: "#3D0F70",
      }
    }
  }
}

Hex values

Color 1#3A0CA3

Color 2#4361EE

Color 3#4CC9F0

Color 4#F72585

Color 5#3D0F70

Accessibility

Contrast checker

2.4:1Fail

6.2:1AA

3.2:1AA18

1.2:1Fail

2.4:1Fail

2.6:1Fail

1.3:1Fail

2.8:1Fail

6.2:1AA

2.6:1Fail

2:1Fail

7.3:1AAA

3.2:1AA18

1.3:1Fail

2:1Fail

3.7:1AA18

1.2:1Fail

2.8:1Fail

7.3:1AAA

3.7:1AA18

Similar palettes

More like Vintage Comic Pop