Palette

Tropical Fruit Burst

An energetic burst of colors, reminiscent of exotic fruits and lively celebrations.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF5733#FFC300#DAF7A6#C70039#900C3F

Palette guide

How to use Tropical Fruit Burst

Overview

The "Tropical Fruit Burst" palette offers an energetic burst of colors, reminiscent of exotic fruits and lively celebrations. This dynamic scheme features a bold orange-red (#FF5733), a cheerful gold (#FFC300), and a refreshing pale lime green (#DAF7A6). It's anchored by a deep red (#C70039) and a rich maroon (#900C3F), adding sophistication and depth. Designers and developers can harness this palette to create vibrant, playful, and impactful digital or print designs. It's particularly effective for projects that need to convey excitement, festivity, and a contemporary tropical vibe, ensuring a memorable and engaging visual experience.

Best used for

Festival and event branding
Vibrant product packaging
Creative marketing campaigns
Playful e-commerce interfaces
Exotic food and beverage promotions
Youth-oriented digital content

Suggested color roles

primary

Use #FF5733 (Orange-Red) for main calls-to-action, headings, or key graphical elements, conveying energy and excitement.

secondary

Apply #FFC300 (Gold) for secondary accents, background elements, or to highlight important information with warmth.

accent

Incorporate #DAF7A6 (Pale Lime Green) for refreshing contrasts, icons, or subtle background patterns, offering visual balance.

background

Utilize #DAF7A6 (Pale Lime Green) as a light, clean base, allowing the bolder colors to pop, or a crisp off-white.

text

For light backgrounds, #900C3F (Deep Maroon) or black provides excellent readability. For darker elements, white text is recommended.

Accessibility notes

Ensure sufficient contrast for text on #DAF7A6; dark text like black or #900C3F is essential for readability.
White text provides good contrast against #FF5733, #C70039, and #900C3F.
Avoid using #FFC300 for small text on light backgrounds due to potential low contrast.
Check contrast ratios for all interactive elements, ensuring clear visual feedback for users.

Recommended combinations

Spicy Mango

Ideal for vibrant product features or energetic calls-to-action, combining warmth with a fresh, zesty feel.

#FF5733 · #FFC300 · #DAF7A6

Dragon Fruit

Excellent for bold, impactful sections or dramatic visual storytelling, offering rich depth and intensity.

#C70039 · #900C3F · #FF5733

Tropical Punch

Suitable for playful illustrations or balanced content blocks, creating a lively and harmonious composition.

#FFC300 · #DAF7A6 · #C70039

CSS variables

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

Tailwind config

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

Hex values

Color 1#FF5733

Color 2#FFC300

Color 3#DAF7A6

Color 4#C70039

Color 5#900C3F

Accessibility

Contrast checker

2:1Fail

2.7:1Fail

1.9:1Fail

2.9:1Fail

2:1Fail

1.4:1Fail

3.7:1AA18

5.7:1AA

2.7:1Fail

1.4:1Fail

5.1:1AA

7.7:1AAA

1.9:1Fail

3.7:1AA18

5.1:1AA

1.5:1Fail

2.9:1Fail

5.7:1AA

7.7:1AAA

1.5:1Fail

Similar palettes

More like Tropical Fruit Burst

View all vibrant

Exotic Juice Burst

Tropical Burst Tango

Tropical Fruit Delight

Tutti Frutti Punch

Bright Carnival Spin

Bright Fairground Lights