Palette

Comic Pop Boom

Bold, high-contrast colors and a deep black outline the energetic, graphic style of classic comic book art.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F9DC5C#F29D1C#F72C09#D80E09#262626

Palette guide

How to use Comic Pop Boom

Overview

The Comic Pop Boom palette features bold, high-contrast colors and a deep black outline, embodying the energetic, graphic style of classic comic book art. With a bright #F9DC5C (yellow), vibrant #F29D1C (orange), two impactful reds #F72C09 and #D80E09, and the grounding #262626 (deep charcoal), this palette is inherently playful and dynamic. Designers can leverage these strong hues to create exciting and engaging designs, perfect for conveying action, retro charm, and a pop art aesthetic. Developers will find these colors versatile for creating engaging digital experiences, from game interfaces to promotional materials, with a clear, direct visual language.

Best used for

Comic-themed games and apps
Pop art posters and advertising
Children's books and media
Dynamic web elements and animations
Youth-oriented branding
Fast-food or snack packaging

Suggested color roles

primary

Use #262626 as a strong primary for outlines and backgrounds, grounding the vibrant hues. #F72C09 can be a bold primary for action.

secondary

Apply #F9DC5C or #F29D1C for subheadings, larger content blocks, or secondary elements, maintaining visual excitement.

accent

Introduce #D80E09 or #F72C09 for speech bubbles, highlights, call-to-action buttons, or dramatic effects to provide a powerful pop.

background

The solid #262626 provides an excellent, high-contrast backdrop, making all other colors truly stand out. A bright #F9DC5C can also serve as a lively background.

text

For optimal readability, use white or #262626 text on #F9DC5C. White text works well on the reds and orange. Avoid red text on orange.

Accessibility notes

Ensure sufficient contrast for text, especially when using yellow (#F9DC5C) which requires very dark text (e.g., #262626 or black).
Avoid pairing #F72C09 and #D80E09 for small text due to their close proximity in value and hue.
White text on #262626, #F72C09, or #F29D1C generally provides excellent contrast.
Limit the use of highly saturated colors for large blocks of body text to prevent eye strain.

Recommended combinations

Boom Pop

Creates an explosive, energetic look, ideal for bold headlines or attention-grabbing calls to action.

#262626 · #F9DC5C · #F72C09

Retro Burst

Perfect for dynamic backgrounds and graphic elements, offering a warm and lively feel.

#F9DC5C · #F29D1C · #D80E09

Bold Outline

Use for strong outlines and vibrant fills, providing a clear, comic-style visual separation.

#262626 · #F29D1C · #F72C09

CSS variables

:root {
  --comic-pop-boom-1: #F9DC5C;
  --comic-pop-boom-2: #F29D1C;
  --comic-pop-boom-3: #F72C09;
  --comic-pop-boom-4: #D80E09;
  --comic-pop-boom-5: #262626;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "comic-pop-boom": {
        1: "#F9DC5C",
        2: "#F29D1C",
        3: "#F72C09",
        4: "#D80E09",
        5: "#262626",
      }
    }
  }
}

Hex values

Color 1#F9DC5C

Color 2#F29D1C

Color 3#F72C09

Color 4#D80E09

Color 5#262626

Accessibility

Contrast checker

1.6:1Fail

2.9:1Fail

3.9:1AA18

11.1:1AAA

1.6:1Fail

1.8:1Fail

2.4:1Fail

6.9:1AA

2.9:1Fail

1.8:1Fail

1.3:1Fail

3.8:1AA18

3.9:1AA18

2.4:1Fail

1.3:1Fail

2.9:1Fail

11.1:1AAA

6.9:1AA

3.8:1AA18

2.9:1Fail

Similar palettes

More like Comic Pop Boom

Comic Pop Boom

See it in context.

Ready when you are.

Built with Comic Pop Boom.

How to use Comic Pop Boom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Boom Pop

Retro Burst

Bold Outline

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Comic Pop Boom