Back to palettes

Palette

Citrus Zest Burst

A burst of energetic yellows and oranges, vibrant and refreshing like the 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 Citrus 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 Citrus Zest Burst.

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

Data visualization

#FF8C00#FFD700#FFFF00#ADFF2F#FF4500

Palette guide

How to use Citrus Zest Burst

Overview

The Citrus Zest Burst palette is a vibrant and refreshing explosion of energetic yellows and oranges, like the zest of fresh citrus fruits. It features a bold #FF8C00 (DarkOrange), a radiant #FFD700 (Gold), a brilliant #FFFF00 (Yellow), and a lively #ADFF2F (GreenYellow), with an accent of #FF4500 (OrangeRed). This palette offers designers and developers a high-energy range of warm and fresh hues for creating impactful and lively digital experiences. It's ideal for projects that aim to evoke vitality, excitement, and a vibrant, healthy aesthetic, making it excellent for dynamic interfaces and engaging branding.

Best used for

  • Youth-oriented branding and marketing
  • Summer festival promotions
  • Energy drink packaging
  • Interactive game interfaces
  • Health and fitness app design
  • Digital art and illustration

Suggested color roles

primary

#FFFF00 (A brilliant yellow, perfect for main headers, prominent UI elements, or cheerful branding that demands attention.)

secondary

#FFD700 (A radiant gold, ideal for supporting content, subheadings, or secondary calls-to-action.)

accent

#FF4500 (A powerful orange-red, perfect for high-impact alerts, primary buttons, or key highlights that need to pop.)

background

#FFD700 (A warm, inviting gold base that emanates positivity, suitable for full-page backgrounds or large sections.)

text

#FF8C00 (For strong, energetic text on light backgrounds, or use a dark neutral like #333333 for general readability.)

Accessibility notes

  • Ensure high contrast when pairing #FFFF00 or #FFD700 with light text; use #FF4500 or #000000 for readability.
  • The vibrant #FF8C00, #FFD700, #FFFF00, #ADFF2F, and #FF4500 offer good contrast for white or very light text.
  • Avoid using #FFFF00 for small text on complex backgrounds, as readability can be challenging.
  • For interactive elements, maintain at least a 3:1 contrast ratio against adjacent colors to meet WCAG AA standards.

Recommended combinations

Energetic Trio

Excellent for vibrant hero sections, with #FFFF00 as background, #FF8C00 for main content, and #ADFF2F for striking accents.

#FFFF00 · #FF8C00 · #ADFF2F

Zesty Gradient

Ideal for creating smooth, inviting gradients in hero sections or visual accents that convey warmth and energy.

#FFD700 · #FF8C00 · #FF4500

Fresh Pop

Use #FFFF00 as a clean base, #ADFF2F for fresh graphical elements, and #FF4500 for high-impact calls-to-action.

#FFFF00 · #ADFF2F · #FF4500

CSS variables

:root {
  --citrus-zest-burst-3-1: #FF8C00;
  --citrus-zest-burst-3-2: #FFD700;
  --citrus-zest-burst-3-3: #FFFF00;
  --citrus-zest-burst-3-4: #ADFF2F;
  --citrus-zest-burst-3-5: #FF4500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-zest-burst-3": {
        1: "#FF8C00",
        2: "#FFD700",
        3: "#FFFF00",
        4: "#ADFF2F",
        5: "#FF4500",
      }
    }
  }
}

Related searches

vibrant yellow orange green paletteenergetic citrus colorsbright fruit color schemeplayful ui designsummer branding palette

Palette colors

Hex values

Color 1#FF8C00
·
Color 2#FFD700
·
Color 3#FFFF00
·
Color 4#ADFF2F
·
Color 5#FF4500
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.2:1Fail
1.9:1Fail
1.5:1Fail
2
1.7:1Fail
1.3:1Fail
1.1:1Fail
2.5:1Fail
3
2.2:1Fail
1.3:1Fail
1.1:1Fail
3.2:1AA18
4
1.9:1Fail
1.1:1Fail
1.1:1Fail
2.8:1Fail
5
1.5:1Fail
2.5:1Fail
3.2:1AA18
2.8:1Fail

Similar palettes

More like Citrus Zest Burst

View all vibrant
Citrus Grove Dawn
Citrus Grove Delight
Citrus Zest Burst
Citrus Zest Splash
Fresh Citrus Zest
Lemon Zest