Back to palettes

Palette

Zesty Citrus Burst

A burst of vibrant, zesty colors, evoking the refreshing and invigorating taste 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

#FFD700#FFA500#FF4500#90EE90#ADD8E6

Palette guide

How to use Zesty Citrus Burst

Overview

The Zesty Citrus Burst palette (ID: zesty-citrus-burst) delivers a refreshing and invigorating burst of color, combining vibrant warm tones with cool, crisp accents. This dynamic collection features a radiant Gold (#FFD700), a vivid Orange (#FFA500), and a striking OrangeRed (#FF4500), balanced by a fresh Pale Green (#90EE90) and a serene Light Blue (#ADD8E6). Designers and developers can leverage this palette to create engaging, energetic experiences that feel both lively and balanced. It's perfect for projects needing to convey freshness, excitement, and a touch of unexpected harmony.

Best used for

  • Creative agency websites
  • Summer product launches
  • Youth-oriented brand campaigns
  • Healthy food packaging design
  • Event branding and promotions
  • Vibrant digital interface elements

Suggested color roles

primary

Orange (#FFA500) serves as the energetic core, ideal for primary buttons, headings, or focal points.

secondary

Gold (#FFD700) provides a bright, cheerful base, perfect for background sections or supporting elements.

accent

OrangeRed (#FF4500) delivers a bold, attention-grabbing pop for urgent calls to action or impactful highlights.

background

Light Blue (#ADD8E6) offers a refreshing, cool counterpoint, ideal for airy backgrounds or separating sections.

text

For impactful text, use OrangeRed (#FF4500). For body text, a dark charcoal or black ensures optimal readability.

Accessibility notes

  • Ensure sufficient contrast for text on Light Blue (#ADD8E6) or Pale Green (#90EE90) backgrounds; use dark text.
  • OrangeRed (#FF4500) and Orange (#FFA500) provide good visibility for text on lighter backgrounds.
  • Avoid using light-colored text on Pale Green (#90EE90) to prevent readability issues.
  • Gold (#FFD700) offers a bright base, but text on it should be a darker hue for clear contrast.

Recommended combinations

Citrus Punch

Creates an immediate, energetic burst, ideal for headlines, banners, or calls to action.

#FFD700 · #FFA500 · #FF4500

Fresh Balance

Combines cool tones with a warm accent, perfect for designs emphasizing freshness and harmony.

#90EE90 · #ADD8E6 · #FFA500

Vibrant Contrast

Offers a bold and refreshing visual statement, suitable for impactful UI elements or graphic design.

#FF4500 · #ADD8E6 · #FFD700

CSS variables

:root {
  --zesty-citrus-burst-1: #FFD700;
  --zesty-citrus-burst-2: #FFA500;
  --zesty-citrus-burst-3: #FF4500;
  --zesty-citrus-burst-4: #90EE90;
  --zesty-citrus-burst-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zesty-citrus-burst": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF4500",
        4: "#90EE90",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

bright citrus paletteenergetic color schemeorange blue greenfresh ui colorssummer zest design

Palette colors

Hex values

Color 1#FFD700
·
Color 2#FFA500
·
Color 3#FF4500
·
Color 4#90EE90
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.5:1Fail
1:1Fail
1.1:1Fail
2
1.4:1Fail
1.7:1Fail
1.4:1Fail
1.3:1Fail
3
2.5:1Fail
1.7:1Fail
2.4:1Fail
2.3:1Fail
4
1:1Fail
1.4:1Fail
2.4:1Fail
1.1:1Fail
5
1.1:1Fail
1.3:1Fail
2.3:1Fail
1.1:1Fail

Similar palettes

More like Zesty Citrus Burst

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