Back to palettes

Palette

Citrus Zest Splash

Bursting with tangy yellows and oranges, this palette is a splash of summer's energetic spirit.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFBF00#FFD700#FDFD96#FFA500#FF8C00

Palette guide

How to use Citrus Zest Splash

Overview

The Citrus Zest Splash palette bursts with tangy yellows and oranges, embodying summer's energetic spirit. Featuring the vibrant `#FFBF00` and classic `#FFD700`, alongside the soft `#FDFD96`, this palette is perfect for designers and developers seeking to create lively, cheerful, and highly engaging digital experiences. The deeper tones of `#FFA500` and `#FF8C00` provide crucial contrast and warmth, grounding the lighter shades while maintaining a powerful, energetic punch. This collection is ideal for projects that demand high energy, a playful disposition, and a strong visual impact, making it excellent for consumer-facing and seasonal applications.

Best used for

  • Summer-themed websites and marketing campaigns
  • Food and beverage branding, especially for juices or snacks
  • Children's product packaging and interactive apps
  • Event promotion and festive digital advertising
  • Interactive dashboards requiring visual energy
  • Call-to-action buttons and conversion-focused design

Suggested color roles

primary

Use `#FFBF00` as a dominant, energetic color for main sections or brand elements, grabbing immediate attention.

secondary

Employ `#FFD700` for headers, highlights, or secondary UI elements, adding a bright and cheerful layer.

accent

Apply `#FF8C00` for high-impact calls-to-action, important notifications, or to create strong visual anchors.

background

Utilize `#FDFD96` as a soft, luminous background, providing a clean canvas that allows the vibrant colors to truly shine.

text

For optimal readability, a dark charcoal or black is highly recommended for body text. Use `#FF8C00` for impactful headings against lighter backgrounds.

Accessibility notes

  • Critically evaluate contrast for all text, especially when placing any text on bright yellows like `#FDFD96` or `#FFD700`.
  • Avoid using light text on any of the lighter orange/yellow tones to prevent significant readability issues.
  • Rigorously use a contrast checker for all interactive elements and text to ensure compliance with WCAG standards.
  • Consider using the darkest color, `#FF8C00`, for essential text to guarantee legibility across all backgrounds.

Recommended combinations

Sunny Zest

Ideal for creating vibrant, layered backgrounds or energetic product showcases that feel light and airy.

#FDFD96 · #FFD700 · #FFBF00

Tangy Punch

Excellent for defining clear hierarchies, calls-to-action, or progress indicators with vibrant energy.

#FFBF00 · #FFA500 · #FF8C00

Summer Gradient

Effective for dynamic elements, animated transitions, or to convey a clear progression of energy and warmth.

#FFD700 · #FFA500 · #FF8C00

CSS variables

:root {
  --citrus-zest-splash-1: #FFBF00;
  --citrus-zest-splash-2: #FFD700;
  --citrus-zest-splash-3: #FDFD96;
  --citrus-zest-splash-4: #FFA500;
  --citrus-zest-splash-5: #FF8C00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-zest-splash": {
        1: "#FFBF00",
        2: "#FFD700",
        3: "#FDFD96",
        4: "#FFA500",
        5: "#FF8C00",
      }
    }
  }
}

Related searches

vibrant yellow orange paletteenergetic summer colorscitrus inspired designbright web UI schemeplayful branding colors

Palette colors

Hex values

Color 1#FFBF00
·
Color 2#FFD700
·
Color 3#FDFD96
·
Color 4#FFA500
·
Color 5#FF8C00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.2:1Fail
1.4:1Fail
2
1.2:1Fail
1.3:1Fail
1.4:1Fail
1.7:1Fail
3
1.5:1Fail
1.3:1Fail
1.8:1Fail
2.2:1Fail
4
1.2:1Fail
1.4:1Fail
1.8:1Fail
1.2:1Fail
5
1.4:1Fail
1.7:1Fail
2.2:1Fail
1.2:1Fail

Similar palettes

More like Citrus Zest Splash

View all vibrant
Zesty Morning
Citrus Burst Joy
Citrus Zest Pop
Citrus Zest Splash
Energetic Citrus Zest
Lemon Zest Burst