Back to palettes

Palette

Lemon Zest

Bright, invigorating yellows that capture the sharp, cheerful essence 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 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.

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

Data visualization

#FDD835#FFECB3#FFEE58#FFD600#FFC107

Palette guide

How to use Lemon Zest

Overview

The Lemon Zest palette delivers bright, invigorating yellows that perfectly capture the sharp, cheerful essence of lemon zest. This vibrant collection features classic lemon hues such as the prominent `#FDD835` (Yellow), the rich `#FFD600` (Gold), and the warm `#FFC107` (Amber). A softer, pale lemon shade, `#FFECB3` (Moccasin), rounds out the palette, offering a clean base. Designers can harness this scheme to evoke freshness, energy, and a clean, crisp aesthetic. It's an excellent choice for projects that aim to be direct, impactful, and full of sunny vitality.

Best used for

  • Fresh food packaging and healthy eating brands
  • Cleaning product branding and marketing
  • Summer fashion lines and accessories
  • Vibrant websites and digital portfolios
  • Educational content for children
  • Energetic social media campaigns

Suggested color roles

primary

Utilize `#FDD835` (Yellow) as the quintessential lemon yellow, serving as the main brand color or focal point.

secondary

Employ `#FFD600` (Gold) as a slightly deeper, rich yellow to provide supportive contrast and visual weight.

accent

Apply `#FFC107` (Amber) for warm, golden accents, ideal for calls-to-action or elements that need to stand out with a touch of warmth.

background

Designate `#FFECB3` (Moccasin) as a soft, clean base background, allowing the brighter yellows to pop without being overwhelming.

text

For maximum legibility, use dark grey or black text. White text can be effective for large headings on `#FDD835` or `#FFD600`.

Accessibility notes

  • Lighter yellows like `#FFECB3` require very dark text for readability; always ensure high contrast.
  • While `#FDD835` and `#FFD600` can support white text for larger headings, dark text is generally safer for body copy.
  • Verify that interactive elements using `#FFC107` meet minimum contrast ratios against their background.
  • Avoid using light-colored text on any of the yellows in this palette to prevent accessibility challenges.

Recommended combinations

Fresh & Clean

For product labels, minimalist designs, or clean web layouts that feel crisp.

#FDD835 · #FFECB3 · #FFD600

Zesty Highlight

Ideal for buttons, call-to-actions, or focal points that need warmth and energy.

#FFC107 · #FFEE58 · #FFECB3

Vibrant Base

Perfect for hero sections, banners, or any area needing a strong, cheerful foundation.

#FFD600 · #FDD835 · #FFECB3

CSS variables

:root {
  --lemon-zest-1: #FDD835;
  --lemon-zest-2: #FFECB3;
  --lemon-zest-3: #FFEE58;
  --lemon-zest-4: #FFD600;
  --lemon-zest-5: #FFC107;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lemon-zest": {
        1: "#FDD835",
        2: "#FFECB3",
        3: "#FFEE58",
        4: "#FFD600",
        5: "#FFC107",
      }
    }
  }
}

Related searches

classic lemon yellowfresh citrus palettevibrant yellow brandingenergetic zest colorsbright summer design

Palette colors

Hex values

Color 1#FDD835
·
Color 2#FFECB3
·
Color 3#FFEE58
·
Color 4#FFD600
·
Color 5#FFC107
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.2:1Fail
1:1Fail
1.2:1Fail
2
1.2:1Fail
1:1Fail
1.2:1Fail
1.4:1Fail
3
1.2:1Fail
1:1Fail
1.2:1Fail
1.4:1Fail
4
1:1Fail
1.2:1Fail
1.2:1Fail
1.2:1Fail
5
1.2:1Fail
1.4:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Lemon Zest

View all vibrant
Zesty Citrus Burst
Citrus Burst Energy
Citrus Burst Zest
Citrus Grove Dawn
Citrus Morning Zing
Citrus Zest Burst