Back to palettes

Palette

Lemon Zest Burst

Bright, invigorating yellows and oranges capturing the lively, tangy essence 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 Lemon Zest 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 Lemon Zest Burst.

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

Data visualization

#FFC300#FFD700#F5E08F#FF8D00#FFA500

Palette guide

How to use Lemon Zest Burst

Overview

The Lemon Zest Burst palette invigorates with a lively blend of bright yellows and oranges, perfectly capturing the tangy essence of fresh citrus. This energetic scheme features prominent hues like the vibrant `#FFC300` (Amber), the sunny `#FFD700` (Gold), and the bold `#FF8D00` (Orange Peel). A softer tone, `#F5E08F` (Pale Goldenrod), provides a gentle counterbalance, preventing the palette from becoming overly intense. Designers can utilize this collection to evoke feelings of freshness, excitement, and warmth, making it excellent for projects that aim to be dynamic and inviting.

Best used for

  • Sports drink and energy product branding
  • Summer festival and outdoor event promotions
  • Creative agency websites and portfolios
  • Food blogs and recipe websites
  • Children's toy packaging and marketing
  • Energetic digital advertising campaigns

Suggested color roles

primary

Lead with `#FFC300` (Amber) as the main energetic yellow, perfect for focal points, headlines, or brand identity.

secondary

Use `#FFA500` (Orange) as a warm, inviting secondary color to complement the yellows, adding depth and approachability.

accent

Deploy `#FF8D00` (Orange Peel) for bold, high-impact accents, such as crucial calls-to-action or key navigational elements.

background

Utilize `#F5E08F` (Pale Goldenrod) as a soft, warm background to provide a gentle foundation that still feels vibrant.

text

Opt for dark brown or black text for optimal legibility across the bright and warm background colors.

Accessibility notes

  • Ensure high contrast for text on all yellow and orange backgrounds; dark text is crucial for readability.
  • The bold `#FF8D00` can be a powerful accent but requires careful pairing with text to meet accessibility standards.
  • For `#F5E08F` backgrounds, use dark text. White text may be readable on `#FFC300` or `#FFD700` for larger headings but check contrast.
  • Avoid using light-colored text on any of the lighter yellows to prevent readability issues.

Recommended combinations

Dynamic Duo

For high-impact sections or call-to-action blocks that demand attention.

#FFC300 · #FF8D00 · #F5E08F

Warm Gradient

Excellent for subtle background gradients, banners, or decorative elements.

#FFD700 · #FFA500 · #F5E08F

Zesty CTA

To create attention-grabbing buttons or highlight important information.

#FF8D00 · #FFC300 · #F5E08F

CSS variables

:root {
  --lemon-zest-burst-1: #FFC300;
  --lemon-zest-burst-2: #FFD700;
  --lemon-zest-burst-3: #F5E08F;
  --lemon-zest-burst-4: #FF8D00;
  --lemon-zest-burst-5: #FFA500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lemon-zest-burst": {
        1: "#FFC300",
        2: "#FFD700",
        3: "#F5E08F",
        4: "#FF8D00",
        5: "#FFA500",
      }
    }
  }
}

Related searches

yellow orange palettecitrus burst colorsenergetic branding designvibrant zest schemesummer festival palette

Palette colors

Hex values

Color 1#FFC300
·
Color 2#FFD700
·
Color 3#F5E08F
·
Color 4#FF8D00
·
Color 5#FFA500
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1.4:1Fail
1.2:1Fail
2
1.1:1Fail
1.1:1Fail
1.7:1Fail
1.4:1Fail
3
1.2:1Fail
1.1:1Fail
1.8:1Fail
1.5:1Fail
4
1.4:1Fail
1.7:1Fail
1.8:1Fail
1.2:1Fail
5
1.2:1Fail
1.4:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Lemon Zest Burst

View all vibrant