Palette

Retro Comic Brights

Bold, primary colors with a hint of pop art, perfect for recreating the vivid punch of retro comic books.

VibrantEnergetic5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#0000FF#FFFF00#00FF00#000000

Palette guide

How to use Retro Comic Brights

Overview

The "Retro Comic Brights" palette is a high-octane collection of classic primary and secondary colors, designed to capture the vivid, punchy essence of vintage comic books and pop art. Featuring a powerful red (#FF0000), a deep blue (#0000FF), a bright yellow (#FFFF00), an energetic green (#00FF00), and a grounding black (#000000), this palette is built for maximum visual impact. Designers will find these hues perfect for creating bold, dynamic visuals with a strong graphic presence. Developers can leverage these distinct, highly saturated colors to establish clear visual hierarchies, highlight interactive elements, and build interfaces that are both engaging and memorable, brimming with energetic charm.

Best used for

Comic book character design
Retro gaming assets
Bold social media campaigns
Children's educational apps
Pop art murals or illustrations
Event branding with a playful edge

Suggested color roles

primary

A dominant, energetic primary for headlines, calls-to-action, or hero sections using #FF0000.

secondary

A strong, cool secondary for navigation, subheadings, or contrasting background panels using #0000FF.

accent

A vivid, attention-grabbing accent for highlights, interactive elements, or graphic details using #00FF00.

background

A highly energetic background for sections demanding immediate attention using #FFFF00, or as a vibrant base. For general backgrounds, consider a light neutral, using this for overlays.

text

Use #000000 for text on #FFFF00 and #00FF00. White or very light grey text provides excellent contrast on #FF0000, #0000FF, and #000000.

Accessibility notes

#FFFF00 and #00FF00 provide very low contrast with white text; always use black text for readability.
White text on #FF0000 and #0000FF offers good contrast, but verify against WCAG AA standards for critical information.
Avoid using #00FF00 as a background for extensive body text due to its intensity and potential for eye strain.
Test all text and interactive element contrasts to ensure accessibility, particularly with the bright primary colors.

Recommended combinations

Action Button

Red for the main button, black for text, and yellow for an impactful highlight or icon.

#FF0000 · #000000 · #FFFF00

Comic Panel Border

Black for strong borders, green for background fill, and blue for character elements or speech bubbles.

#000000 · #00FF00 · #0000FF

Energetic Layout

Yellow for a background section, red for a prominent graphic or headline, and blue for supporting text.

#FFFF00 · #FF0000 · #0000FF

CSS variables

:root {
  --retro-comic-brights-1: #FF0000;
  --retro-comic-brights-2: #0000FF;
  --retro-comic-brights-3: #FFFF00;
  --retro-comic-brights-4: #00FF00;
  --retro-comic-brights-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-comic-brights": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#00FF00",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#00FF00

Color 5#000000

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

2.9:1Fail

5.3:1AA

2.1:1Fail

8:1AAA

6.3:1AA

2.4:1Fail

3.7:1AA18

8:1AAA

1.3:1Fail

19.6:1AAA

2.9:1Fail

6.3:1AA

1.3:1Fail

15.3:1AAA

5.3:1AA

2.4:1Fail

19.6:1AAA

15.3:1AAA

Similar palettes

More like Retro Comic Brights

View all Vibrant

City Night Electric

Aurora Blossom Dreams