Back to palettes

Palette

Citrus Zest

A burst of vivid oranges and yellows, sparkling with the fresh, tangy energy of 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 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.

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

Data visualization

#FFCC00#FF9900#FF6600#FF3300#FFD966

Palette guide

How to use Citrus Zest

Overview

The Citrus Zest palette is a dynamic and invigorating collection of warm hues, perfect for projects demanding energy and vibrancy. Dominated by bright yellows and fiery oranges, it features shades like the sunny #FFCC00, the rich #FF9900, and the bold #FF6600, culminating in the intense #FF3300. A softer #FFD966 offers balance. This palette is ideal for designers looking to infuse a sense of freshness, excitement, and warmth into their digital or print work. Its lively nature makes it suitable for conveying enthusiasm and approachability, capturing attention with its inherent cheerfulness and zest for life.

Best used for

  • Summer-themed marketing campaigns
  • Food and beverage branding (especially juices, snacks)
  • Children's product packaging and websites
  • Event promotions for festivals or outdoor activities
  • Fitness and wellness app interfaces
  • Creative blog designs

Suggested color roles

primary

Use #FF9900 as a vibrant primary color for headings or key call-to-action buttons, conveying energy and urgency.

secondary

Employ #FFCC00 for secondary elements like subheadings, background accents, or interactive elements to maintain a bright, inviting feel.

accent

Reserve #FF3300 for impactful accents such as urgent alerts, progress indicators, or small, high-contrast details that need to pop.

background

Utilize #FFD966 for light, airy backgrounds to provide a soft canvas that allows the bolder colors to shine without overwhelming.

text

For body text, use a dark charcoal or black for maximum readability against the light backgrounds, or a deep brown for a softer, earthy contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing #FFD966 with lighter text; consider a darker shade for readability.
  • Bright primary colors like #FFCC00 and #FF9900 may require dark text (e.g., black or dark grey) to pass WCAG AA standards.
  • Avoid using #FF3300 on #FF6600 for text, as their similar luminance will cause poor contrast.
  • Always test color combinations with accessibility checkers to confirm sufficient contrast ratios for all users.

Recommended combinations

Sunny Burst

Excellent for cheerful headers and energetic graphic elements, creating a bright and inviting feel.

#FFCC00 · #FF6600 · #FFD966

Dynamic Core

Ideal for prominent call-to-actions, brand logos, or elements requiring high impact and warmth.

#FF9900 · #FF3300 · #FFCC00

Soft Zest

Provides a gentler, more approachable look suitable for background gradients or subtle branding elements.

#FFD966 · #FF9900 · #FF6600

CSS variables

:root {
  --citrus-zest-1: #FFCC00;
  --citrus-zest-2: #FF9900;
  --citrus-zest-3: #FF6600;
  --citrus-zest-4: #FF3300;
  --citrus-zest-5: #FFD966;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-zest": {
        1: "#FFCC00",
        2: "#FF9900",
        3: "#FF6600",
        4: "#FF3300",
        5: "#FFD966",
      }
    }
  }
}

Related searches

vibrant orange color paletteenergetic yellow and orange huesfruity color schemesbright web design colorscitrus inspired branding

Palette colors

Hex values

Color 1#FFCC00
·
Color 2#FF9900
·
Color 3#FF6600
·
Color 4#FF3300
·
Color 5#FFD966
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
2.4:1Fail
1.1:1Fail
2
1.4:1Fail
1.4:1Fail
1.7:1Fail
1.6:1Fail
3
1.9:1Fail
1.4:1Fail
1.2:1Fail
2.1:1Fail
4
2.4:1Fail
1.7:1Fail
1.2:1Fail
2.7:1Fail
5
1.1:1Fail
1.6:1Fail
2.1:1Fail
2.7:1Fail

Similar palettes

More like Citrus Zest

View all vibrant
Citrus Burst Joy
Citrus Grove Delight
Golden Hour Zest
Solar Flare Bright
Solar Flare Burst
Solar Flare Burst