Palette

Summer Citrus Zing

An exhilarating burst of juicy oranges, yellows, and pinks, capturing the lively spirit of summer citrus.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF8C00#FFD700#ADFF2F#00CED1#FF1493

Palette guide

How to use Summer Citrus Zing

Overview

The Summer Citrus Zing palette delivers an exhilarating burst of vibrant, playful colors, blending juicy oranges, sunny yellows, zesty greens, and unexpected pops of cyan and fuchsia. Featuring a bold orange #FF8C00 and a brilliant yellow #FFD700, this palette instantly conveys energy and fun. The lively green #ADFF2F adds a fresh, organic touch, while the striking #00CED1 (Dark Turquoise) and #FF1493 (Deep Pink) introduce a modern, dynamic edge. This versatile selection is ideal for designs aiming for a youthful, energetic, and memorable aesthetic. Designers can leverage these hues for lively digital interfaces, trendy product branding, or any project seeking to evoke a sense of excitement and summery zest, ensuring a truly vibrant visual experience.

Best used for

Youth-oriented fashion or beauty brands
Digital marketing campaigns for summer events
Modern app interfaces with playful elements
Creative portfolios or artistic projects
Packaging for trendy snacks or beverages
Music or entertainment website designs

Suggested color roles

primary

A strong, vibrant orange (#FF8C00), excellent for impactful calls to action, main headers, or brand identity.

secondary

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

accent

A bold, eye-catching fuchsia (#FF1493), ideal for drawing immediate attention, highlights, or interactive states.

background

A warm, inviting yellow (#FFD700) that can serve as a soft, bright background or main content area.

text

Use #FF8C00 for strong headlines or calls to action on light backgrounds. For general body text, a very dark gray or black is recommended for optimal readability.

Accessibility notes

#FFD700 and #ADFF2F will have low contrast on white or very light backgrounds; use with larger text or as background.
Ensure #FF1493 has sufficient contrast if used as text on lighter colors like #FFD700.
#00CED1 can provide good contrast on #FFD700 for text or important elements.
Avoid pairing #ADFF2F with #FFD700 for text due to readability challenges.

Recommended combinations

Electric Zest

#FF8C00 for primary elements, #FFD700 as a lively background, and #FF1493 for energetic accents.

#FF8C00 · #FFD700 · #FF1493

Cool Pop

#00CED1 for main content blocks, #FFD700 for supportive brightness, and #ADFF2F for fresh highlights.

#00CED1 · #FFD700 · #ADFF2F

Dynamic Contrast

#FF1493 for bold statements, #FF8C00 for secondary emphasis, and #00CED1 for contrasting design elements.

#FF1493 · #FF8C00 · #00CED1

CSS variables

:root {
  --summer-citrus-zing-1: #FF8C00;
  --summer-citrus-zing-2: #FFD700;
  --summer-citrus-zing-3: #ADFF2F;
  --summer-citrus-zing-4: #00CED1;
  --summer-citrus-zing-5: #FF1493;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "summer-citrus-zing": {
        1: "#FF8C00",
        2: "#FFD700",
        3: "#ADFF2F",
        4: "#00CED1",
        5: "#FF1493",
      }
    }
  }
}

Hex values

Color 1#FF8C00

Color 2#FFD700

Color 3#ADFF2F

Color 4#00CED1

Color 5#FF1493

Accessibility

Contrast checker

1.7:1Fail

1.9:1Fail

1.2:1Fail

1.6:1Fail

1.7:1Fail

1.1:1Fail

1.4:1Fail

2.6:1Fail

1.9:1Fail

1.1:1Fail

1.6:1Fail

3:1Fail

1.2:1Fail

1.4:1Fail

1.6:1Fail

1.9:1Fail

1.6:1Fail

2.6:1Fail

3:1Fail

1.9:1Fail

Similar palettes

More like Summer Citrus Zing

Summer Citrus Zing

See it in context.

Ready when you are.

Built with Summer Citrus Zing.

How to use Summer Citrus Zing

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Electric Zest

Cool Pop

Dynamic Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Summer Citrus Zing