Back to palettes

Palette

Citrus Zest Burst

A bright and refreshing explosion of citrus colors, invigorating and full of life.

WarmPlayful5 colors
More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD700#FFA500#FF6347#FFFAFA#FFFFF0

Palette guide

How to use Citrus Zest Burst

Overview

The Citrus Zest Burst palette is a bright and refreshing explosion of citrus colors, invigorating and full of life. It features a brilliant #FFD700 (Gold), a classic #FFA500 (Orange), and a playful #FF6347 (Tomato), beautifully softened by two ethereal, near-white tones: #FFFAFA (Snow) and #FFFFF0 (Ivory). This palette offers designers and developers a versatile range of warm, energetic, yet balanced hues, perfect for creating inviting, lively, and visually appealing digital experiences. Its blend of vibrant and soft tones is ideal for conveying freshness, warmth, and a gentle sense of optimism across various applications.

Best used for

  • Summer-themed websites and apps
  • Children's product branding
  • Food and beverage packaging (especially desserts)
  • Wedding stationery with a cheerful twist
  • Lighthearted digital marketing campaigns
  • Playful blog design

Suggested color roles

primary

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

secondary

#FFA500 (A classic orange, ideal for supporting content, subheadings, or secondary calls-to-action.)

accent

#FF6347 (A playful tomato red, perfect for high-impact alerts, primary buttons, or key highlights that demand attention.)

background

#FFFFF0 (A soft, near-white ivory base that provides an airy, clean, and inviting canvas for the entire design.)

text

#FF6347 (For strong, energetic text on light backgrounds, or use a dark neutral like #333333 for general readability.)

Accessibility notes

  • Ensure high contrast when pairing #FFFAFA or #FFFFF0 with light text; use #FF6347 or #000000 for readability.
  • The darker tones, #FFD700, #FFA500, 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 #FFFAFA and #FFFFF0.
  • For interactive elements, maintain at least a 3:1 contrast ratio against surrounding colors to meet WCAG AA standards.

Recommended combinations

Sunny & Clean

Use #FFFFF0 as a clean background, #FFD700 for main content, and #FF6347 for striking calls-to-action or important alerts.

#FFFFF0 · #FFD700 · #FF6347

Warm Gradient

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

#FFD700 · #FFA500 · #FF6347

Fresh Contrast

Pair #FFFAFA as a base with #FFA500 for bold headings and #FF6347 for supporting text or graphical elements.

#FFFAFA · #FFA500 · #FF6347

CSS variables

:root {
  --citrus-zest-burst-4-1: #FFD700;
  --citrus-zest-burst-4-2: #FFA500;
  --citrus-zest-burst-4-3: #FF6347;
  --citrus-zest-burst-4-4: #FFFAFA;
  --citrus-zest-burst-4-5: #FFFFF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-zest-burst-4": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF6347",
        4: "#FFFAFA",
        5: "#FFFFF0",
      }
    }
  }
}

Related searches

bright orange yellow white paletteenergetic citrus colorswarm playful ui designsummer branding palettefresh food color scheme

Palette colors

Hex values

Color 1#FFD700
·
Color 2#FFA500
·
Color 3#FF6347
·
Color 4#FFFAFA
·
Color 5#FFFFF0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
1.4:1Fail
1.4:1Fail
2
1.4:1Fail
1.5:1Fail
1.9:1Fail
2:1Fail
3
2.1:1Fail
1.5:1Fail
2.8:1Fail
2.9:1Fail
4
1.4:1Fail
1.9:1Fail
2.8:1Fail
1:1Fail
5
1.4:1Fail
2:1Fail
2.9:1Fail
1:1Fail

Similar palettes

More like Citrus Zest Burst

View all Warm
Pumpkin Patch Delight
Spiced Coral Reef
Spiced Orange Marmalade
Citrus Grove Sparkle
Fiery Phoenix Ash
Sunrise Peak Ascent