Palette

Lemon Zest Fizz

A bright and bubbly collection of vibrant yellows, like the refreshing sparkle of lemon zest.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lemon Zest Fizz 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 Lemon Zest Fizz.

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

Data visualization

#FFF7DA#FFEDA0#FFE26B#FFD736#FFCB00

Palette guide

How to use Lemon Zest Fizz

Overview

The Lemon Zest Fizz palette is a bright and bubbly collection of vibrant yellows, reminiscent of a refreshing, sparkling lemon drink. This energetic scheme cascades from the airy `#FFF7DA` (Cornsilk) through the sunny `#FFEDA0` (Moccasin) and `#FFE26B` (Light Goldenrod Yellow), culminating in the deep, impactful `#FFCB00` (Amber). It's a gradient of pure lemon energy, designed to evoke feelings of zest, freshness, and effervescence. Designers will find this palette excellent for projects that require a dynamic, uplifting, and undeniably cheerful aesthetic, embodying the spirit of pure citrus joy.

Best used for

Beverage branding (especially sparkling drinks)
Health supplements and vitamin product packaging
Fresh produce markets and organic food brands
Energetic blogs and online content platforms
Summer clothing lines and fashion accessories
Bright and engaging mobile game interfaces

Suggested color roles

primary

Utilize `#FFD736` (Goldenrod) as the balanced, vibrant primary yellow for main sections and brand recognition.

secondary

Employ `#FFCB00` (Amber) as a deeper, impactful secondary color, ideal for strong calls-to-action or prominent headings.

accent

Apply `#FFE26B` (Light Goldenrod Yellow) for lighter accents and visual interest, adding a softer sparkle.

background

Designate `#FFF7DA` (Cornsilk) as the airy, clean base background, allowing the brighter yellows to pop.

text

Use a dark grey or charcoal for body text and black for headings to ensure optimal readability across all yellow tones.

Accessibility notes

Ensure sufficient contrast for text, especially on lighter yellows like `#FFF7DA` and `#FFEDA0`; dark text is essential.
While `#FFCB00` can support white text for large headings, dark text is generally safer and more universally readable.
All yellows in this palette are bright; avoid using light text on any of them to prevent accessibility issues.
Verify that interactive elements using `#FFD736` or `#FFCB00` meet minimum contrast ratios against their backgrounds.

Recommended combinations

Refreshing Gradient

For smooth background transitions, banners, or decorative elements that feel light and airy.

#FFF7DA · #FFEDA0 · #FFE26B

Energetic Call

Ideal for buttons, prominent information, or sections needing a strong visual punch.

#FFD736 · #FFCB00 · #FFF7DA

Subtle Fizz

To create light and airy designs that still convey a sense of vibrancy and freshness.

#FFF7DA · #FFEDA0 · #FFD736

CSS variables

:root {
  --lemon-zest-fizz-1: #FFF7DA;
  --lemon-zest-fizz-2: #FFEDA0;
  --lemon-zest-fizz-3: #FFE26B;
  --lemon-zest-fizz-4: #FFD736;
  --lemon-zest-fizz-5: #FFCB00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lemon-zest-fizz": {
        1: "#FFF7DA",
        2: "#FFEDA0",
        3: "#FFE26B",
        4: "#FFD736",
        5: "#FFCB00",
      }
    }
  }
}

Hex values

Color 1#FFF7DA

Color 2#FFEDA0

Color 3#FFE26B

Color 4#FFD736

Color 5#FFCB00

Accessibility

Contrast checker

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1.4:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Lemon Zest Fizz

Lemon Zest Fizz

See it in context.

Ready when you are.

Built with Lemon Zest Fizz.

How to use Lemon Zest Fizz

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Refreshing Gradient

Energetic Call

Subtle Fizz

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lemon Zest Fizz