Palette

Tropical Citrus Burst

An exhilarating pop of bright oranges, yellows, and fresh greens, like a splash of zesty tropical citrus.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF7F00#FFBF00#FFD700#9ACD32#66CDAA

Palette guide

How to use Tropical Citrus Burst

Overview

The Tropical Citrus Burst palette is an exhilarating collection of bright, zesty hues, perfect for projects that demand energy and freshness. With its vibrant orange #FF7F00, sunny yellow #FFD700, and refreshing turquoise #66CDAA, this palette embodies the lively spirit of tropical fruits. Designers and developers can utilize these colors to create engaging, optimistic, and memorable experiences across digital platforms and physical products. The warm oranges and yellows provide an immediate sense of cheerfulness, while the cool green-blue offers a balanced, invigorating contrast, making designs pop with vibrant zest.

Best used for

Food and beverage branding (juice, snacks)
Summer event promotions and marketing
Children's product packaging and websites
Travel and tourism for tropical destinations
Fitness and active lifestyle brand visuals
Creative agency portfolios and presentations

Suggested color roles

primary

Use #FF7F00 as a bold, energetic primary color for calls-to-action, key headlines, or brand elements to grab attention.

secondary

Employ #FFD700 as a bright, sunny secondary color for supportive graphics, background sections, or highlights.

accent

Apply #9ACD32 as a zesty lime green accent for fresh details, interactive elements, or a refreshing pop of color.

background

Utilize #66CDAA for a cool, calming background that balances the warmer tones, or a clean white for maximum vibrancy.

text

For general readability, use a dark neutral like charcoal or black on the lighter colors. #FF7F00 or #9ACD32 can be used for headings on light backgrounds.

Accessibility notes

Most colors are light and vibrant; ensure dark text (e.g., black) is used on #FFBF00, #FFD700, #9ACD32, and #66CDAA for readability.
#FF7F00 may not provide enough contrast with white text for smaller font sizes; prefer dark text for body copy.
Avoid pairing #FFBF00 text on #FFD700 backgrounds or vice versa, as their minimal contrast will hinder readability.
Use #FF7F00 or #9ACD32 primarily as accents; they are generally not suitable for large blocks of text without strong contrast.

Recommended combinations

Zesty Balance

Combines energetic orange with a cool teal base and sunny yellow accents for a balanced, vibrant feel.

#FF7F00 · #66CDAA · #FFD700

Citrus Splash

A fresh green paired with two bright yellows and an orange, ideal for highlighting freshness and energy.

#9ACD32 · #FFBF00 · #FF7F00

Tropical Refresh

Uses a cool background to make the warm, energetic orange and zesty green accents truly pop.

#66CDAA · #FF7F00 · #9ACD32

CSS variables

:root {
  --tropical-citrus-burst-1: #FF7F00;
  --tropical-citrus-burst-2: #FFBF00;
  --tropical-citrus-burst-3: #FFD700;
  --tropical-citrus-burst-4: #9ACD32;
  --tropical-citrus-burst-5: #66CDAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-citrus-burst": {
        1: "#FF7F00",
        2: "#FFBF00",
        3: "#FFD700",
        4: "#9ACD32",
        5: "#66CDAA",
      }
    }
  }
}

Hex values

Color 1#FF7F00

Color 2#FFBF00

Color 3#FFD700

Color 4#9ACD32

Color 5#66CDAA

Accessibility

Contrast checker

1.5:1Fail

1.8:1Fail

1.3:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.8:1Fail

1.2:1Fail

1.3:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

1.3:1Fail

1:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

1:1Fail

Similar palettes

More like Tropical Citrus Burst

Tropical Citrus Burst

See it in context.

Ready when you are.

Built with Tropical Citrus Burst.

How to use Tropical Citrus Burst

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Zesty Balance

Citrus Splash

Tropical Refresh

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Tropical Citrus Burst