Palette

Vintage Comic Strip

Stark contrasts of primary colors and creamy neutrals recall the dynamic energy of old comic books.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0E0D0#FF0000#0000FF#FFFF00#000000

Palette guide

How to use Vintage Comic Strip

Overview

The "Vintage Comic Strip" palette perfectly captures the dynamic, high-contrast essence of classic comic panels. It features a warm, creamy neutral (#F0E0D0), a vibrant primary red (#FF0000), a strong primary blue (#0000FF), a bright yellow (#FFFF00), and a grounding black (#000000). This palette is excellent for designers and developers seeking to evoke nostalgia and playful energy. Its stark contrasts and iconic primary colors make it highly effective for creating engaging digital experiences, retro branding, or print materials that pop off the page, reminiscent of a bygone era of sequential art.

Best used for

Newspaper comic strip digitization projects
Retro game interfaces and character design
Children's book illustrations and educational apps
Brand identity for toy stores or vintage shops
Event flyers and posters with a playful vibe
Social media templates for nostalgic content

Suggested color roles

primary

Use #FF0000 for impactful calls-to-action or critical warnings, demanding attention.

secondary

Employ #0000FF for important headings or interactive elements, providing a strong counterpoint.

accent

#FFFF00 is ideal for highlights, small icons, or decorative elements, adding a vibrant, sunny pop.

background

#F0E0D0 offers a soft, aged paper-like backdrop, allowing the bold primaries to stand out.

text

For #F0E0D0 or #FFFF00, #000000 provides excellent contrast. For #FF0000 or #0000FF, white text is most readable.

Accessibility notes

Ensure #FFFF00 (yellow) text is only used on very dark backgrounds like #000000 for sufficient contrast.
#F0E0D0 (cream) provides good contrast for #000000 (black) text, but check for other color pairings.
Avoid placing #FF0000 (red) directly next to #00FF00 (green, if present) for important elements; here, red and blue are fine.
Always verify contrast ratios for text and interactive elements, especially when using primary colors on top of each other.

Recommended combinations

Classic Panel

For creating a traditional comic panel look with strong outlines and a warm base.

#F0E0D0 · #000000 · #FF0000

Dynamic Pop

Ideal for vibrant calls-to-action or energetic graphical elements that need to stand out.

#FF0000 · #0000FF · #FFFF00

Neutral Contrast

Perfect for clean content blocks where readability and a touch of retro color are desired.

#F0E0D0 · #0000FF · #000000

CSS variables

:root {
  --vintage-comic-strip-1: #F0E0D0;
  --vintage-comic-strip-2: #FF0000;
  --vintage-comic-strip-3: #0000FF;
  --vintage-comic-strip-4: #FFFF00;
  --vintage-comic-strip-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-comic-strip": {
        1: "#F0E0D0",
        2: "#FF0000",
        3: "#0000FF",
        4: "#FFFF00",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#F0E0D0

Color 2#FF0000

Color 3#0000FF

Color 4#FFFF00

Color 5#000000

Accessibility

Contrast checker

3.1:1AA18

6.7:1AA

1.2:1Fail

16.3:1AAA

3.1:1AA18

2.1:1Fail

3.7:1AA18

5.3:1AA

6.7:1AA

2.1:1Fail

8:1AAA

2.4:1Fail

1.2:1Fail

3.7:1AA18

8:1AAA

19.6:1AAA

16.3:1AAA

5.3:1AA

2.4:1Fail

19.6:1AAA

Similar palettes

More like Vintage Comic Strip