Palette

Citrus Burst Zest

A lively explosion of sun-ripened citrus fruits, full of energy and cheer.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD447#FF7B00#F4442E#E3E2DF#A3A380

Palette guide

How to use Citrus Burst Zest

Overview

The Citrus Burst Zest palette offers a dynamic blend of vibrant and grounding tones, perfect for designs that need both energy and sophistication. It features a bright #FFD447 (Lemon Yellow) and powerful, zesty oranges like #FF7B00 (Orange Peel) and #F4442E (Fiery Red-Orange). These energetic hues are beautifully balanced by the subdued neutrals #E3E2DF (Light Gray) and #A3A380 (Earthy Green-Gray). This combination provides designers and developers with a versatile toolkit for creating impactful yet balanced visuals, ideal for brand identities, web interfaces, or editorial layouts that desire a fresh and modern feel with a touch of warmth.

Best used for

Modern brand identity
Editorial design and magazine layouts
Packaging for gourmet or natural products
Web and mobile application UI
Marketing materials with a fresh aesthetic
Event branding for contemporary gatherings

Suggested color roles

primary

#FF7B00 (A bold, zesty orange that commands attention, perfect for main calls-to-action or prominent branding.)

secondary

#FFD447 (A bright lemon yellow, excellent for secondary elements, highlights, or a cheerful background.)

accent

#F4442E (A fiery red-orange for high-impact accents, warnings, or urgent notifications.)

background

#E3E2DF (A soft, neutral light gray that provides a clean, modern backdrop, allowing vibrant colors to pop.)

text

#A3A380 (A sophisticated earthy green-gray, offering excellent readability against light backgrounds, or use a true black #000000 for maximum contrast.)

Accessibility notes

Ensure high contrast when pairing #FFD447 with light text; use #A3A380 or #000000 for text readability.
The vibrant #FF7B00 and #F4442E provide good contrast for white or light gray text.
Avoid using #E3E2DF for small text against #A3A380, as contrast may be insufficient.
For interactive elements, maintain at least a 3:1 contrast ratio against adjacent colors to meet WCAG AA non-text contrast.

Recommended combinations

Vibrant Statement

Use #E3E2DF as a clean background, #FF7B00 for bold headlines/CTAs, and #A3A380 for body text.

#E3E2DF · #FF7B00 · #A3A380

Zesty Highlight

Excellent for data visualization, where #A3A380 provides context and #FFD447/#F4442E highlight key data points.

#A3A380 · #FFD447 · #F4442E

Modern Freshness

Ideal for clean, modern interfaces with #E3E2DF as background, #FFD447 for soft accents, and #FF7B00 for interactive elements.

#E3E2DF · #FFD447 · #FF7B00

CSS variables

:root {
  --citrus-burst-zest-2-1: #FFD447;
  --citrus-burst-zest-2-2: #FF7B00;
  --citrus-burst-zest-2-3: #F4442E;
  --citrus-burst-zest-2-4: #E3E2DF;
  --citrus-burst-zest-2-5: #A3A380;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-burst-zest-2": {
        1: "#FFD447",
        2: "#FF7B00",
        3: "#F4442E",
        4: "#E3E2DF",
        5: "#A3A380",
      }
    }
  }
}

Hex values

Color 1#FFD447

Color 2#FF7B00

Color 3#F4442E

Color 4#E3E2DF

Color 5#A3A380

Accessibility

Contrast checker

1.8:1Fail

2.6:1Fail

1.1:1Fail

1.8:1Fail

1.4:1Fail

2:1Fail

1:1Fail

2.6:1Fail

1.4:1Fail

2.8:1Fail

1.4:1Fail

1.1:1Fail

2:1Fail

2.8:1Fail

2:1Fail

1.8:1Fail

1:1Fail

1.4:1Fail

2:1Fail

Similar palettes

More like Citrus Burst Zest

Citrus Burst Zest

See it in context.

Ready when you are.

Built with Citrus Burst Zest.

How to use Citrus Burst Zest

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Vibrant Statement

Zesty Highlight

Modern Freshness

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Burst Zest