Palette

Vibrant Summer Zest

An energetic burst of sunny yellows and fiery oranges, evoking a refreshing summer drink.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFF3B0#FFD700#FFA07A#FF6347#D42B2B

Palette guide

How to use Vibrant Summer Zest

Overview

The Vibrant Summer Zest palette is an energetic burst of sunny yellows and fiery oranges, perfectly capturing the refreshing essence of a hot summer day. Featuring a cheerful pale yellow #FFF3B0, radiant gold #FFD700, warm light salmon #FFA07A, vibrant tomato red #FF6347, and a deep red #D42B2B, this collection is ideal for designers and developers seeking to evoke warmth, playfulness, and a refreshing mood. The gradient from light to deep red offers versatility for depth and emphasis. This palette is excellent for projects that aim to convey joy, vitality, and a bright, inviting atmosphere, making every design feel like a ray of sunshine.

Best used for

Summer product marketing and promotions
Food and beverage branding (citrus, refreshing drinks)
Travel and holiday-themed websites
Children's books and educational materials
Fashion or swimwear collections
Playful app interfaces and digital content

Suggested color roles

primary

Use #FFD700 for main headings or key brand elements to establish a cheerful and inviting tone.

secondary

Apply #FF6347 for calls-to-action, important highlights, or to add a dynamic burst of energy.

accent

Integrate #FFA07A or #FFF3B0 for subtle backgrounds, interactive states, or to soften transitions.

background

A crisp white or a very light cream like #FFF3B0 can serve as an airy backdrop, allowing the warmer colors to pop.

text

For optimal readability, use a dark brown or black on lighter colors like #FFF3B0, #FFD700, and #FFA07A. White text works well on #FF6347 and #D42B2B.

Accessibility notes

Ensure sufficient contrast for text, especially on lighter colors like #FFF3B0, #FFD700, and #FFA07A; dark text is essential.
The deeper red #D42B2B provides excellent contrast for white text, suitable for primary text on dark backgrounds.
Avoid using #FFF3B0 and #FFD700 for small text side-by-side due to their similar luminosities, which can hinder readability.
Test all vibrant color pairings for readability, particularly for users with color vision impairments, as hues are close.

Recommended combinations

Sunset Glow

Ideal for creating warm, inviting backgrounds, gradient effects, or a dynamic header section.

#D42B2B · #FF6347 · #FFA07A

Citrus Zest

Excellent for highlighting key information, playful accents, or a vibrant, energetic pop in illustrations.

#FFD700 · #FFF3B0 · #FF6347

Warm Balance

Perfect for calls-to-action, interactive elements, or to create a balanced yet lively visual hierarchy.

#FFA07A · #FFD700 · #D42B2B

CSS variables

:root {
  --vibrant-summer-zest-1: #FFF3B0;
  --vibrant-summer-zest-2: #FFD700;
  --vibrant-summer-zest-3: #FFA07A;
  --vibrant-summer-zest-4: #FF6347;
  --vibrant-summer-zest-5: #D42B2B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vibrant-summer-zest": {
        1: "#FFF3B0",
        2: "#FFD700",
        3: "#FFA07A",
        4: "#FF6347",
        5: "#D42B2B",
      }
    }
  }
}

Hex values

Color 1#FFF3B0

Color 2#FFD700

Color 3#FFA07A

Color 4#FF6347

Color 5#D42B2B

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

2.6:1Fail

4.5:1AA18

1.2:1Fail

1.4:1Fail

2.1:1Fail

3.6:1AA18

1.8:1Fail

1.4:1Fail

1.5:1Fail

2.5:1Fail

2.6:1Fail

2.1:1Fail

1.5:1Fail

1.7:1Fail

4.5:1AA18

3.6:1AA18

2.5:1Fail

1.7:1Fail

Similar palettes

More like Vibrant Summer Zest