Palette

Summer Harvest

Capturing the rich, sun-baked colors of late summer crops and fields ready for gathering.

EarthNatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Summer Harvest 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 Harvest.

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

Data visualization

#D9534F#F4C430#FFDAB9#8FBC8F#4A704A

Palette guide

How to use Summer Harvest

Overview

The Summer Harvest palette captures the rustic beauty of late summer, blending earthy tones with vibrant accents. Featuring a rich red (#D9534F), a cheerful golden yellow (#F4C430), a soft peachy cream (#FFDAB9), a calming medium green (#8FBC8F), and a deep forest green (#4A704A), this collection evokes sun-baked fields and abundant crops. It's ideal for projects aiming for a natural, wholesome, or traditional feel. Designers can leverage its warmth for branding, web interfaces, or print materials, creating a welcoming and grounded aesthetic that resonates with nature's bounty and autumnal transitions.

Best used for

Farm-to-table restaurant branding
Autumnal event invitations and decor
Nature-themed website design
Organic product packaging
Cozy home decor digital mockups
Educational materials about seasons

Suggested color roles

primary

Use #D9534F (rich red) for prominent calls-to-action or key branding elements, signifying warmth and energy.

secondary

Apply #F4C430 (golden yellow) for navigation highlights, secondary buttons, or illustrative accents to bring a cheerful glow.

accent

Introduce #FFDAB9 (peachy cream) sparingly for delicate details, highlight text, or subtle background textures, adding softness.

background

Utilize #8FBC8F (medium green) for content sections or soft backgrounds, offering a serene and natural base.

text

Employ #4A704A (deep forest green) for body text and headings to ensure excellent readability against lighter palette colors.

Accessibility notes

Ensure sufficient contrast when pairing #FFDAB9 with lighter text; consider using a darker color like #4A704A for legibility.
Check contrast ratios for #F4C430 text on #8FBC8F or #4A704A backgrounds to meet WCAG guidelines.
The vibrant #D9534F offers good contrast with white or light cream text for headings and primary content.
Avoid using #FFDAB9 and #F4C430 in close proximity for critical information due to potential low contrast.

Recommended combinations

Harvest Glow

Perfect for vibrant headers or hero sections, emphasizing warmth and approachability.

#D9534F · #F4C430 · #FFDAB9

Earthy Depth

Excellent for natural branding or background elements, providing a grounded and organic feel.

#4A704A · #8FBC8F · #F4C430

Muted Comfort

Ideal for soft interfaces or illustrative details, balancing warmth with gentle green tones.

#FFDAB9 · #8FBC8F · #D9534F

CSS variables

:root {
  --summer-harvest-1: #D9534F;
  --summer-harvest-2: #F4C430;
  --summer-harvest-3: #FFDAB9;
  --summer-harvest-4: #8FBC8F;
  --summer-harvest-5: #4A704A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "summer-harvest": {
        1: "#D9534F",
        2: "#F4C430",
        3: "#FFDAB9",
        4: "#8FBC8F",
        5: "#4A704A",
      }
    }
  }
}

Hex values

Color 1#D9534F

Color 2#F4C430

Color 3#FFDAB9

Color 4#8FBC8F

Color 5#4A704A

Accessibility

Contrast checker

2.4:1Fail

3:1AA18

1.8:1Fail

1.4:1Fail

2.4:1Fail

1.2:1Fail

1.3:1Fail

3.4:1AA18

3:1AA18

1.2:1Fail

1.6:1Fail

4.3:1AA18

1.8:1Fail

1.3:1Fail

1.6:1Fail

2.6:1Fail

1.4:1Fail

3.4:1AA18

4.3:1AA18

2.6:1Fail

Similar palettes

More like Summer Harvest

View all Earth

Forest Berry Patch

Terracotta Harvest Dusk

Ancient Forest Roots

Artisan Ceramic Glaze

Boho Pottery Kiln

Botanical Earth Ground