Palette

Citrus Grove Spark

A lively burst of sunny yellows, vibrant oranges, and fresh greens, like sun-ripened fruit in a grove.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F9A825#FFD24C#9BCA3C#008744#FDFBEF

Palette guide

How to use Citrus Grove Spark

Overview

The Citrus Grove Spark palette is a lively burst of sunny yellows, vibrant oranges, and fresh greens, like sun-ripened fruit in a grove. It features a rich #F9A825 (Golden Yellow) and a bright #FFD24C (Lemon Yellow), perfectly complemented by the refreshing #9BCA3C (Lime Green) and a deep #008744 (Forest Green). A soft #FDFBEF (Creamy White) provides a clean counterbalance. This palette offers designers and developers a versatile range of hues for creating energetic, organic, and visually appealing digital experiences. It's ideal for projects that aim to evoke natural vitality, freshness, and a modern, healthy aesthetic.

Best used for

Organic food and beverage branding
Eco-friendly product packaging
Health and wellness app interfaces
Outdoor lifestyle websites
Spring/summer marketing campaigns
Educational materials for nature themes

Suggested color roles

primary

#F9A825 (A rich golden yellow, perfect for main headers, prominent UI elements, or cheerful branding.)

secondary

#9BCA3C (A vibrant lime green, ideal for supporting content, playful accents, or secondary calls-to-action.)

accent

#008744 (A deep forest green that provides grounding and sophistication, excellent for key highlights or interactive elements.)

background

#FDFBEF (A soft, creamy white base that provides an airy and modern canvas, allowing the vibrant colors to pop.)

text

#008744 (A sophisticated dark green, offering excellent readability against light backgrounds, or use a true black #000000 for maximum contrast.)

Accessibility notes

Ensure high contrast when pairing #FDFBEF with light text; use #008744 or #000000 for readability.
The darker tones, #F9A825, #9BCA3C, and #008744, offer good contrast for white or very light text.
Avoid using #FFD24C for small text against #FDFBEF; contrast may be insufficient.
For interactive elements, ensure #9BCA3C and #F9A825 have at least a 3:1 contrast ratio against surrounding colors to meet WCAG AA.

Recommended combinations

Natural Zest

Ideal for clean layouts with #FDFBEF as background, #9BCA3C for fresh elements, and #F9A825 for warm accents.

#FDFBEF · #9BCA3C · #F9A825

Grove Depth

Excellent for energetic hero sections, with #F9A825 as background, #008744 for main content, and #9BCA3C for striking accents.

#F9A825 · #008744 · #9BCA3C

Fresh Contrast

Use #FDFBEF as a clean base, #008744 for bold headings, and #FFD24C for complementary graphical elements or links.

#FDFBEF · #008744 · #FFD24C

CSS variables

:root {
  --citrus-grove-spark-1: #F9A825;
  --citrus-grove-spark-2: #FFD24C;
  --citrus-grove-spark-3: #9BCA3C;
  --citrus-grove-spark-4: #008744;
  --citrus-grove-spark-5: #FDFBEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-grove-spark": {
        1: "#F9A825",
        2: "#FFD24C",
        3: "#9BCA3C",
        4: "#008744",
        5: "#FDFBEF",
      }
    }
  }
}

Hex values

Color 1#F9A825

Color 2#FFD24C

Color 3#9BCA3C

Color 4#008744

Color 5#FDFBEF

Accessibility

Contrast checker

1.4:1Fail

1:1Fail

2.3:1Fail

1.9:1Fail

1.4:1Fail

1.3:1Fail

3.2:1AA18

1.4:1Fail

1:1Fail

1.3:1Fail

2.4:1Fail

1.9:1Fail

2.3:1Fail

3.2:1AA18

2.4:1Fail

4.4:1AA18

1.9:1Fail

1.4:1Fail

1.9:1Fail

4.4:1AA18

Similar palettes

More like Citrus Grove Spark

Citrus Grove Spark

See it in context.

Ready when you are.

Built with Citrus Grove Spark.

How to use Citrus Grove Spark

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Natural Zest

Grove Depth

Fresh Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Grove Spark