Back to palettes

Palette

Zesty Lemon Pop

A burst of cheerful yellows and limes, echoing the sharp, zesty delight of fresh citrus fruits.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Zesty Lemon 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 Zesty Lemon Pop.

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

Data visualization

#F7E987#F2D249#ECC73C#E0B42A#C9A01E

Palette guide

How to use Zesty Lemon Pop

Overview

The Zesty Lemon Pop palette delivers a burst of cheerful yellows, echoing the sharp, zesty delight of fresh citrus fruits. This vibrant collection features a range of golden hues, from the bright Pale Goldenrod (#F7E987) to the rich Dark Goldenrod (#ECC73C) and deep C9A01E. Designers and developers can leverage these energetic tones to create playful interfaces, cheerful branding, or lively digital content that communicates freshness, joy, and a playful spirit. The monochromatic nature of this palette ensures inherent harmony, making it easy to create cohesive and visually appealing designs with a sunny disposition.

Best used for

  • Lemonade stand branding
  • Summer-themed product packaging
  • Children's toy and game design
  • Cheerful and playful website UI
  • Bakeries and sweet treat promotions
  • Energetic marketing campaigns

Suggested color roles

primary

Goldenrod (#F2D249) serves as the main lemon hue, perfect for primary calls to action or key visual elements.

secondary

Dark Goldenrod (#ECC73C) offers a richer, more grounded tone, suitable for secondary information or larger blocks.

accent

Pale Goldenrod (#F7E987) provides a bright, sparkling highlight for interactive elements or subtle details.

background

Pale Goldenrod (#F7E987) creates a light, sunny, and inviting background, radiating warmth.

text

For optimal readability, use C9A01E for headings. For body text, a dark brown or black is highly recommended.

Accessibility notes

  • All colors in this palette are light; it is crucial to use dark text (e.g., black, dark brown, or #C9A01E) for readability.
  • Avoid using light-colored text on any of the yellow hues to prevent severe contrast issues.
  • C9A01E provides the best contrast within the palette for text on lighter backgrounds like #F7E987 or #F2D249.
  • For interactive elements, ensure sufficient contrast by using darker yellows like #E0B42A against the lighter backgrounds.

Recommended combinations

Lemon Zest

Creates a vibrant, fresh gradient, ideal for backgrounds, overlays, or illustrating a zesty effect.

#F7E987 · #F2D249 · #ECC73C

Deep Citrus

Offers richer, more grounded tones for headings, borders, or emphasizing depth in design.

#E0B42A · #C9A01E · #F2D249

Pop Accent

Provides a bright highlight with a strong anchor, perfect for calls to action or contrasting elements.

#F7E987 · #C9A01E · #ECC73C

CSS variables

:root {
  --zesty-lemon-pop-1: #F7E987;
  --zesty-lemon-pop-2: #F2D249;
  --zesty-lemon-pop-3: #ECC73C;
  --zesty-lemon-pop-4: #E0B42A;
  --zesty-lemon-pop-5: #C9A01E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zesty-lemon-pop": {
        1: "#F7E987",
        2: "#F2D249",
        3: "#ECC73C",
        4: "#E0B42A",
        5: "#C9A01E",
      }
    }
  }
}

Related searches

lemon yellow palettecheerful summer colorszesty brandingplayful ui yellowsenergetic citrus design

Palette colors

Hex values

Color 1#F7E987
·
Color 2#F2D249
·
Color 3#ECC73C
·
Color 4#E0B42A
·
Color 5#C9A01E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.3:1Fail
1.6:1Fail
2:1Fail
2
1.2:1Fail
1.1:1Fail
1.3:1Fail
1.7:1Fail
3
1.3:1Fail
1.1:1Fail
1.2:1Fail
1.5:1Fail
4
1.6:1Fail
1.3:1Fail
1.2:1Fail
1.3:1Fail
5
2:1Fail
1.7:1Fail
1.5:1Fail
1.3:1Fail

Similar palettes

More like Zesty Lemon Pop

View all vibrant