Palette

Sunburst Citrus Zing

A bright, exhilarating palette bursting with the vibrant, tangy colors of ripe summer citrus fruits.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF4500#FF8C00#FFA500#FFD700#FFFACD

Palette guide

How to use Sunburst Citrus Zing

Overview

The "Sunburst Citrus Zing" palette is a bright, exhilarating collection bursting with the vibrant, tangy colors of ripe summer citrus fruits. This energetic palette features a fiery #FF4500 (Orange Red), warm #FF8C00 (Dark Orange), sunny #FFA500 (Orange), and radiant #FFD700 (Gold). A soft #FFFACD (Lemon Chiffon) provides a light, airy counterbalance. Ideal for designs that need to convey energy, freshness, and excitement, this palette is perfect for attracting attention and evoking a lively, summery mood across digital and print media.

Best used for

Summer beverage and food branding
Fitness and active lifestyle apps
Children's entertainment platforms
Event marketing (festivals, outdoor events)
Travel and tourism promotions
Youth-oriented fashion or accessories

Suggested color roles

primary

#FF4500 (Orange Red) - Use for high-impact calls-to-action, main headings, or key brand elements to convey urgency and excitement.

secondary

#FFA500 (Orange) - Excellent for subheadings, secondary buttons, or large graphic elements, offering a strong, friendly warmth.

accent

#FFD700 (Gold) - Perfect for subtle highlights, icons, or interactive states, adding a touch of brightness and optimism.

background

#FFFACD (Lemon Chiffon) - Provides a very light, warm, and airy base that allows the vibrant oranges and reds to truly pop.

text

#FF8C00 (Dark Orange) - Works well for secondary text or large display text. For primary body text, a deep charcoal or black on #FFFACD is recommended for optimal readability.

Accessibility notes

Ensure sufficient contrast when using any of the orange/red tones for text, especially against #FFFACD.
#FF4500 and #FF8C00 provide good contrast for white or light text for headings.
Avoid using #FFD700 for small text on #FFFACD as it will likely fail contrast requirements.
Use #FFFACD primarily as a background; it is too light for text against other light colors in the palette.

Recommended combinations

Citrus Burst

Creates an explosive, energetic hero section or banner, with the lightest color for clean text or background.

#FF4500 · #FF8C00 · #FFFACD

Golden Energy

Ideal for bright, inviting sections, using the gold as a highlight against a softer orange and light background.

#FFA500 · #FFD700 · #FFFACD

Dynamic Contrast

Strong visual interest for infographics or layered designs, combining the full spectrum of vibrant oranges and reds.

#FF8C00 · #FF4500 · #FFA500

CSS variables

:root {
  --sunburst-citrus-zing-1: #FF4500;
  --sunburst-citrus-zing-2: #FF8C00;
  --sunburst-citrus-zing-3: #FFA500;
  --sunburst-citrus-zing-4: #FFD700;
  --sunburst-citrus-zing-5: #FFFACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunburst-citrus-zing": {
        1: "#FF4500",
        2: "#FF8C00",
        3: "#FFA500",
        4: "#FFD700",
        5: "#FFFACD",
      }
    }
  }
}

Hex values

Color 1#FF4500

Color 2#FF8C00

Color 3#FFA500

Color 4#FFD700

Color 5#FFFACD

Accessibility

Contrast checker

1.5:1Fail

1.7:1Fail

2.5:1Fail

3.2:1AA18

1.5:1Fail

1.2:1Fail

1.7:1Fail

2.2:1Fail

1.7:1Fail

1.2:1Fail

1.4:1Fail

1.9:1Fail

2.5:1Fail

1.7:1Fail

1.4:1Fail

1.3:1Fail

3.2:1AA18

2.2:1Fail

1.9:1Fail

1.3:1Fail

Similar palettes

More like Sunburst Citrus Zing

Sunburst Citrus Zing

See it in context.

Ready when you are.

Built with Sunburst Citrus Zing.

How to use Sunburst Citrus Zing

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Citrus Burst

Golden Energy

Dynamic Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sunburst Citrus Zing