Back to palettes

Palette

Tropical Mango Tango

A lively and juicy burst of tropical fruit colors, full of sunshine and playful energy.

VibrantPlayful5 colors
More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tropical Mango Tango 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 Mango Tango.

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

Data visualization

#FF6B6B#FFA07A#FFDAB9#FFB347#FFCC33

Palette guide

How to use Tropical Mango Tango

Overview

The Tropical Mango Tango palette is a lively and juicy collection, radiating the warmth and playful energy of sun-ripened tropical fruits. It transitions beautifully from a cheerful Coral Red (#FF6B6B) through a soft Light Salmon (#FFA07A) and a delicate Peach Puff (#FFDAB9). The palette is invigorated by a vibrant orange (#FFB347) and a bright golden yellow (#FFCC33), creating a harmonious and appetizing spectrum. This cohesive and joyful palette is ideal for designs that aim to convey happiness, natural sweetness, and an inviting, energetic mood. Designers and developers can leverage its warmth to create engaging interfaces, appealing food branding, or cheerful marketing materials.

Best used for

  • Fruit juice and smoothie packaging
  • Dessert and bakery branding
  • Summer and beach fashion
  • Children's book illustrations
  • Wellness and self-care apps
  • Tropical-themed party decor

Suggested color roles

primary

Use #FFB347 as a vibrant and inviting orange, perfect for calls to action and main branding.

secondary

Employ #FF6B6B as a cheerful coral red that adds energy and warmth as a supporting color.

accent

Apply #FFCC33 as a bright golden yellow for highlights, playful elements, or to add a sunny glow.

background

A soft, warm, and light base like #FFDAB9 provides a gentle backdrop for the other colors.

text

A dark brown (#663300) or rich charcoal (#333333) ensures readability on lighter backgrounds. White text is effective on #FF6B6B and #FFB347.

Accessibility notes

  • Ensure sufficient contrast, especially for text on lighter shades like #FFDAB9 and #FFA07A.
  • #FFDAB9 and #FFCC33 will require dark text (e.g., black or dark brown) to meet WCAG AA.
  • The brighter colors (#FFB347, #FF6B6B) are suitable for white or very light text.
  • Be cautious when using #FFDAB9 and #FFA07A for adjacent elements as their luminance difference might be subtle.

Recommended combinations

Fruity Delight

Headers, calls to action, or graphic elements that need to convey warmth and energy.

#FF6B6B · #FFB347 · #FFCC33

Soft Glow

Backgrounds, secondary content blocks, or elements needing a gentle, inviting feel.

#FFDAB9 · #FFA07A · #FFB347

Tropical Zest

Playful accents, icons, or illustrations that require a bright and cheerful pop.

#FFCC33 · #FF6B6B · #FFA07A

CSS variables

:root {
  --tropical-mango-tango-1: #FF6B6B;
  --tropical-mango-tango-2: #FFA07A;
  --tropical-mango-tango-3: #FFDAB9;
  --tropical-mango-tango-4: #FFB347;
  --tropical-mango-tango-5: #FFCC33;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-mango-tango": {
        1: "#FF6B6B",
        2: "#FFA07A",
        3: "#FFDAB9",
        4: "#FFB347",
        5: "#FFCC33",
      }
    }
  }
}

Related searches

warm fruit color palettejoyful orange schemetropical food brandingenergetic summer UIvibrant peach yellow colors

Palette colors

Hex values

Color 1#FF6B6B
·
Color 2#FFA07A
·
Color 3#FFDAB9
·
Color 4#FFB347
·
Color 5#FFCC33
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
1.6:1Fail
1.8:1Fail
2
1.4:1Fail
1.5:1Fail
1.1:1Fail
1.3:1Fail
3
2.1:1Fail
1.5:1Fail
1.4:1Fail
1.1:1Fail
4
1.6:1Fail
1.1:1Fail
1.4:1Fail
1.2:1Fail
5
1.8:1Fail
1.3:1Fail
1.1:1Fail
1.2:1Fail

Similar palettes

More like Tropical Mango Tango

View all Vibrant