Palette

Citrus Burst Splash

A lively burst of sunny yellows and zesty oranges, as refreshing and bright as a splash of citrus.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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 Citrus Burst Splash

Overview

The Citrus Burst Splash palette is a lively and invigorating collection, capturing the essence of sun-ripened citrus fruits. It moves from a bold #FF4500 (OrangeRed) through vibrant oranges like #FF8C00 (DarkOrange) and #FFA500 (Orange), brightening to a radiant #FFD700 (Gold) and a soft, creamy #FFFACD (FloralWhite). This palette offers designers and developers a spectrum of warm, energetic hues perfect for creating eye-catching interfaces, playful branding, and dynamic digital experiences. Its high-contrast potential and joyful progression make it versatile for various applications seeking to evoke freshness and vitality.

Best used for

Youth-oriented branding
Health and wellness product design
Summer-themed websites and apps
Food packaging for snacks or beverages
Digital marketing campaigns
Event invitations and posters

Suggested color roles

primary

#FFD700 (A bright, optimistic gold perfect for main headers, prominent UI elements, or cheerful branding.)

secondary

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

accent

#FF4500 (A powerful orange-red that demands attention, excellent for alerts, primary buttons, or key highlights.)

background

#FFFACD (A soft, near-white base that provides a gentle canvas, allowing the brighter colors to truly pop.)

text

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

Accessibility notes

Ensure sufficient contrast when pairing #FFFACD with lighter text; use darker colors like #FF4500 or a neutral dark.
The vibrant oranges and gold (#FF4500, #FF8C00, #FFA500, #FFD700) offer good readability with white text.
Avoid using #FFFACD for small text sizes against similar light backgrounds to prevent readability issues.
For interactive elements, maintain a minimum 3:1 contrast ratio against adjacent colors to meet WCAG AA standards.

Recommended combinations

Zesty Pop

Great for clean layouts where #FFFACD is the background, #FFD700 for content, and #FF4500 for striking calls-to-action.

#FFFACD · #FFD700 · #FF4500

Sunset Glow

Excellent for gradient backgrounds, data visualization, or illustrating a warm, inviting progression.

#FFD700 · #FFA500 · #FF8C00

Energetic Duo

Use #FFFACD as a backdrop with #FF4500 for bold headings and #FFD700 for supporting text or graphical elements.

#FFFACD · #FF4500 · #FFD700

CSS variables

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

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-burst-splash": {
        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 Citrus Burst Splash

Citrus Burst Splash

See it in context.

Ready when you are.

Built with Citrus Burst Splash.

How to use Citrus Burst Splash

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Zesty Pop

Sunset Glow

Energetic Duo

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Burst Splash