Palette

Summer Citrus Splash

A refreshing burst of juicy fruit colors, perfect for a vibrant summer day filled with zest and life.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF4500#FFD700#ADFF2F#40E0D0#ADD8E6

Palette guide

How to use Summer Citrus Splash

Overview

The Summer Citrus Splash palette is a vibrant, refreshing burst of color, combining fiery oranges, sunny yellows, zesty greens, and cool blues. With a bold orange #FF4500 and a brilliant yellow #FFD700, this palette immediately conveys energy and excitement. The unexpected inclusion of a bright green #ADFF2F and two distinct blues, #40E0D0 and #ADD8E6, adds a playful, modern twist, reminiscent of a cool drink on a hot day. This versatile selection is ideal for dynamic digital campaigns, active lifestyle branding, or any design project seeking a lively, energetic, and slightly unconventional feel. Designers will find these hues perfect for creating engaging user interfaces, eye-catching advertisements, or memorable event promotions.

Best used for

Sports and outdoor activity branding
Youth-oriented digital products or apps
Summer music festival branding
Beverage packaging (e.g., energy drinks, fruit juices)
Modern art or design portfolios
Dynamic website headers and hero sections

Suggested color roles

primary

A bold, energetic orange (#FF4500), excellent for calls to action, main headlines, or impactful brand elements.

secondary

A bright, sunny yellow (#FFD700), perfect for secondary information, backgrounds, or complementary graphics.

accent

A vibrant, zesty green (#ADFF2F), ideal for playful highlights, interactive states, or adding a fresh pop.

background

A soft, light blue (#ADD8E6), providing a gentle and refreshing base for content.

text

Use #FF4500 for strong headlines on light backgrounds. For general body text, a dark gray or black is recommended for maximum readability, especially on #ADD8E6.

Accessibility notes

#FFD700 and #ADFF2F may have insufficient contrast for small text on white or very light backgrounds.
#ADD8E6 is a light background; ensure foreground text colors like #FF4500 provide adequate contrast.
Avoid using #ADFF2F as text on #FFD700 due to low contrast.
The bold #FF4500 provides good contrast against #ADD8E6 for key information.

Recommended combinations

High Energy

#FF4500 for dominant elements, #FFD700 for supporting brightness, and #40E0D0 for cool accents.

#FF4500 · #FFD700 · #40E0D0

Fresh Blend

#ADD8E6 as a calm background, #ADFF2F for fresh content, and #FFD700 for cheerful highlights.

#ADD8E6 · #ADFF2F · #FFD700

Splash Contrast

#40E0D0 for main sections, #FF4500 for urgent calls to action, and #ADD8E6 as a soft secondary background.

#40E0D0 · #FF4500 · #ADD8E6

CSS variables

:root {
  --summer-citrus-splash-1: #FF4500;
  --summer-citrus-splash-2: #FFD700;
  --summer-citrus-splash-3: #ADFF2F;
  --summer-citrus-splash-4: #40E0D0;
  --summer-citrus-splash-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "summer-citrus-splash": {
        1: "#FF4500",
        2: "#FFD700",
        3: "#ADFF2F",
        4: "#40E0D0",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#FF4500

Color 2#FFD700

Color 3#ADFF2F

Color 4#40E0D0

Color 5#ADD8E6

Accessibility

Contrast checker

2.5:1Fail

2.8:1Fail

2.1:1Fail

2.3:1Fail

2.5:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

2.8:1Fail

1.1:1Fail

1.3:1Fail

1.2:1Fail

2.1:1Fail

1.2:1Fail

1.3:1Fail

1.1:1Fail

2.3:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Summer Citrus Splash

Summer Citrus Splash

See it in context.

Ready when you are.

Built with Summer Citrus Splash.

How to use Summer Citrus Splash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

High Energy

Fresh Blend

Splash Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Summer Citrus Splash