Back to palettes

Palette

Tropical Punch Splash

An explosion of sweet, tangy fruit flavors captured in bright, playful tropical hues.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tropical Punch Splash 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 Punch Splash.

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

Data visualization

#FF69B4#FF00FF#FF1493#8A2BE2#9400D3

Palette guide

How to use Tropical Punch Splash

Overview

The Tropical Punch Splash palette is an explosion of sweet, tangy fruit flavors captured in bright, playful tropical hues. Dominated by a range of vivid purples and pinks, including bright #FF69B4, electric #FF00FF, bold #FF1493, deep violet #8A2BE2, and intense #9400D3, this palette is perfect for designs that demand a high level of vibrancy and fun. Designers can leverage these colors for captivating branding, dynamic digital art, or engaging user interfaces that need to convey excitement and a modern aesthetic. Developers will find these hex codes ideal for creating visually striking and memorable applications.

Best used for

  • Cosmetics and beauty product branding
  • Music festival promotions
  • Digital art and illustration
  • Fashion apparel and accessories
  • Youth-focused tech products
  • Interactive virtual experiences

Suggested color roles

primary

Use #FF00FF as a bold, electric primary color for hero sections or key interactive elements, demanding attention.

secondary

Employ #9400D3 for subheadings or secondary navigation, providing depth and sophistication.

accent

Introduce #FF69B4 for subtle highlights, icons, or progress indicators, adding a softer, playful touch.

background

Consider #8A2BE2 as a rich, immersive background color for sections, allowing lighter hues to glow.

text

For body text, white or a very light grey offers excellent readability against the darker purples; black on #FF69B4.

Accessibility notes

  • Ensure sufficient contrast when using #FF69B4 or #FF1493 text on #8A2BE2 or #9400D3 backgrounds.
  • Verify readability of white text on all darker hues, especially #8A2BE2 and #9400D3.
  • Avoid using #FF00FF text on #FF1493 due to potential low contrast and vibrancy clash.
  • Prioritize high contrast for all text elements within this highly saturated palette.

Recommended combinations

Electric Fusion

Excellent for high-energy digital interfaces or impactful branding, with #FF00FF as the focal point.

#FF00FF · #9400D3 · #FF69B4

Violet Bloom

Ideal for creative illustrations or fashion designs, blending depth with playful vibrancy.

#8A2BE2 · #FF1493 · #FF69B4

Punchy Pop

Use for dynamic call-to-actions or striking visual elements, creating strong visual hierarchy.

#FF1493 · #FF00FF · #9400D3

CSS variables

:root {
  --tropical-punch-splash-1: #FF69B4;
  --tropical-punch-splash-2: #FF00FF;
  --tropical-punch-splash-3: #FF1493;
  --tropical-punch-splash-4: #8A2BE2;
  --tropical-punch-splash-5: #9400D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-punch-splash": {
        1: "#FF69B4",
        2: "#FF00FF",
        3: "#FF1493",
        4: "#8A2BE2",
        5: "#9400D3",
      }
    }
  }
}

Related searches

vibrant pink purple paletteelectric tropical colorssweet fruit punch schemebold magenta violet designplayful neon color combinations

Palette colors

Hex values

Color 1#FF69B4
·
Color 2#FF00FF
·
Color 3#FF1493
·
Color 4#8A2BE2
·
Color 5#9400D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
2.3:1Fail
2.5:1Fail
2
1.2:1Fail
1.2:1Fail
1.9:1Fail
2.1:1Fail
3
1.4:1Fail
1.2:1Fail
1.6:1Fail
1.8:1Fail
4
2.3:1Fail
1.9:1Fail
1.6:1Fail
1.1:1Fail
5
2.5:1Fail
2.1:1Fail
1.8:1Fail
1.1:1Fail

Similar palettes

More like Tropical Punch Splash

View all vibrant