Back to palettes

Palette

Zesty Splash

Bursting with bright, refreshing energy, like a playful splash of fresh and vibrant citrus fruits.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFB300#FDD835#FFF176#FF9800#FB8C00

Palette guide

How to use Zesty Splash

Overview

The Zesty Splash palette bursts with bright, refreshing energy, like a playful splash of fresh and vibrant citrus fruits. This lively collection focuses on sunny yellows and energetic oranges, featuring a brilliant Orange (#FFB300), a cheerful Yellow (#FDD835), and a sparkling Pale Yellow (#FFF176). The slightly deeper Orange (#FF9800) and Dark Orange (#FB8C00) provide a grounded richness. Designers and developers can use these captivating colors to create engaging, fun interfaces, exciting branding, or dynamic content that evokes summer, joy, and a refreshing vitality, perfect for playful and inviting digital experiences.

Best used for

  • Summer event and festival promotions
  • Water park or amusement park branding
  • Juice bar and smoothie shop design
  • Playful mobile app interfaces
  • Children's product marketing
  • Energetic social media campaigns

Suggested color roles

primary

Orange (#FFB300) serves as the main playful pop, ideal for primary calls to action or focal points.

secondary

Yellow (#FDD835) provides a bright and cheerful supporting role, good for larger sections or background elements.

accent

Pale Yellow (#FFF176) acts as a sparkling highlight, perfect for interactive elements or subtle details.

background

Pale Yellow (#FFF176) creates a very light, airy, and bright background, radiating warmth and openness.

text

For strong headings, use Dark Orange (#FB8C00). For body text, a dark brown or black ensures optimal readability.

Accessibility notes

  • Pale Yellow (#FFF176) is very light; dark text (e.g., black, dark brown, or #FB8C00) is essential for readability.
  • Dark Orange (#FB8C00) and Orange (#FFB300) offer excellent contrast for text on lighter yellows in the palette.
  • Avoid using light-colored text on Yellow (#FDD835) to prevent readability issues, especially for smaller fonts.
  • Ensure interactive elements using #FFF176 have sufficient contrast with their surrounding elements.

Recommended combinations

Bright Splash

Creates a refreshing light-to-medium gradient, ideal for backgrounds, overlays, or a vibrant wash of color.

#FFF176 · #FDD835 · #FFB300

Deep Zest

Offers richer, grounded citrus tones for headings, borders, or emphasizing depth in design.

#FF9800 · #FB8C00 · #FDD835

Energetic Duo

Provides a strong contrast with a bright highlight, perfect for calls to action, festive elements, or dynamic UI.

#FFB300 · #FF9800 · #FFF176

CSS variables

:root {
  --zesty-splash-1: #FFB300;
  --zesty-splash-2: #FDD835;
  --zesty-splash-3: #FFF176;
  --zesty-splash-4: #FF9800;
  --zesty-splash-5: #FB8C00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zesty-splash": {
        1: "#FFB300",
        2: "#FDD835",
        3: "#FFF176",
        4: "#FF9800",
        5: "#FB8C00",
      }
    }
  }
}

Related searches

yellow orange splashzesty summer palettebright playful colorsfruity ui designenergetic brand scheme

Palette colors

Hex values

Color 1#FFB300
·
Color 2#FDD835
·
Color 3#FFF176
·
Color 4#FF9800
·
Color 5#FB8C00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.5:1Fail
1.2:1Fail
1.3:1Fail
2
1.3:1Fail
1.2:1Fail
1.5:1Fail
1.7:1Fail
3
1.5:1Fail
1.2:1Fail
1.9:1Fail
2:1Fail
4
1.2:1Fail
1.5:1Fail
1.9:1Fail
1.1:1Fail
5
1.3:1Fail
1.7:1Fail
2:1Fail
1.1:1Fail

Similar palettes

More like Zesty Splash

View all vibrant