Back to palettes

Palette

Energetic Citrus Zest

A lively burst of sunny yellows, tangy oranges, and cheerful pinks, perfect for a dynamic design.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD700#FFA500#FF6F61#C71585#4CAF50

Palette guide

How to use Energetic Citrus Zest

Overview

The "Energetic Citrus Zest" palette is a lively burst of sunny yellows, tangy oranges, and cheerful pinks, perfect for a dynamic design. Featuring vibrant hues like #FFD700 (gold), #FFA500 (orange), #FF6F61 (coral), #C71585 (fuchsia), and a surprising #4CAF50 (bright green), this collection is designed to infuse energy and joy into any project. Designers and developers can leverage these bold, high-saturation colors to create engaging, playful, and attention-grabbing interfaces or branding. It's an ideal choice for projects that aim to convey enthusiasm, freshness, and a vibrant, modern appeal.

Best used for

  • Food and beverage packaging, especially for juices or snacks
  • Summer campaign promotions and advertising
  • Children's brands and educational apps
  • Sports and active lifestyle apparel
  • Festive event branding and party invitations
  • Playful and dynamic digital interfaces

Suggested color roles

primary

Utilize #FFA500 as a vibrant, inviting primary color for headers, prominent sections, or key UI elements, conveying enthusiasm.

secondary

Apply #FFD700 for supportive elements, subheadings, or background accents, adding a bright, sunny dimension.

accent

Reserve #C71585 for bold, unexpected accents, call-to-action buttons, or striking graphical details to create high impact.

background

Pair this palette with a clean white or very light gray background to allow the vibrant colors to truly pop and maintain clarity.

text

For optimal readability, use black or a very dark gray for text on all colors, especially #FFD700 and #FFA500.

Accessibility notes

  • High contrast is crucial: always use black or very dark text on #FFD700, #FFA500, and #FF6F61 for readability.
  • Ensure sufficient contrast for interactive elements against their backgrounds; #C71585 and #4CAF50 offer strong options.
  • Avoid using #FF6F61 as text on #FFA500 or #FFD700 due to insufficient contrast and potential visual vibration.
  • Be mindful of users with color vision deficiencies when pairing red-orange and green for critical information; use secondary cues.

Recommended combinations

Zesty Burst

Ideal for creating energetic gradients, vibrant banners, or playful illustrations that convey warmth and excitement.

#FFD700 · #FFA500 · #FF6F61

Unexpected Pop

Perfect for designs that need to stand out with bold, contrasting elements, like call-to-action blocks or key feature highlights.

#FFA500 · #C71585 · #4CAF50

Summer Energy

Use this for a lively, fresh aesthetic in promotional materials, digital ads, or youthful brand identities.

#FFD700 · #FF6F61 · #4CAF50

CSS variables

:root {
  --energetic-citrus-zest-1: #FFD700;
  --energetic-citrus-zest-2: #FFA500;
  --energetic-citrus-zest-3: #FF6F61;
  --energetic-citrus-zest-4: #C71585;
  --energetic-citrus-zest-5: #4CAF50;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "energetic-citrus-zest": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF6F61",
        4: "#C71585",
        5: "#4CAF50",
      }
    }
  }
}

Related searches

vibrant citrus colorsenergetic summer palettebright food brandingplayful yellow orangebold color scheme

Palette colors

Hex values

Color 1#FFD700
·
Color 2#FFA500
·
Color 3#FF6F61
·
Color 4#C71585
·
Color 5#4CAF50
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
3.9:1AA18
2:1Fail
2
1.4:1Fail
1.4:1Fail
2.7:1Fail
1.4:1Fail
3
1.9:1Fail
1.4:1Fail
2:1Fail
1:1Fail
4
3.9:1AA18
2.7:1Fail
2:1Fail
2:1Fail
5
2:1Fail
1.4:1Fail
1:1Fail
2:1Fail

Similar palettes

More like Energetic Citrus Zest

View all vibrant
Citrus Zest Pop
Citrus Zest Splash
Citrus Zest Splash
Lemon Zest Burst
Vibrant Citrus Medley
Zesty Morning