Back to palettes

Palette

Citrus Zest Pop

A cheerful burst of sunny yellows and tangy oranges, like fresh citrus zest.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FEEF90#FDC700#FF9B00#FF6B00#D84A00

Palette guide

How to use Citrus Zest Pop

Overview

The Citrus Zest Pop palette is a cheerful burst of sunny yellows and tangy oranges, designed to inject energy and vibrancy into any project. Featuring the bright `#FEEF90` and lively `#FDC700`, alongside the warm `#FF9B00`, this palette is perfect for designers and developers aiming to create energetic and attention-grabbing experiences. The deeper tones of `#FF6B00` and the impactful `#D84A00` provide excellent contrast and a sense of dynamic progression. This collection is particularly suited for designs that need to convey excitement, freshness, and a playful spirit, making it highly effective for consumer-facing applications.

Best used for

  • Food and beverage branding, especially juice or snacks
  • Children's product packaging and websites
  • Energetic event posters and marketing materials
  • Summer-themed digital campaigns and social media
  • Interactive app interfaces requiring a lively feel
  • Call-to-action buttons and conversion-focused design

Suggested color roles

primary

Use `#FDC700` as a bright, inviting primary color for headers or key elements, grabbing immediate attention.

secondary

Employ `#FF9B00` for secondary sections, subheadings, or supporting graphics, maintaining warmth and energy.

accent

Apply `#D84A00` for high-impact calls-to-action, important notifications, or to create strong visual anchors.

background

Utilize `#FEEF90` as a light, energetic background, allowing the deeper oranges to pop and maintaining a cheerful atmosphere.

text

For optimal readability, a dark charcoal or black is highly recommended for body text against these bright backgrounds. Use `#D84A00` for high-contrast headings.

Accessibility notes

  • Ensure very high contrast for text, especially when placing any text on bright yellows like `#FEEF90` or `#FDC700`.
  • Avoid using yellow or light orange text on light backgrounds; always opt for the darkest colors in the palette or black for text.
  • Use a contrast checker rigorously for all text and interactive elements to meet WCAG guidelines, as bright palettes can be challenging.
  • Consider using `#D84A00` for all interactive elements to ensure they are clearly distinguishable and accessible.

Recommended combinations

Zesty Glow

Ideal for creating vibrant gradients in hero sections or lively backgrounds that command attention.

#FEEF90 · #FDC700 · #FF9B00

Energetic Pop

Excellent for defining a clear hierarchy of importance, from highlights to strong calls-to-action.

#FDC700 · #FF6B00 · #D84A00

Sunset Zest

Effective for dynamic progress indicators, animated elements, or to convey warmth and action.

#FF9B00 · #FF6B00 · #D84A00

CSS variables

:root {
  --citrus-zest-pop-2-1: #FEEF90;
  --citrus-zest-pop-2-2: #FDC700;
  --citrus-zest-pop-2-3: #FF9B00;
  --citrus-zest-pop-2-4: #FF6B00;
  --citrus-zest-pop-2-5: #D84A00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-zest-pop-2": {
        1: "#FEEF90",
        2: "#FDC700",
        3: "#FF9B00",
        4: "#FF6B00",
        5: "#D84A00",
      }
    }
  }
}

Related searches

vibrant citrus paletteenergetic orange yellowbright pop colorssummer marketing palettefood branding colors

Palette colors

Hex values

Color 1#FEEF90
·
Color 2#FDC700
·
Color 3#FF9B00
·
Color 4#FF6B00
·
Color 5#D84A00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.4:1Fail
3.7:1AA18
2
1.3:1Fail
1.3:1Fail
1.8:1Fail
2.7:1Fail
3
1.8:1Fail
1.3:1Fail
1.4:1Fail
2:1Fail
4
2.4:1Fail
1.8:1Fail
1.4:1Fail
1.5:1Fail
5
3.7:1AA18
2.7:1Fail
2:1Fail
1.5:1Fail

Similar palettes

More like Citrus Zest Pop

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