Back to palettes

Palette

Summer Zest Spritz

Bright, effervescent yellows and oranges, like a sparkling spritzer on a hot summer day.

VibrantEnergetic5 colors
More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Summer Zest Spritz 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 Summer Zest Spritz.

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

Data visualization

#FFD700#FFA500#FF4500#F0E68C#FFFFE0

Palette guide

How to use Summer Zest Spritz

Overview

The Summer Zest Spritz palette is a vibrant and effervescent collection, reminiscent of sparkling spritzers on a hot summer day. It features a bright gold (#FFD700), a lively orange (#FFA500), an energetic red-orange (#FF4500), a subtle pale yellow (#F0E68C), and a delicate light yellow (#FFFFE0). This palette is ideal for projects demanding an energetic, refreshing, and cheerful aesthetic, perfect for captivating audiences with its dynamic and spirited color combinations.

Best used for

  • Food and beverage product branding
  • Summer marketing campaigns and promotions
  • Energetic and playful website designs
  • Sports and active lifestyle product packaging
  • Children's entertainment and toy branding
  • Event marketing materials and digital ads

Suggested color roles

primary

Employ #FFD700 as the main bright and inviting hue for headlines, primary buttons, or dominant graphical elements.

secondary

Use #FFA500 to add warmth and depth, ideal for supporting text, subheadings, or secondary interactive elements.

accent

Apply #FF4500 for high-energy calls to action, alerts, or to create a bold, unmissable focal point.

background

Utilize #FFFFE0 as a soft, airy base that allows the more vibrant colors to truly pop without overwhelming the design.

text

For optimal legibility, use a dark charcoal or black text against the lighter yellow and orange shades.

Accessibility notes

  • Ensure sufficient contrast for text on very light colors like #FFFFE0 and #F0E68C, using dark text.
  • Avoid placing #FFD700 text on #F0E68C backgrounds due to low contrast.
  • The vibrant #FF4500 provides excellent contrast against white or very light backgrounds for calls to action.
  • White text on #FFA500 or #FF4500 can be effective for headings, but always check legibility.

Recommended combinations

Citrus Burst

Create energetic branding, impactful calls to action, or vibrant gradients for a lively feel.

#FFD700 · #FFA500 · #FF4500

Soft Zest

Ideal for light backgrounds, subtle accents, or UI elements that need a gentle, refreshing touch.

#FFFFE0 · #F0E68C · #FFA500

Vibrant Punch

Use for eye-catching headlines, festive designs, or to create a dynamic and playful visual impact.

#FFD700 · #FF4500 · #FFFFE0

CSS variables

:root {
  --summer-zest-spritz-1: #FFD700;
  --summer-zest-spritz-2: #FFA500;
  --summer-zest-spritz-3: #FF4500;
  --summer-zest-spritz-4: #F0E68C;
  --summer-zest-spritz-5: #FFFFE0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "summer-zest-spritz": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF4500",
        4: "#F0E68C",
        5: "#FFFFE0",
      }
    }
  }
}

Related searches

energetic color palettecitrus design colorssummer branding palettebright orange yellowrefreshing web colors

Palette colors

Hex values

Color 1#FFD700
·
Color 2#FFA500
·
Color 3#FF4500
·
Color 4#F0E68C
·
Color 5#FFFFE0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.5:1Fail
1.1:1Fail
1.4:1Fail
2
1.4:1Fail
1.7:1Fail
1.5:1Fail
1.9:1Fail
3
2.5:1Fail
1.7:1Fail
2.7:1Fail
3.4:1AA18
4
1.1:1Fail
1.5:1Fail
2.7:1Fail
1.3:1Fail
5
1.4:1Fail
1.9:1Fail
3.4:1AA18
1.3:1Fail

Similar palettes

More like Summer Zest Spritz

View all Vibrant
Citrus Zest Splash
Tropical Zest Punch
Citrus Zest Burst
Energetic Citrus Punch
Lemon Grove Zest
Neon Arcade Blitz