Back to palettes

Palette

Summer Citrus

Bright and zesty hues of orange and yellow radiate the joyful, sun-kissed energy of a summer 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 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.

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 Summer Citrus

Overview

The Summer Citrus palette is an intense burst of warm, energetic hues, featuring a range of sunny yellows and fiery oranges. Dominated by a brilliant gold #FFD700 and a bold orange #FF4500, this selection radiates the joyful, sun-kissed energy of a summer citrus grove. The various shades of orange, including #FFA500, #FF6347, and #FF8C00, provide depth and versatility, allowing for gradients and layered designs that maintain a cohesive, vibrant feel. This palette is ideal for designs aiming to be lively, appetizing, and attention-grabbing. Designers will find these hues perfect for food and beverage branding, energetic digital campaigns, or any project seeking to evoke warmth, excitement, and a truly summery disposition.

Best used for

  • Food and drink branding, especially for juices or snacks
  • Summer event marketing and invitations
  • Vibrant e-commerce websites (e.g., fashion, accessories)
  • Playful mobile app interfaces
  • Advertising campaigns for seasonal promotions
  • Restaurant and cafe branding with a warm atmosphere

Suggested color roles

primary

A bold, energetic orange (#FF4500), excellent for calls to action, main headers, or brand highlights.

secondary

A bright, sunny yellow (#FFD700), perfect for secondary information, backgrounds, or complementary graphics.

accent

A lively coral-orange (#FF6347), ideal for subtle highlights, interactive states, or to add a touch of warmth.

background

A warm, inviting yellow (#FFD700) that can serve as a bright, cheerful background or main content area.

text

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

Accessibility notes

  • #FFD700 has low contrast on white backgrounds; avoid for small text.
  • Ensure sufficient contrast for all text, especially when using lighter oranges like #FFA500 on backgrounds like #FFD700.
  • #FF4500 and #FF8C00 provide better contrast for text on #FFD700 than other palette colors.
  • It's challenging to find high-contrast text colors within this palette for light backgrounds; consider a dark neutral for body text.

Recommended combinations

Sunset Glow

#FFD700 as a bright base, #FFA500 for content blocks, and #FF4500 for powerful calls to action.

#FFD700 · #FFA500 · #FF4500

Fiery Zest

#FF4500 for dominant elements, #FF6347 for secondary emphasis, and #FFD700 for bright highlights.

#FF4500 · #FF6347 · #FFD700

Warm Gradation

Use #FF8C00 for deeper sections, #FFA500 for mid-tones, and #FFD700 for the lightest, brightest areas.

#FF8C00 · #FFA500 · #FFD700

CSS variables

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

Tailwind config

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

Related searches

all orange yellow palettevibrant citrus brandingwarm summer color schemeenergetic fruit colorsbright web design colors

Palette colors

Hex values

Color 1#FFD700
·
Color 2#FFA500
·
Color 3#FF6347
·
Color 4#FF4500
·
Color 5#FF8C00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
2.5:1Fail
1.7:1Fail
2
1.4:1Fail
1.5:1Fail
1.7:1Fail
1.2:1Fail
3
2.1:1Fail
1.5:1Fail
1.2:1Fail
1.3:1Fail
4
2.5:1Fail
1.7:1Fail
1.2:1Fail
1.5:1Fail
5
1.7:1Fail
1.2:1Fail
1.3:1Fail
1.5:1Fail

Similar palettes

More like Summer Citrus

View all vibrant
Sunny Citrus Grove
Citrus Burst Joy
Citrus Grove Delight
Citrus Zest Splash
Citrus Zest Splash
Orchard Fruit Burst