Palette

Sweet Citrus Burst

A refreshing explosion of bright yellows and oranges, capturing the tangy sweetness 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 Sweet Citrus Burst 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 Sweet Citrus Burst.

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

Data visualization

#FFD700#FF4500#FFFF00#FF6347#F0E68C

Palette guide

How to use Sweet Citrus Burst

Overview

The Sweet Citrus Burst palette is a refreshing explosion of bright yellows and oranges, capturing the tangy sweetness of fresh citrus fruits. Dominated by a brilliant gold (#FFD700), an intense orange red (#FF4500), a pure yellow (#FFFF00), a lively tomato red (#FF6347), and a warm khaki (#F0E68C), this collection is energetic and vibrant. It's perfectly suited for designers and developers aiming to create dynamic, invigorating, and attention-grabbing experiences. Utilizing these exact hex codes ensures your projects consistently convey the powerful, zesty energy of a citrus burst, making any design truly pop with vitality and excitement.

Best used for

Energy drink and sports branding
Summer festival and event promotions
Activewear and fitness product designs
Food and beverage packaging (especially juices)
Lively digital campaigns and advertisements
Youth-oriented marketing materials

Suggested color roles

primary

Use #FF4500 for bold branding, primary call-to-action buttons, or striking headlines to convey immediate energy and urgency.

secondary

Apply #FFD700 for supporting elements, subheadings, or as a vibrant background for sections that need a bright, warm lift.

accent

Utilize #FFFF00 for highlights, warnings, or interactive states to draw maximum attention and add a pure, sunny pop.

background

Employ #F0E68C for subtle background textures or less intense sections, providing a warm, earthy contrast to the brighter hues.

text

Black or very dark grey is essential for text on #FFD700, #FFFF00, and #F0E68C. White text provides excellent contrast on #FF4500 and #FF6347.

Accessibility notes

Colors like #FFFF00 and #F0E68C absolutely require dark text (black or dark charcoal) for readability.
Ensure sufficient contrast when using #FFD700 or #FF6347 for text on other bright colors, as similarity in hue can reduce legibility.
Avoid using #FFFF00 or #F0E68C as primary text colors unless on a very dark, contrasting background.
Prioritize high contrast for all critical information and interactive elements to ensure accessibility.

Recommended combinations

Energetic Trio

Ideal for creating a powerful, attention-grabbing visual in digital ads or event branding.

#FF4500 · #FFFF00 · #FFD700

Warm Zest

Perfect for illustrating natural, wholesome products or creating a cozy yet vibrant atmosphere.

#FF6347 · #F0E68C · #FF4500

Bright Contrast

Use for dynamic infographics or sections where distinct and energetic color separation is desired.

#FFFF00 · #FF4500 · #F0E68C

CSS variables

:root {
  --sweet-citrus-burst-1: #FFD700;
  --sweet-citrus-burst-2: #FF4500;
  --sweet-citrus-burst-3: #FFFF00;
  --sweet-citrus-burst-4: #FF6347;
  --sweet-citrus-burst-5: #F0E68C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-citrus-burst": {
        1: "#FFD700",
        2: "#FF4500",
        3: "#FFFF00",
        4: "#FF6347",
        5: "#F0E68C",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FF4500

Color 3#FFFF00

Color 4#FF6347

Color 5#F0E68C

Accessibility

Contrast checker

2.5:1Fail

1.3:1Fail

2.1:1Fail

1.1:1Fail

2.5:1Fail

3.2:1AA18

1.2:1Fail

2.7:1Fail

1.3:1Fail

3.2:1AA18

2.7:1Fail

1.2:1Fail

2.1:1Fail

1.2:1Fail

2.7:1Fail

2.3:1Fail

1.1:1Fail

2.7:1Fail

1.2:1Fail

2.3:1Fail

Similar palettes

More like Sweet Citrus Burst

Sweet Citrus Burst

See it in context.

Ready when you are.

Built with Sweet Citrus Burst.

How to use Sweet Citrus Burst

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Energetic Trio

Warm Zest

Bright Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sweet Citrus Burst