Palette

Sunny Citrus Grove

A refreshing burst of warm, sunny colors from a sun-drenched citrus orchard.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD700#FFA500#FF4500#FF0000#C80000

Palette guide

How to use Sunny Citrus Grove

Overview

The Sunny Citrus Grove palette bursts with warm, sun-drenched energy, reminiscent of a vibrant citrus orchard. It features a range of intense yellows and deep reds, including the bright #FFD700, a classic orange #FFA500, and the striking #FF4500. The palette culminates in powerful reds like #FF0000 and the rich #C80000, offering a dynamic and impactful spectrum. Designers can leverage this palette for projects requiring strong visual appeal and a sense of vitality. Developers will find these shades ideal for creating high-energy interfaces, promotional materials, or branding that aims to convey passion and warmth. It's an excellent choice for bold, attention-grabbing designs.

Best used for

High-energy sports branding
Automotive marketing materials
Event promotions requiring strong impact
Food & beverage product labels (e.g., hot sauces, energy drinks)
Warning or alert indicators in UI design
Video game UI elements for action games

Suggested color roles

primary

Utilize #FFA500 as a strong, vibrant orange for main interactive elements or brand identity.

secondary

Employ #FFD700 as a bright, sunny yellow to provide contrast or highlight secondary information.

accent

Reserve #FF0000 for bold, attention-commanding accents, warnings, or urgent calls to action.

background

Use #C80000 as a deep, powerful background for dramatic effect, ensuring light text.

text

For text, use white or a very light grey for readability, especially against #C80000 and #FF0000. Black is suitable for #FFD700.

Accessibility notes

Ensure white text on #FFA500, #FF4500, #FF0000, and #C80000 meets WCAG contrast ratios.
#FFD700 requires dark text (e.g., black) for optimal readability.
Avoid using #FFD700 directly as a background for primary content if contrast with text is insufficient.
Use sufficient spacing and clear typography when using multiple bright colors like #FFD700 and #FFA500 together.

Recommended combinations

Fiery Impact

Bold headlines, warning messages, or high-urgency call-to-actions.

#FF0000 · #C80000 · #FFA500

Sunburst Gradient

Energetic gradients, vibrant hero banners, or progressive disclosure elements.

#FFD700 · #FFA500 · #FF4500

Deep Citrus

Strong branding, impactful logos, or dramatic data visualizations.

#C80000 · #FFD700 · #FFA500

CSS variables

:root {
  --sunny-citrus-grove-1: #FFD700;
  --sunny-citrus-grove-2: #FFA500;
  --sunny-citrus-grove-3: #FF4500;
  --sunny-citrus-grove-4: #FF0000;
  --sunny-citrus-grove-5: #C80000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunny-citrus-grove": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF4500",
        4: "#FF0000",
        5: "#C80000",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FFA500

Color 3#FF4500

Color 4#FF0000

Color 5#C80000

Accessibility

Contrast checker

1.4:1Fail

2.5:1Fail

2.9:1Fail

4.3:1AA18

1.4:1Fail

1.7:1Fail

2:1Fail

3.1:1AA18

2.5:1Fail

1.7:1Fail

1.2:1Fail

1.8:1Fail