Palette

Citrus Burst Joy

A bright and lively collection inspired by the invigorating zest and vibrant hues of citrus fruits.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Citrus Burst Joy 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 Citrus Burst Joy.

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

Data visualization

#F7D04D#F4A63C#EF8A30#EB6E2D#C64E2F

Palette guide

How to use Citrus Burst Joy

Overview

The Citrus Burst Joy palette offers an invigorating spectrum of warm, energetic tones, perfect for projects needing a vibrant lift. Anchored by a bright yellow, #F7D04D, it transitions through sunny oranges like #F4A63C and #EF8A30, culminating in richer, fiery shades such as #EB6E2D and #C64E2F. Designers and developers can leverage this gradient for captivating visual hierarchies and dynamic user interfaces. Its harmonious progression makes it ideal for conveying warmth, enthusiasm, and a playful spirit across digital and print mediums, ensuring a memorable and engaging experience.

Best used for

Summer product packaging
Food and beverage branding
Children's book illustrations
Event promotion graphics (festivals, parties)
Website headers and call-to-action buttons
Energetic social media campaigns

Suggested color roles

primary

#F7D04D (Bright and inviting, great for main headers or large sections that need to feel open and cheerful.)

secondary

#EF8A30 (A warm, mid-tone orange, excellent for supporting elements, subheadings, or interactive components.)

accent

#C64E2F (A deep, fiery orange-red, perfect for impactful calls-to-action, highlights, or small, attention-grabbing details.)

background

#F7D04D (A soft, sunny yellow that provides a warm, inviting canvas without being too overwhelming.)

text

#EB6E2D (For darker text on lighter backgrounds, or use a deep charcoal like #333333 for optimal readability.)

Accessibility notes

Ensure sufficient contrast when pairing lighter shades like #F7D04D with light text; consider darker text like #333333 or #000000.
The deeper tones, such as #EB6E2D or #C64E2F, offer good contrast for white or near-white text.
Avoid using adjacent similar light shades for text and background, as this will fail WCAG AA.
For interactive elements, maintain at least a 3:1 contrast ratio against adjacent colors to meet non-text contrast guidelines.

Recommended combinations

Sunny Gradient

Ideal for vibrant hero sections, animated transitions, or background gradients that convey warmth and energy.

#F7D04D · #EF8A30 · #C64E2F

CTA Focus

Use #F7D04D as background, #C64E2F for primary buttons, and #EB6E2D for secondary actions or icon accents.

#F7D04D · #C64E2F · #EB6E2D

Warm Accents

Excellent for data visualization, infographics, or subtle brand elements that need a cohesive, warm progression.

#F4A63C · #EF8A30 · #C64E2F

CSS variables

:root {
  --citrus-burst-joy-1: #F7D04D;
  --citrus-burst-joy-2: #F4A63C;
  --citrus-burst-joy-3: #EF8A30;
  --citrus-burst-joy-4: #EB6E2D;
  --citrus-burst-joy-5: #C64E2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-burst-joy": {
        1: "#F7D04D",
        2: "#F4A63C",
        3: "#EF8A30",
        4: "#EB6E2D",
        5: "#C64E2F",
      }
    }
  }
}

Hex values

Color 1#F7D04D

Color 2#F4A63C

Color 3#EF8A30

Color 4#EB6E2D

Color 5#C64E2F

Accessibility

Contrast checker

1.4:1Fail

1.7:1Fail

2.1:1Fail

3.1:1AA18

1.4:1Fail

1.2:1Fail

1.5:1Fail

2.3:1Fail

1.7:1Fail

1.2:1Fail

1.8:1Fail

2.1:1Fail

1.5:1Fail

1.2:1Fail

1.5:1Fail

3.1:1AA18

2.3:1Fail

1.8:1Fail

1.5:1Fail

Similar palettes

More like Citrus Burst Joy

Citrus Burst Joy

See it in context.

Ready when you are.

Built with Citrus Burst Joy.

How to use Citrus Burst Joy

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunny Gradient

CTA Focus

Warm Accents

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Burst Joy