Palette

Citrus Burst Zest

A cheerful burst of oranges and yellows, capturing the zest of ripe clementines.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF7F50#FFD700#FFA07A#FF4500#FF6347

Palette guide

How to use Citrus Burst Zest

Overview

The Citrus Burst Zest palette is an energetic and cheerful collection, brimming with the warmth of sun-ripened fruits. Featuring a lively #FF7F50 (Coral), a radiant #FFD700 (Gold), and a soft #FFA07A (LightSalmon), it is grounded by the intense #FF4500 (OrangeRed) and a playful #FF6347 (Tomato). This palette offers designers and developers a rich spectrum of warm oranges and yellows, ideal for creating inviting and dynamic user experiences. Its harmonious blend is perfect for evoking feelings of joy, freshness, and summer, making it highly effective for vibrant branding and engaging digital content.

Best used for

Summer fashion branding
Children's product design
Food and beverage advertising
Travel and leisure websites
Playful app interfaces
Digital art and illustration

Suggested color roles

primary

#FFD700 (A bright, optimistic gold that serves as an excellent base for cheerful designs and prominent elements.)

secondary

#FFA07A (A soft, approachable orange, ideal for supporting content, background sections, or subtle highlights.)

accent

#FF4500 (A bold, attention-grabbing orange-red, perfect for calls-to-action, alerts, or key interactive elements.)

background

#FFA07A (A gentle, warm background color that allows the brighter hues to shine without overwhelming the user.)

text

#FF4500 (For high-impact text on very light backgrounds, or use a dark charcoal like #333333 for general readability on #FFD700.)

Accessibility notes

Ensure sufficient contrast when pairing lighter shades like #FFD700 or #FFA07A with light text; use #FF4500 or #000000 for readability.
The vibrant #FF4500 and #FF6347 offer good contrast for white or very light text.
Avoid using adjacent similar light shades for text and background to prevent readability issues, especially with #FFD700 and #FFA07A.
For interactive elements, maintain at least a 3:1 contrast ratio against surrounding colors to meet WCAG AA standards.

Recommended combinations

Sunny Pop

Use #FFA07A as a soft background, #FFD700 for main content, and #FF4500 for impactful headings or buttons.

#FFD700 · #FFA07A · #FF4500

Warm Gradient

Excellent for creating smooth, inviting gradients in hero sections or visual accents that convey warmth.

#FF7F50 · #FFA07A · #FF6347

Dynamic Duo

Pair #FFD700 as a base with #FF4500 for primary actions and #FF7F50 for secondary details or illustrations.

#FFD700 · #FF4500 · #FF7F50

CSS variables

:root {
  --citrus-burst-zest-1: #FF7F50;
  --citrus-burst-zest-2: #FFD700;
  --citrus-burst-zest-3: #FFA07A;
  --citrus-burst-zest-4: #FF4500;
  --citrus-burst-zest-5: #FF6347;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-burst-zest": {
        1: "#FF7F50",
        2: "#FFD700",
        3: "#FFA07A",
        4: "#FF4500",
        5: "#FF6347",
      }
    }
  }
}

Hex values

Color 1#FF7F50

Color 2#FFD700

Color 3#FFA07A

Color 4#FF4500

Color 5#FF6347

Accessibility

Contrast checker

1.8:1Fail

1.3:1Fail

1.4:1Fail

1.2:1Fail

1.8:1Fail

1.4:1Fail

2.5:1Fail

2.1:1Fail

1.3:1Fail

1.4:1Fail

1.7:1Fail

1.5:1Fail

1.4:1Fail

2.5:1Fail

1.7:1Fail

1.2:1Fail

2.1:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Citrus Burst Zest

Citrus Burst Zest

See it in context.

Ready when you are.

Built with Citrus Burst Zest.

How to use Citrus Burst Zest

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunny Pop

Warm Gradient

Dynamic Duo

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Burst Zest