Palette

Tropical Juice Pop

A refreshing splash of bright oranges and yellows, bursting with tropical fruit flavor.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tropical Juice Pop 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 Juice Pop.

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

Data visualization

#FCE179#F5BB44#F08E35#E85B20#D62A0D

Palette guide

How to use Tropical Juice Pop

Overview

The Tropical Juice Pop palette is a warm and inviting collection, bursting with the sun-kissed shades of tropical fruits. This energetic gradient moves from a creamy light yellow (#FCE179) through a golden orange (#F5BB44) to a vibrant true orange (#F08E35). It then deepens into a rich dark orange (#E85B20) and culminates in a fiery red-orange (#D62A0D). This cohesive and juicy palette is perfect for conveying warmth, energy, and natural sweetness, making it highly versatile for a range of design applications. Designers and developers can leverage its harmonious progression to create gradients, depth, and a consistently inviting user experience.

Best used for

Organic food and beverage branding
Autumn/Fall seasonal promotions
Cozy home decor websites
Children's storybook illustrations
Sunset-themed digital art
Healthy snack packaging

Suggested color roles

primary

Use #E85B20 as a rich, warm, and inviting primary color for key elements.

secondary

Employ #F08E35 to provide vibrant and energetic support, slightly lighter than the primary.

accent

Apply #D62A0D sparingly for a strong, deep accent or a call to action requiring high urgency.

background

A soft, warm, and bright base like #FCE179 allows other colors to pop gently and invitingly.

text

Dark brown or charcoal (#442200, #333333) for excellent readability on lighter shades. White text works well on #E85B20 and #D62A0D.

Accessibility notes

Ensure sufficient contrast, especially when using lighter shades for text elements.
#FCE179 and #F5BB44 will require dark text (e.g., black or dark brown) to meet WCAG AA standards.
The darker shades like #E85B20 and #D62A0D are suitable for white or very light text.
Be mindful of colorblind users, as the subtle shifts in orange may be difficult to distinguish for some.

Recommended combinations

Sunset Glow

Gradients, atmospheric backgrounds, or to create a warm, inviting visual flow.

#FCE179 · #F08E35 · #D62A0D

Juicy Core

Main content areas, product displays, or branding elements that need to feel rich and substantial.

#F5BB44 · #E85B20 · #F08E35

Harvest Warmth

Headers, calls to action, or accenting elements that need a strong, comforting presence.

#D62A0D · #FCE179 · #E85B20

CSS variables

:root {
  --tropical-juice-pop-1: #FCE179;
  --tropical-juice-pop-2: #F5BB44;
  --tropical-juice-pop-3: #F08E35;
  --tropical-juice-pop-4: #E85B20;
  --tropical-juice-pop-5: #D62A0D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-juice-pop": {
        1: "#FCE179",
        2: "#F5BB44",
        3: "#F08E35",
        4: "#E85B20",
        5: "#D62A0D",
      }
    }
  }
}

Hex values

Color 1#FCE179

Color 2#F5BB44

Color 3#F08E35

Color 4#E85B20

Color 5#D62A0D

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

2.7:1Fail

3.9:1AA18

1.3:1Fail

1.4:1Fail

2:1Fail

2.9:1Fail

1.9:1Fail

1.4:1Fail

1.5:1Fail

2.1:1Fail

2.7:1Fail

2:1Fail

1.5:1Fail

1.4:1Fail

3.9:1AA18

2.9:1Fail

2.1:1Fail

1.4:1Fail

Similar palettes

More like Tropical Juice Pop

Tropical Juice Pop

See it in context.

Ready when you are.

Built with Tropical Juice Pop.

How to use Tropical Juice Pop

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunset Glow

Juicy Core

Harvest Warmth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Tropical Juice Pop