Palette

Citrus Burst Energy

A lively and invigorating mix of vibrant oranges, yellows, and greens, bursting with fresh citrus energy.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Citrus Burst Energy 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 Burst Energy.

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

Data visualization

#FF5A00#FFAE00#F7DB02#C6EB32#7AF99E

Palette guide

How to use Citrus Burst Energy

Overview

The Citrus Burst Energy palette is a lively and invigorating mix of vibrant oranges, yellows, and greens, bursting with fresh citrus energy. Ranging from the fiery #FF5A00 (orange) to the refreshing #7AF99E (mint green), this palette offers a dynamic spectrum for designers seeking an energetic and fresh feel. Shades like #FFAE00, #F7DB02, and #C6EB32 provide a harmonious progression, perfect for creating depth and visual interest. Developers can utilize these hex codes to craft engaging UI elements, vibrant branding, or captivating digital art that resonates with vitality and natural zest. This palette is excellent for projects that aim to convey freshness, health, and an undeniable burst of energy.

Best used for

healthy food and beverage branding
summer seasonal marketing campaigns
sports and fitness app UI
juice bar and cafe branding
natural energy drink packaging
eco-friendly product design

Suggested color roles

primary

The vibrant #FFAE00 (orange-yellow) serves as an energetic primary color, excellent for main sections, headers, or prominent branding elements.

secondary

The cheerful #F7DB02 (bright yellow) provides a lively secondary option, ideal for subheadings, interactive buttons, or to add a touch of sunny optimism.

accent

The fiery #FF5A00 (orange) or refreshing #7AF99E (mint green) can be used for impactful accents, offering a dynamic contrast for important details or calls-to-action.

background

The lightest shade, #7AF99E, can serve as a fresh, energetic background. For a cleaner look, use a pure white (#FFFFFF) background to let the vibrant colors pop.

text

For optimal readability, use a dark color like #333333 or a deep forest green for text on lighter backgrounds like #F7DB02 or #7AF99E. White text works well on darker shades like #FF5A00 or #FFAE00.

Accessibility notes

Ensure sufficient contrast when using #F7DB02 with #C6EB32 for text; they may be too close in luminosity.
Pair #FF5A00 or #FFAE00 with light text (e.g., white or #7AF99E) for maximum readability.
Avoid using #C6EB32 for small text against #7AF99E backgrounds without careful contrast checking.
For body text, a dark gray or black on a light background (like white or a light cream) will offer best legibility.

Recommended combinations

Zesty Blend

Create vibrant gradients or energetic sections, perfect for highlighting fresh content or calls to action.

#FF5A00 · #FFAE00 · #F7DB02

Fresh Burst

Use the greens for natural elements and the yellow for bright highlights or refreshing backgrounds.

#C6EB32 · #7AF99E · #F7DB02

Dynamic Contrast

Ideal for creating striking visual dynamics, lively backgrounds, or bold graphic illustrations.

#FF5A00 · #7AF99E · #FFAE00

CSS variables

:root {
  --citrus-burst-energy-1: #FF5A00;
  --citrus-burst-energy-2: #FFAE00;
  --citrus-burst-energy-3: #F7DB02;
  --citrus-burst-energy-4: #C6EB32;
  --citrus-burst-energy-5: #7AF99E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-burst-energy": {
        1: "#FF5A00",
        2: "#FFAE00",
        3: "#F7DB02",
        4: "#C6EB32",
        5: "#7AF99E",
      }
    }
  }
}

Hex values

Color 1#FF5A00

Color 2#FFAE00

Color 3#F7DB02

Color 4#C6EB32

Color 5#7AF99E

Accessibility

Contrast checker

1.7:1Fail

2.2:1Fail

2.3:1Fail

2.4:1Fail

1.7:1Fail

1.3:1Fail

1.4:1Fail

2.2:1Fail

1.3:1Fail

1:1Fail

1.1:1Fail

2.3:1Fail

1.4:1Fail

1:1Fail

2.4:1Fail

1.4:1Fail

1.1:1Fail

1:1Fail

Similar palettes

More like Citrus Burst Energy

Citrus Burst Energy

See it in context.

Ready when you are.

Built with Citrus Burst Energy.

How to use Citrus Burst Energy

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Zesty Blend

Fresh Burst

Dynamic Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Burst Energy