Palette

Citrus Zest Burst

A lively explosion of bright yellows, oranges, and fresh greens, like a splash of citrus zest.

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

#FFD700#FFA500#FF6347#ADFF2F#00CED1

Palette guide

How to use Citrus Zest Burst

Overview

The Citrus Zest Burst palette is a lively explosion of bright yellows, oranges, and fresh greens, like a splash of citrus zest. It features a brilliant #FFD700 (Gold), a classic #FFA500 (Orange), and a playful #FF6347 (Tomato), beautifully complemented by a vibrant #ADFF2F (GreenYellow) and a striking #00CED1 (DarkTurquoise). This palette offers designers and developers a versatile range of high-contrast, energetic hues for creating impactful and fresh 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

Health and wellness app interfaces
Eco-friendly product packaging
Summer outdoor event branding
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

#00CED1 (A striking dark turquoise that provides a refreshing, unexpected pop, excellent for highlights or interactive elements.)

background

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

text

#00CED1 (A strong, vibrant dark turquoise for energetic text on light backgrounds, or use a dark neutral like #333333 for general readability.)

Accessibility notes

Ensure high contrast when pairing lighter shades like #FFD700 with light text; use #00CED1 or #000000 for readability.
The vibrant #FFA500, #FF6347, #ADFF2F, and #00CED1 offer good contrast for white or very light text.
Avoid using #ADFF2F 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

Fresh & Bold

Excellent for vibrant hero sections, with #FFD700 as background, #ADFF2F for fresh accents, and #00CED1 for key CTAs.

#FFD700 · #ADFF2F · #00CED1

Zesty Contrast

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

#FFA500 · #FF6347 · #00CED1

Nature's Pop

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

#FFD700 · #FFA500 · #ADFF2F

CSS variables

:root {
  --citrus-zest-burst-1: #FFD700;
  --citrus-zest-burst-2: #FFA500;
  --citrus-zest-burst-3: #FF6347;
  --citrus-zest-burst-4: #ADFF2F;
  --citrus-zest-burst-5: #00CED1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-zest-burst": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF6347",
        4: "#ADFF2F",
        5: "#00CED1",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FFA500

Color 3#FF6347

Color 4#ADFF2F

Color 5#00CED1

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

1.1:1Fail

1.4:1Fail

1.5:1Fail

1.6:1Fail

1:1Fail

2.1:1Fail

1.5:1Fail

2.4:1Fail

1.5:1Fail

1.1:1Fail

1.6:1Fail

2.4:1Fail

1.6:1Fail

1.4:1Fail

1:1Fail

1.5:1Fail

1.6:1Fail

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