Back to palettes

Palette

Sunny Citrus Splash

Bursting with bright, refreshing energy, like a juicy medley of sun-kissed citrus fruits.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD700#FFA500#FF6347#FFFF00#3CB371

Palette guide

How to use Sunny Citrus Splash

Overview

The Sunny Citrus Splash palette bursts with bright, refreshing energy, like a juicy medley of sun-kissed citrus fruits. This vibrant collection features intense yellows like #FFD700 and #FFFF00, a classic orange #FFA500, and a lively coral #FF6347. A surprising yet grounded addition is the refreshing medium sea green #3CB371, which provides a natural and balanced contrast to the warm, fruity tones. Designers can leverage this palette to create dynamic and joyful experiences. Developers will find these hex codes excellent for crafting engaging UIs, playful branding, or any digital product aiming for a cheerful, energetic, and visually diverse aesthetic.

Best used for

  • Food and beverage packaging (especially juices, snacks)
  • Children's educational materials
  • Eco-friendly product branding
  • Outdoor recreation promotions
  • Summer festival marketing
  • Web design for creative startups

Suggested color roles

primary

Use #FFA500 as a strong, inviting orange for main interactive elements or brand identity.

secondary

Apply #FFD700 as a bright, energetic yellow for supportive elements or background accents.

accent

Utilize #3CB371 as a refreshing, natural contrast for unique accents or call-to-action buttons.

background

Employ #FFFF00 as the brightest available color for a background, ensuring dark text for readability.

text

For text, use dark charcoal or black for readability on #FFD700 and #FFFF00. White works well on #FFA500, #FF6347, and #3CB371.

Accessibility notes

  • #FFD700 and #FFFF00 have extremely low contrast with white text; use dark text (e.g., black or charcoal) for readability.
  • Ensure sufficient contrast between adjacent bright colors, especially #FFD700 and #FFFF00.
  • The green #3CB371 provides good contrast with white text, making it suitable for clear headings or buttons.
  • Avoid using the yellow shades as primary text colors unless on very dark backgrounds to maintain readability.

Recommended combinations

Tropical Zest

Playful illustrations, vibrant website hero sections, or nature-inspired branding.

#FFFF00 · #FFA500 · #3CB371

Energetic Pop

High-impact call-to-actions, energetic event graphics, or dynamic infographics.

#FFD700 · #FF6347 · #FFA500

Fresh Contrast

Eco-conscious branding, unique UI elements, or cheerful product labels.

#3CB371 · #FFFF00 · #FF6347

CSS variables

:root {
  --sunny-citrus-splash-1: #FFD700;
  --sunny-citrus-splash-2: #FFA500;
  --sunny-citrus-splash-3: #FF6347;
  --sunny-citrus-splash-4: #FFFF00;
  --sunny-citrus-splash-5: #3CB371;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunny-citrus-splash": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF6347",
        4: "#FFFF00",
        5: "#3CB371",
      }
    }
  }
}

Related searches

yellow orange green palettefruity vibrant color schemeenergetic summer ui designbright and refreshing brand colorscitrus inspired web palette

Palette colors

Hex values

Color 1#FFD700
·
Color 2#FFA500
·
Color 3#FF6347
·
Color 4#FFFF00
·
Color 5#3CB371
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
1.3:1Fail
1.9:1Fail
2
1.4:1Fail
1.5:1Fail
1.8:1Fail
1.3:1Fail
3
2.1:1Fail
1.5:1Fail
2.7:1Fail
1.1:1Fail
4
1.3:1Fail
1.8:1Fail
2.7:1Fail
2.5:1Fail
5
1.9:1Fail
1.3:1Fail
1.1:1Fail
2.5:1Fail

Similar palettes

More like Sunny Citrus Splash

View all vibrant