Back to palettes

Palette

Zesty Citrus Burst

Bright, invigorating yellows and greens, like the vibrant, tangy zest of fresh citrus fruits.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F8B000#FFDC00#FFEF64#008000#5ECF5A

Palette guide

How to use Zesty Citrus Burst

Overview

The Zesty Citrus Burst palette (ID: zesty-citrus-burst-2) delivers a vibrant and invigorating experience, embodying the tangy zest of fresh citrus fruits. This energetic collection features bright yellows and greens, including a prominent Goldenrod (#F8B000), a lively Lemon Chiffon (#FFDC00), and a rich Green (#008000). Designers and developers can utilize these striking colors to create dynamic interfaces, eye-catching branding, or lively digital content that communicates freshness, energy, and natural vitality. The lighter Lemon Chiffon (#FFDC00) and Mint Green (#5ECF5A) provide balance, ensuring versatility across various applications.

Best used for

  • Food and beverage packaging
  • Health and wellness product branding
  • Summer event promotions
  • Children's educational apps
  • Fresh produce marketing
  • Energetic digital campaigns

Suggested color roles

primary

Goldenrod (#F8B000) serves as the main vibrant citrus pop, perfect for calls to action or key headings.

secondary

Green (#008000) offers a strong, natural contrast, ideal for secondary information or leafy accents.

accent

Light Yellow (#FFEF64) provides a bright, almost glowing highlight for interactive elements or small details.

background

Lemon Chiffon (#FFDC00) creates a cheerful and inviting background, radiating warmth.

text

For optimal readability, use Green (#008000) for headings. For body text, a dark charcoal or black is recommended.

Accessibility notes

  • Ensure high contrast for text used on Lemon Chiffon (#FFDC00) or Light Yellow (#FFEF64) backgrounds; dark text is crucial.
  • Green (#008000) provides excellent contrast against all yellow shades in the palette, suitable for text and interactive elements.
  • Avoid using light-colored text on the yellow hues to prevent readability issues, especially for smaller font sizes.
  • Goldenrod (#F8B000) offers good visibility for primary buttons or links on a light background.

Recommended combinations

Citrus Core

Creates a bright, juicy, and energetic focal point, perfect for product highlights or vibrant graphics.

#F8B000 · #FFDC00 · #FFEF64

Leafy Contrast

Ideal for designs emphasizing natural freshness, growth, or a balanced, organic feel.

#008000 · #5ECF5A · #F8B000

Zest & Pop

Provides energetic accents and clear distinction for UI elements or dynamic content sections.

#FFEF64 · #F8B000 · #008000

CSS variables

:root {
  --zesty-citrus-burst-2-1: #F8B000;
  --zesty-citrus-burst-2-2: #FFDC00;
  --zesty-citrus-burst-2-3: #FFEF64;
  --zesty-citrus-burst-2-4: #008000;
  --zesty-citrus-burst-2-5: #5ECF5A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zesty-citrus-burst-2": {
        1: "#F8B000",
        2: "#FFDC00",
        3: "#FFEF64",
        4: "#008000",
        5: "#5ECF5A",
      }
    }
  }
}

Related searches

vibrant yellow greencitrus color schemeenergetic brand colorsfresh food palettesummer zest colors

Palette colors

Hex values

Color 1#F8B000
·
Color 2#FFDC00
·
Color 3#FFEF64
·
Color 4#008000
·
Color 5#5ECF5A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.6:1Fail
2.7:1Fail
1.1:1Fail
2
1.4:1Fail
1.1:1Fail
3.8:1AA18
1.5:1Fail
3
1.6:1Fail
1.1:1Fail
4.4:1AA18
1.7:1Fail
4
2.7:1Fail
3.8:1AA18
4.4:1AA18
2.6:1Fail
5
1.1:1Fail
1.5:1Fail
1.7:1Fail
2.6:1Fail

Similar palettes

More like Zesty Citrus Burst

View all vibrant