Back to palettes

Palette

Citrus Zest Splash

A burst of bright, tangy colors like the refreshing zest of oranges and lemons.

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

#FFEFCD#FFE09B#FFCC66#FFAA00#FF8800

Palette guide

How to use Citrus Zest Splash

Overview

The Citrus Zest Splash palette delivers a bright, tangy burst of oranges and yellows, reminiscent of fresh citrus fruits, making it an energetic and refreshing choice. With the light `#FFEFCD`, sunny `#FFE09B`, and vibrant `#FFCC66`, this palette is perfect for designers and developers looking to infuse projects with a lively and appetizing feel. The deeper, saturated tones of `#FFAA00` and `#FF8800` provide excellent depth and contrast, grounding the lighter shades while maintaining the overall energetic mood. This collection is particularly suited for designs that aim to convey freshness, vitality, and a cheerful disposition.

Best used for

  • Healthy food and beverage marketing
  • Summer event promotions and digital ads
  • Children's educational apps and websites
  • E-commerce platforms for fresh produce or health products
  • Interactive dashboards requiring visual energy
  • Restaurant menus or café branding

Suggested color roles

primary

Use `#FFCC66` as a vibrant primary color for main sections or brand elements, offering an inviting and energetic base.

secondary

Employ `#FFE09B` for secondary backgrounds, subheadings, or supporting graphics, adding a soft, sunny layer.

accent

Apply `#FF8800` for high-impact calls-to-action, important links, or to draw attention to key features effectively.

background

Utilize `#FFEFCD` as a light, fresh background, ensuring maximum brightness and allowing other colors to stand out.

text

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

Accessibility notes

  • Ensure very strong contrast for text, especially when placing any text on bright yellows like `#FFEFCD` or `#FFE09B`.
  • Avoid using light text on light orange/yellow backgrounds; always prioritize the darkest colors in the palette 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.
  • Consider using `#FF8800` for all interactive elements to ensure they are clearly distinguishable and accessible to users.

Recommended combinations

Sunny Splash

Ideal for creating soft, luminous backgrounds or gentle gradients in hero sections and headers.

#FFEFCD · #FFE09B · #FFCC66

Zest Burst

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

#FFCC66 · #FFAA00 · #FF8800

Citrus Depth

Effective for dynamic elements, charts, or to provide visual interest with a clear progression of saturation.

#FFE09B · #FFAA00 · #FF8800

CSS variables

:root {
  --citrus-zest-splash-2-1: #FFEFCD;
  --citrus-zest-splash-2-2: #FFE09B;
  --citrus-zest-splash-2-3: #FFCC66;
  --citrus-zest-splash-2-4: #FFAA00;
  --citrus-zest-splash-2-5: #FF8800;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-zest-splash-2": {
        1: "#FFEFCD",
        2: "#FFE09B",
        3: "#FFCC66",
        4: "#FFAA00",
        5: "#FF8800",
      }
    }
  }
}

Related searches

bright citrus palettetangy orange yellow colorsfresh energetic schemesummer fruit brandingvibrant web UI colors

Palette colors

Hex values

Color 1#FFEFCD
·
Color 2#FFE09B
·
Color 3#FFCC66
·
Color 4#FFAA00
·
Color 5#FF8800
·

Accessibility

Contrast checker

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

Similar palettes

More like Citrus Zest Splash

View all vibrant
Vibrant Citrus Medley
Citrus Grove Delight
Citrus Zest Burst
Citrus Zest Pop
Citrus Zest Splash
Energetic Citrus Zest