Back to palettes

Palette

Tropical Citrus Zest

A burst of bright, tangy colors like fresh tropical citrus and exotic berries.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tropical Citrus Zest 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 Citrus Zest.

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

Data visualization

#FFBE0B#FB5607#FF006E#8338EC#3A86FF

Palette guide

How to use Tropical Citrus Zest

Overview

The Tropical Citrus Zest palette is a bold and electrifying collection, bursting with energetic hues that capture the essence of exotic fruits and vibrant berries. With its sunny yellow #FFBE0B, fiery orange #FB5607, and striking electric blue #3A86FF, this palette is designed for projects that demand high impact and a playful, modern edge. Designers and developers can leverage these highly saturated colors to create dynamic user interfaces, eye-catching branding, or lively digital content that stands out. The unexpected combination of warm and cool tones creates a captivating visual tension, perfect for energetic and youthful aesthetics.

Best used for

  • Youth-oriented brand identity
  • Digital marketing campaigns and ads
  • Event posters and promotional flyers
  • Creative and artistic portfolios
  • Modern gaming interfaces and apps
  • Fashion accessories and apparel design

Suggested color roles

primary

Use #FB5607 as a dominant, energetic primary color for calls-to-action, key headlines, or brand logos, demanding immediate attention.

secondary

Employ #FF006E as a vibrant magenta secondary color for supportive graphics, subheadings, or playful accents, adding a bold touch.

accent

Apply #3A86FF as a refreshing electric blue accent for interactive elements, hover states, or to provide a striking cool contrast.

background

A clean white or light gray background will allow these highly saturated colors to truly pop and maintain clarity.

text

On light backgrounds, use black or a very dark gray for optimal readability. For bold headings on white, #8338EC or #FF006E can be highly effective.

Accessibility notes

  • These highly saturated colors require very high text contrast; use black on #FFBE0B and white on #8338EC for readability.
  • #FB5607 and #FFBE0B may not provide sufficient contrast for white text, especially in smaller font sizes.
  • Avoid using #FF006E text on #FB5607 backgrounds due to potential color vibration and poor contrast.
  • #3A86FF and #8338EC offer good contrast with white text, making them suitable for larger headlines or buttons.

Recommended combinations

Dynamic Pop

A powerful combination of warm orange, cool blue, and bright yellow for a high-energy, modern look.

#FB5607 · #3A86FF · #FFBE0B

Berry Blast

Combines bold magenta and deep violet with a sunny yellow for a playful yet sophisticated vibrancy.

#FF006E · #8338EC · #FFBE0B

Electric Zest

Uses electric blue as a base, with energetic orange and striking pink for a truly eye-catching design.

#3A86FF · #FB5607 · #FF006E

CSS variables

:root {
  --tropical-citrus-zest-1: #FFBE0B;
  --tropical-citrus-zest-2: #FB5607;
  --tropical-citrus-zest-3: #FF006E;
  --tropical-citrus-zest-4: #8338EC;
  --tropical-citrus-zest-5: #3A86FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-citrus-zest": {
        1: "#FFBE0B",
        2: "#FB5607",
        3: "#FF006E",
        4: "#8338EC",
        5: "#3A86FF",
      }
    }
  }
}

Related searches

bright energetic colorsneon tropical palettebold pop art colorsvibrant ui designplayful brand identity

Palette colors

Hex values

Color 1#FFBE0B
·
Color 2#FB5607
·
Color 3#FF006E
·
Color 4#8338EC
·
Color 5#3A86FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
2.3:1Fail
3.4:1AA18
2.1:1Fail
2
2:1Fail
1.2:1Fail
1.7:1Fail
1.1:1Fail
3
2.3:1Fail
1.2:1Fail
1.5:1Fail
1.1:1Fail
4
3.4:1AA18
1.7:1Fail
1.5:1Fail
1.6:1Fail
5
2.1:1Fail
1.1:1Fail
1.1:1Fail
1.6:1Fail

Similar palettes

More like Tropical Citrus Zest

View all vibrant
Island Drink Splash
Orchard Zest Pop
Summer Citrus Splash
Summer Citrus Zing
Sunny Fruit Zing
Tropical Fruit Smoothie