Palette

Citrus Grove Bloom

A bright and juicy mix of yellows and oranges, like a sun-drenched citrus grove in full bloom.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD700#FFA500#FF6347#FF4500#DC143C

Palette guide

How to use Citrus Grove Bloom

Overview

The Citrus Grove Bloom palette is a vibrant and juicy collection, evoking the cheerful abundance of a sun-drenched citrus grove in full bloom. It features the radiant #FFD700 (Gold), a classic #FFA500 (Orange), and a playful #FF6347 (Tomato), intensified by the bold #FF4500 (OrangeRed) and a deep #DC143C (Crimson). This palette offers designers and developers a rich spectrum of warm oranges and reds, perfect for creating inviting, energetic, and passionate digital experiences. Its harmonious blend is ideal for conveying warmth, growth, and a lively spirit across various applications, from branding to UI design.

Best used for

Food and beverage branding
Summer fashion collections
Event promotion graphics (parties, festivals)
Children's educational content
Apparel and accessory design
Digital marketing campaigns with energetic themes

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

#DC143C (A deep, passionate crimson, perfect for high-impact alerts, primary buttons, or key highlights that need to pop.)

background

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

text

#DC143C (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 #DC143C or #000000.
The darker tones, #DC143C, #FF4500, and #FF6347, 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 Bloom

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

#FFD700 · #FFA500 · #DC143C

Warm Gradient

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

#FF6347 · #FF4500 · #DC143C

Zesty Contrast

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

#FFD700 · #DC143C · #FF6347

CSS variables

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

Tailwind config

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

Hex values

Color 1#FFD700

Color 2#FFA500

Color 3#FF6347

Color 4#FF4500

Color 5#DC143C

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

2.5:1Fail

3.6:1AA18

1.4:1Fail

1.5:1Fail

1.7:1Fail

2.5:1Fail

2.1:1Fail

1.5:1Fail

1.2:1Fail

1.7:1Fail

2.5:1Fail

1.7:1Fail

1.2:1Fail

1.5:1Fail

3.6:1AA18

2.5:1Fail

1.7:1Fail

1.5:1Fail

Similar palettes

More like Citrus Grove Bloom

Citrus Grove Bloom

See it in context.

Ready when you are.

Built with Citrus Grove Bloom.

How to use Citrus Grove Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Radiant Bloom

Warm Gradient

Zesty Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Grove Bloom