Palette

Summer Citrus Grove

Bright and refreshing yellows and oranges, capturing the zesty energy 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 Summer 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 Summer Citrus Grove.

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

Data visualization

#F6F8EF#FBF5DC#FFDE6F#FFB629#FC6E2B

Palette guide

How to use Summer Citrus Grove

Overview

The Summer Citrus Grove palette delivers a sun-drenched, zesty energy through its bright yellows and vibrant oranges, anchored by soft, near-white tones. With a brilliant yellow #FFDE6F and an intense orange #FC6E2B, this selection is perfect for designs seeking to convey freshness, warmth, and joyful vitality. The lighter shades, #F6F8EF and #FBF5DC, provide excellent, clean backgrounds that allow the more saturated colors like #FFB629 to pop. Designers can apply this palette to food and beverage branding, summer lifestyle websites, or playful digital campaigns. The dynamic interplay between the soft neutrals and the energetic citrus hues ensures a visually appealing and refreshing user experience, ideal for capturing the essence of a summer orchard.

Best used for

Artisanal food and drink branding (e.g., lemonade, jams)
E-commerce sites for summer fashion or accessories
Blog designs focused on travel or lifestyle
Event promotions for outdoor summer gatherings
Packaging for natural or organic products
Modern and minimalist UI with a pop of color

Suggested color roles

primary

A warm, inviting orange-yellow (#FFB629), excellent for main calls to action, prominent headlines, or impactful branding.

secondary

A bright, cheerful yellow (#FFDE6F), perfect for secondary navigation, hero sections, or supportive content.

accent

A bold, energetic orange (#FC6E2B), ideal for strong calls to action, alerts, or to draw immediate attention.

background

A very light, almost off-white (#F6F8EF), providing a clean, airy base for content.

text

Use #FC6E2B for strong headlines or calls to action on light backgrounds. For general body text, a very dark gray or black is recommended for optimal readability.

Accessibility notes

#F6F8EF and #FBF5DC are very light; ensure text on them has high contrast (e.g., using #FC6E2B or black).
#FFDE6F and #FFB629 might have insufficient contrast for small text on white or very light backgrounds.
Always check contrast ratios for text against backgrounds, especially when using lighter yellows.
Reserve #FC6E2B for high-impact elements where its vibrancy can shine without hindering readability.

Recommended combinations

Zestful Energy

#FFB629 for main elements, #F6F8EF as a clean background, and #FC6E2B for powerful accents.

#FFB629 · #F6F8EF · #FC6E2B

Soft Citrus

#FBF5DC as a soft base, #FFDE6F for content blocks, and #FFB629 for interactive elements or subheadings.

#FBF5DC · #FFDE6F · #FFB629

Bold & Bright

#FC6E2B for primary calls to action, #F6F8EF for a stark contrast background, and #FFDE6F for secondary highlights.

#FC6E2B · #F6F8EF · #FFDE6F

CSS variables

:root {
  --summer-citrus-grove-1: #F6F8EF;
  --summer-citrus-grove-2: #FBF5DC;
  --summer-citrus-grove-3: #FFDE6F;
  --summer-citrus-grove-4: #FFB629;
  --summer-citrus-grove-5: #FC6E2B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "summer-citrus-grove": {
        1: "#F6F8EF",
        2: "#FBF5DC",
        3: "#FFDE6F",
        4: "#FFB629",
        5: "#FC6E2B",
      }
    }
  }
}

Hex values

Color 1#F6F8EF

Color 2#FBF5DC

Color 3#FFDE6F

Color 4#FFB629

Color 5#FC6E2B

Accessibility

Contrast checker

1:1Fail

1.2:1Fail

1.6:1Fail

2.6:1Fail

1:1Fail

1.2:1Fail

1.6:1Fail

2.6:1Fail

1.2:1Fail

1.3:1Fail

2.2:1Fail

1.6:1Fail

1.3:1Fail

1.6:1Fail

2.6:1Fail

2.2:1Fail

1.6:1Fail

Similar palettes

More like Summer Citrus Grove

Summer Citrus Grove

See it in context.

Ready when you are.

Built with Summer Citrus Grove.

How to use Summer Citrus Grove

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Zestful Energy

Soft Citrus

Bold & Bright

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Summer Citrus Grove