Palette

Orchard Zest Pop

A lively explosion of vibrant citrus and berry tones, bursting with youthful, playful energy.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Orchard Zest Pop 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 Orchard Zest Pop.

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

Data visualization

#FFC300#FF5733#C70039#900C3F#581845

Palette guide

How to use Orchard Zest Pop

Overview

The Orchard Zest Pop palette bursts with youthful, playful energy, offering a vibrant explosion of citrus and berry tones. This collection is ideal for projects needing an energetic and lively feel. Featuring a bright yellow #FFC300, a fiery orange #FF5733, a deep berry red #C70039, a rich magenta #900C3F, and a sophisticated plum #581845, it provides designers and developers with a dynamic range for creating engaging experiences. The vivid contrasts and bold hues ensure designs stand out, evoking a sense of fun and excitement.

Best used for

Youth-focused brand identities
Summer event promotions
Food and beverage packaging
Engaging digital advertisements
Playful mobile application interfaces
Creative and artistic portfolios

Suggested color roles

primary

#FFC300 as a zesty, energetic base for main elements, radiating optimism.

secondary

#FF5733 to introduce dynamism and warmth, perfect for supporting visuals or calls to action.

accent

#C70039 for a bold pop, drawing attention to critical information or interactive elements.

background

#581845 provides a deep, contrasting foundation, allowing brighter colors to truly 'pop'.

text

For light backgrounds, use black or a dark charcoal. For dark backgrounds like #581845, use #FFC300 or a crisp white for optimal readability.

Accessibility notes

Ensure sufficient contrast for #FFC300 and #FF5733 when used with text, especially against lighter backgrounds.
Avoid using #900C3F or #C70039 for small body text on similarly dark backgrounds without strong contrast.
Always test text and background color pairs against WCAG AA standards for readability.
Consider using larger font sizes for lighter text on darker backgrounds such as #581845.

Recommended combinations

Citrus Punch

Excellent for energetic headings, calls to action, or vibrant graphic elements.

#FFC300 · #FF5733 · #C70039

Berry Depth

Creates a sophisticated, yet vibrant contrast, suitable for upscale branding with a playful twist.

#900C3F · #581845 · #FFC300

Playful Gradient

Ideal for modern web elements, interactive states, or dynamic background transitions.

#FF5733 · #C70039 · #900C3F

CSS variables

:root {
  --orchard-zest-pop-1: #FFC300;
  --orchard-zest-pop-2: #FF5733;
  --orchard-zest-pop-3: #C70039;
  --orchard-zest-pop-4: #900C3F;
  --orchard-zest-pop-5: #581845;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "orchard-zest-pop": {
        1: "#FFC300",
        2: "#FF5733",
        3: "#C70039",
        4: "#900C3F",
        5: "#581845",
      }
    }
  }
}

Hex values

Color 1#FFC300

Color 2#FF5733

Color 3#C70039

Color 4#900C3F

Color 5#581845

Accessibility

Contrast checker

2:1Fail

3.7:1AA18

5.7:1AA

8:1AAA

2:1Fail

1.9:1Fail

2.9:1Fail

4.1:1AA18

3.7:1AA18

1.9:1Fail

1.5:1Fail

2.1:1Fail