Palette

Citrus Grove Sparkle

A burst of zesty energy, like sun-ripened citrus fruits sparkling under the warm morning light.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Citrus Grove Sparkle 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 Grove Sparkle.

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

Data visualization

#F2DD64#FCB61A#FF8D00#D96E1D#FFE070

Palette guide

How to use Citrus Grove Sparkle

Overview

The Citrus Grove Sparkle palette is a burst of zesty energy, like sun-ripened citrus fruits sparkling under the warm morning light. It features a bright #F2DD64 (Yellow-Green), a vibrant #FCB61A (Golden Orange), an intense #FF8D00 (Dark Orange), and a rich #D96E1D (Burnt Orange), softened by a cheerful #FFE070 (Light Yellow). This palette offers designers and developers a dynamic range of warm, energetic hues, perfect for creating inviting, lively, and visually appealing digital experiences. Its harmonious blend is ideal for conveying warmth, freshness, and a playful spirit across various applications, from branding to UI design.

Best used for

Food and beverage branding
Summer-themed event promotion
Children's educational apps
Outdoor lifestyle websites
Digital marketing campaigns with energetic themes
Interactive web elements and calls-to-action

Suggested color roles

primary

#FF8D00 (A bold, intense orange that serves as an excellent primary color for prominent elements and calls-to-action.)

secondary

#FCB61A (A vibrant golden orange, ideal for supporting content, subheadings, or secondary interactive elements.)

accent

#F2DD64 (A bright yellow-green that provides a refreshing pop, excellent for highlights, icons, or subtle accents.)

background

#FFE070 (A soft, cheerful light yellow base that provides an airy and inviting canvas for the entire design.)

text

#D96E1D (A rich burnt orange, offering good readability against light backgrounds, or use a dark neutral like #333333 for maximum contrast.)

Accessibility notes

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

Recommended combinations

Zesty Glow

Use #FFE070 as a bright background, #F2DD64 for fresh content, and #FF8D00 for striking calls-to-action or important alerts.

#FFE070 · #F2DD64 · #FF8D00

Warm Depth

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

#FCB61A · #FF8D00 · #D96E1D

Energetic Duo

Pair #FFE070 as a base with #D96E1D for bold headings and #FCB61A for supporting text or graphical elements.

#FFE070 · #D96E1D · #FCB61A

CSS variables

:root {
  --citrus-grove-sparkle-1: #F2DD64;
  --citrus-grove-sparkle-2: #FCB61A;
  --citrus-grove-sparkle-3: #FF8D00;
  --citrus-grove-sparkle-4: #D96E1D;
  --citrus-grove-sparkle-5: #FFE070;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-grove-sparkle": {
        1: "#F2DD64",
        2: "#FCB61A",
        3: "#FF8D00",
        4: "#D96E1D",
        5: "#FFE070",
      }
    }
  }
}

Hex values

Color 1#F2DD64

Color 2#FCB61A

Color 3#FF8D00

Color 4#D96E1D

Color 5#FFE070

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.5:1Fail

1.1:1Fail

1.3:1Fail

1.9:1Fail

1.4:1Fail

1.7:1Fail

1.3:1Fail

1.5:1Fail

1.8:1Fail

2.5:1Fail

1.9:1Fail

1.5:1Fail

2.6:1Fail

1.1:1Fail

1.4:1Fail

1.8:1Fail

2.6:1Fail

Similar palettes

More like Citrus Grove Sparkle

Citrus Grove Sparkle

See it in context.

Ready when you are.

Built with Citrus Grove Sparkle.

How to use Citrus Grove Sparkle

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Zesty Glow

Warm Depth

Energetic Duo

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Grove Sparkle