Back to palettes

Palette

Citrus Zest Splash

A lively, zesty blend of bright oranges and yellows, reminiscent of fresh citrus fruits.

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

#FFB300#FF6F00#FFD147#4CAF50#FFECB3

Palette guide

How to use Citrus Zest Splash

Overview

The Citrus Zest Splash palette is a lively, zesty blend of bright oranges and yellows, reminiscent of fresh citrus fruits, energized by a pop of green. Featuring the bold `#FFB300`, vibrant `#FF6F00`, and sunny `#FFD147`, this palette is perfect for designers and developers aiming to create fresh, energetic, and eye-catching experiences. The unexpected inclusion of `#4CAF50` (a vibrant green) provides a refreshing contrast, while `#FFECB3` offers a soft, light base. This collection is ideal for projects that need to convey vitality, natural freshness, and a playful yet sophisticated zest, making it highly versatile for various digital applications.

Best used for

  • Health and wellness app interfaces
  • Organic food and beverage branding
  • Eco-friendly product packaging with a fresh feel
  • Energetic landing pages and marketing campaigns
  • Children's activity platforms or educational content
  • Spring/summer fashion or lifestyle blogs

Suggested color roles

primary

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

secondary

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

accent

Apply `#4CAF50` for a refreshing accent on icons, interactive states, or to highlight growth and vitality. Use `#FF6F00` for strong calls-to-action.

background

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

text

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

Accessibility notes

  • Ensure very high contrast for text, especially when placing any text on bright yellows like `#FFD147` or `#FFECB3`.
  • Avoid using light text on light orange/yellow backgrounds; always prioritize darker colors or black for text.
  • Rigorously use a contrast checker for all interactive elements and text to meet WCAG guidelines, as bright palettes can be challenging.
  • The green `#4CAF50` can provide excellent contrast for text on `#FFECB3`, but ensure it passes for smaller font sizes.

Recommended combinations

Fresh Burst

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

#FFECB3 · #FFD147 · #FFB300

Zest & Growth

Excellent for defining clear calls-to-action, progress indicators, or to highlight key features with a refreshing twist.

#FFB300 · #4CAF50 · #FF6F00

Dynamic Splash

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

#FFD147 · #FFB300 · #FF6F00

CSS variables

:root {
  --citrus-zest-splash-3-1: #FFB300;
  --citrus-zest-splash-3-2: #FF6F00;
  --citrus-zest-splash-3-3: #FFD147;
  --citrus-zest-splash-3-4: #4CAF50;
  --citrus-zest-splash-3-5: #FFECB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-zest-splash-3": {
        1: "#FFB300",
        2: "#FF6F00",
        3: "#FFD147",
        4: "#4CAF50",
        5: "#FFECB3",
      }
    }
  }
}

Related searches

energetic citrus greenfresh orange yellow palettevibrant fruit colorsplayful branding schemebright web design with green

Palette colors

Hex values

Color 1#FFB300
·
Color 2#FF6F00
·
Color 3#FFD147
·
Color 4#4CAF50
·
Color 5#FFECB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.2:1Fail
1.5:1Fail
1.5:1Fail
2
1.6:1Fail
1.9:1Fail
1:1Fail
2.4:1Fail
3
1.2:1Fail
1.9:1Fail
1.9:1Fail
1.2:1Fail
4
1.5:1Fail
1:1Fail
1.9:1Fail
2.4:1Fail
5
1.5:1Fail
2.4:1Fail
1.2:1Fail
2.4:1Fail

Similar palettes

More like Citrus Zest Splash

View all Vibrant
Lemon Grove Zest
Summer Zest Spritz
Tropical Zest Punch
Citrus Burst
Citrus Zest Burst
Energetic Citrus Punch