Back to palettes

Palette

Sunny Citrus Burst

A bright and lively palette bursting with the energetic colors of ripe citrus fruits.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD300#FFB000#FF8000#FF5000#FFED99

Palette guide

How to use Sunny Citrus Burst

Overview

The Sunny Citrus Burst palette is a vibrant and energetic collection, perfect for projects needing a jolt of freshness and warmth. Featuring brilliant yellows and fiery oranges, it evokes the zest of ripe citrus. Key colors include the bright yellow #FFD300, a rich orange #FFB000, a bolder #FF8000, and the intense #FF5000, complemented by the softest yellow #FFED99. This palette is ideal for creating designs that are lively, inviting, and full of positive energy. Developers will find these hex codes easy to implement for UI elements, marketing materials, or any application aiming for a cheerful and memorable user experience. Its natural progression from light yellow to deep orange provides excellent versatility.

Best used for

  • Food & Beverage branding (especially juice, snacks)
  • Summer event promotions
  • Children's product packaging
  • Web and mobile app interfaces for lifestyle brands
  • Interactive game UI
  • Energetic advertising campaigns

Suggested color roles

primary

Use #FFB000 as a strong, inviting orange for main calls to action or key branding elements.

secondary

Apply #FFD300 as a bright, supportive yellow for secondary headings or background accents.

accent

Utilize #FF5000 for bold, attention-grabbing highlights or urgent notifications.

background

Employ #FFED99 as a light, airy base, ensuring dark text for readability.

text

For text, use a deep charcoal or black for readability against the lighter shades; white text works well on #FF8000 and #FF5000.

Accessibility notes

  • #FFED99 offers low contrast with white text; always use dark text like black or charcoal for readability.
  • Ensure sufficient contrast between #FFD300 and #FFB000 when used adjacent for UI elements.
  • Avoid using #FFD300 or #FFED99 as primary text colors unless on very dark backgrounds.
  • #FF5000 and #FF8000 provide good contrast for white text, but verify against WCAG guidelines.

Recommended combinations

Zesty Pop

High-impact call-to-actions, playful branding, or vibrant illustrations.

#FFD300 · #FF5000 · #FFED99

Sunset Glow

Gradient backgrounds, warm banners, or inviting hero sections.

#FFB000 · #FF8000 · #FFED99

Fresh Accent

Highlighting key information, navigational elements, or energetic infographics.

#FFD300 · #FFB000 · #FF5000

CSS variables

:root {
  --sunny-citrus-burst-1: #FFD300;
  --sunny-citrus-burst-2: #FFB000;
  --sunny-citrus-burst-3: #FF8000;
  --sunny-citrus-burst-4: #FF5000;
  --sunny-citrus-burst-5: #FFED99;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunny-citrus-burst": {
        1: "#FFD300",
        2: "#FFB000",
        3: "#FF8000",
        4: "#FF5000",
        5: "#FFED99",
      }
    }
  }
}

Related searches

vibrant orange yellow palettecitrus color scheme designenergetic branding colorssummer ui palettebright food packaging colors

Palette colors

Hex values

Color 1#FFD300
·
Color 2#FFB000
·
Color 3#FF8000
·
Color 4#FF5000
·
Color 5#FFED99
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.3:1Fail
1.2:1Fail
2
1.3:1Fail
1.4:1Fail
1.8:1Fail
1.6:1Fail
3
1.7:1Fail
1.4:1Fail
1.3:1Fail
2.1:1Fail
4
2.3:1Fail
1.8:1Fail
1.3:1Fail
2.8:1Fail
5
1.2:1Fail
1.6:1Fail
2.1:1Fail
2.8:1Fail

Similar palettes

More like Sunny Citrus Burst

View all vibrant
Citrus Morning Zing
Lemon Zest Burst
Sunny Citrus Punch
Citrus Burst Splash
Citrus Burst Zest
Citrus Grove Bloom