Palette

Citrus Zest Burst

A lively and refreshing blend of citrus tones, full of sun-kissed energy.

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

#FFA500#FFD700#008000#FFFFFF#FF4500

Palette guide

How to use Citrus Zest Burst

Overview

The Citrus Zest Burst palette is a lively and refreshing blend of citrus tones, full of sun-kissed energy. It features a bold #FFA500 (Orange) and a radiant #FFD700 (Gold), perfectly contrasted by a deep #008000 (Green) and a crisp #FFFFFF (White), with an accent of #FF4500 (OrangeRed). This palette offers designers and developers a high-contrast, energetic range of hues for creating impactful and fresh digital experiences. It's ideal for projects that aim to evoke vitality, nature, and a vibrant, healthy aesthetic, making it excellent for dynamic interfaces and engaging branding with clear visual hierarchy.

Best used for

Health and wellness branding
Eco-friendly product packaging
Summer outdoor event websites
Food and beverage promotions (especially healthy options)
Digital marketing campaigns with energetic themes
Interactive educational apps

Suggested color roles

primary

#FFD700 (A bright, optimistic gold perfect for main headers, prominent UI elements, or cheerful branding.)

secondary

#FFA500 (A classic orange, ideal for subheadings, secondary calls-to-action, or navigational elements.)

accent

#008000 (A deep, vibrant green that provides a refreshing pop, excellent for highlights, interactive elements, or alerts.)

background

#FFFFFF (A clean, crisp white base that provides an airy and modern canvas, allowing the vibrant colors to pop.)

text

#008000 (A strong, vibrant green for energetic text on light backgrounds, or use a true black #000000 for general readability.)

Accessibility notes

Ensure high contrast when pairing #FFFFFF with light text; use #008000, #FFA500, or #FF4500 for readability.
The vibrant #FFA500, #FFD700, #008000, and #FF4500 offer good contrast for white text.
Avoid using #FFD700 for small text on #FFFFFF backgrounds, as contrast may be insufficient.
For interactive elements, maintain at least a 3:1 contrast ratio against adjacent colors to meet WCAG AA standards.

Recommended combinations

Fresh & Bold

Excellent for clean hero sections, with #FFFFFF as background, #008000 for fresh accents, and #FFA500 for key CTAs.

#FFFFFF · #008000 · #FFA500

Zesty Contrast

Ideal for infographics or layered UI elements, showcasing a dynamic interplay between warm and cool tones.

#FFD700 · #FF4500 · #008000

Nature's Pop

Use #FFFFFF as a clean base, #FFA500 for high-impact titles, and #008000 for striking illustrations or secondary information.

#FFFFFF · #FFA500 · #008000

CSS variables

:root {
  --citrus-zest-burst-2-1: #FFA500;
  --citrus-zest-burst-2-2: #FFD700;
  --citrus-zest-burst-2-3: #008000;
  --citrus-zest-burst-2-4: #FFFFFF;
  --citrus-zest-burst-2-5: #FF4500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-zest-burst-2": {
        1: "#FFA500",
        2: "#FFD700",
        3: "#008000",
        4: "#FFFFFF",
        5: "#FF4500",
      }
    }
  }
}

Hex values

Color 1#FFA500

Color 2#FFD700

Color 3#008000

Color 4#FFFFFF

Color 5#FF4500

Accessibility

Contrast checker

1.4:1Fail

2.6:1Fail

2:1Fail

1.7:1Fail

1.4:1Fail

3.7:1AA18

1.4:1Fail

2.5:1Fail

2.6:1Fail

3.7:1AA18

5.1:1AA

1.5:1Fail

2:1Fail

1.4:1Fail

5.1:1AA

3.4:1AA18

1.7:1Fail

2.5:1Fail

1.5:1Fail

3.4:1AA18

Similar palettes

More like Citrus Zest Burst

Citrus Zest Burst

See it in context.

Ready when you are.

Built with Citrus Zest Burst.

How to use Citrus Zest Burst

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fresh & Bold

Zesty Contrast

Nature's Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Zest Burst