Palette

Citrus Grove Delight

A burst of juicy oranges and radiant yellows, evoking the cheerful abundance of a sun-drenched citrus grove.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD700#FFA500#FF6347#FF4500#FF8C00

Palette guide

How to use Citrus Grove Delight

Overview

The Citrus Grove Delight palette is a burst of juicy oranges and radiant yellows, evoking the cheerful abundance of a sun-drenched citrus grove. It features the brilliant #FFD700 (Gold), a classic #FFA500 (Orange), and a playful #FF6347 (Tomato), intensified by the bold #FF4500 (OrangeRed) and a rich #FF8C00 (DarkOrange). This palette offers designers and developers a rich spectrum of warm, energetic hues, perfect for creating inviting, dynamic, and passionate digital experiences. Its harmonious blend is ideal for conveying warmth, enthusiasm, and a lively spirit across various applications, from branding to UI design.

Best used for

Food and beverage advertising
Summer-themed event branding
Children's product packaging
Apparel and accessory design
Digital marketing campaigns with energetic themes
Interactive web elements and calls-to-action

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

#FF4500 (A bold, attention-grabbing orange-red, perfect for high-impact alerts, primary buttons, or key highlights.)

background

#FFD700 (A warm, inviting base that emanates positivity, suitable for full-page backgrounds or large sections.)

text

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

Accessibility notes

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

Recommended combinations

Radiant Burst

Use #FFD700 as a bright background, #FFA500 for content, and #FF4500 for striking calls-to-action or important alerts.

#FFD700 · #FFA500 · #FF4500

Warm Gradient

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

#FF6347 · #FF4500 · #FF8C00

Zesty Layers

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

#FFD700 · #FF8C00 · #FF6347

CSS variables

:root {
  --citrus-grove-delight-1: #FFD700;
  --citrus-grove-delight-2: #FFA500;
  --citrus-grove-delight-3: #FF6347;
  --citrus-grove-delight-4: #FF4500;
  --citrus-grove-delight-5: #FF8C00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-grove-delight": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF6347",
        4: "#FF4500",
        5: "#FF8C00",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FFA500

Color 3#FF6347

Color 4#FF4500

Color 5#FF8C00

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

2.5:1Fail

1.7:1Fail

1.4:1Fail

1.5:1Fail

1.7:1Fail

1.2:1Fail

2.1:1Fail

1.5:1Fail

1.2:1Fail

1.3:1Fail

2.5:1Fail

1.7:1Fail

1.2:1Fail

1.5:1Fail

1.7:1Fail

1.2:1Fail

1.3:1Fail

1.5:1Fail

Similar palettes

More like Citrus Grove Delight

Citrus Grove Delight

See it in context.

Ready when you are.

Built with Citrus Grove Delight.

How to use Citrus Grove Delight

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Radiant Burst

Warm Gradient

Zesty Layers

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Grove Delight