Palette

Tropical Fizz Burst

An explosion of hot, juicy colors like a burst of exotic tropical fruits and fizzy drinks.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tropical Fizz Burst 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 Tropical Fizz Burst.

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

Data visualization

#FFC300#FF5733#C70039#900C3F#581845

Palette guide

How to use Tropical Fizz Burst

Overview

The Tropical Fizz Burst palette is an explosion of hot, juicy colors, reminiscent of exotic tropical fruits and fizzy drinks. Featuring a bright golden yellow #FFC300, a vibrant coral-orange #FF5733, and a deep berry red #C70039, this collection is designed for projects that demand high energy, playfulness, and a touch of sophisticated drama. Designers and developers can leverage these dynamic hues to create captivating digital experiences, bold branding, or compelling marketing materials that evoke excitement and a sense of indulgence. The interplay of bright and deep tones creates a rich, impactful visual narrative.

Best used for

Cocktail bar branding and menus
Summer fashion campaigns and lookbooks
Digital marketing for energetic products
Event promotions (parties, concerts)
Creative packaging design for beverages
Food and beverage advertising

Suggested color roles

primary

Use #FF5733 as a vibrant coral-orange primary for calls-to-action, prominent headings, or brand logos, conveying energetic boldness.

secondary

Employ #C70039 as a deep berry red secondary for supportive elements, background sections, or sophisticated accents.

accent

Apply #FFC300 as a bright golden yellow accent for interactive elements, hover states, or to simulate a fizzy, effervescent pop.

background

A dark neutral like charcoal or black, or a deep #581845, provides a sophisticated base that makes the bright colors truly burst.

text

White or light gray text works best on darker colors like #C70039, #900C3F, and #581845. Dark text is essential on #FFC300 for readability.

Accessibility notes

#FFC300 (yellow) requires dark text (e.g., black) for optimal readability across all sizes.
The darker shades #C70039, #900C3F, and #581845 provide excellent contrast with white or light-colored text.
Avoid using #FF5733 text on #FFC300 backgrounds due to low contrast, which will hinder readability.
Ensure sufficient contrast when pairing adjacent dark shades like #900C3F and #581845 for UI elements or background patterns.

Recommended combinations

Berry Fizz

Combines deep red with bright yellow and dark violet for a rich, energetic, and sophisticated feel.

#C70039 · #FFC300 · #581845

Juicy Burst

Energetic orange and deep magenta with sunny yellow, evoking a juicy, vibrant tropical fruit mix.

#FF5733 · #900C3F · #FFC300

Deep Refresher

A dark, elegant base with vibrant orange and rich red accents for a dramatic and impactful design.

#581845 · #FF5733 · #C70039

CSS variables

:root {
  --tropical-fizz-burst-1: #FFC300;
  --tropical-fizz-burst-2: #FF5733;
  --tropical-fizz-burst-3: #C70039;
  --tropical-fizz-burst-4: #900C3F;
  --tropical-fizz-burst-5: #581845;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-fizz-burst": {
        1: "#FFC300",
        2: "#FF5733",
        3: "#C70039",
        4: "#900C3F",
        5: "#581845",
      }
    }
  }
}

Hex values

Color 1#FFC300

Color 2#FF5733

Color 3#C70039

Color 4#900C3F

Color 5#581845

Accessibility

Contrast checker

2:1Fail

3.7:1AA18

5.7:1AA

8:1AAA

2:1Fail

1.9:1Fail

2.9:1Fail

4.1:1AA18