Palette

Harvest Grain Field

The sun-drenched expanse of a grain field, ripe and ready for harvest under a clear sky.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D4AF37#E0CC99#A58C5D#7C6A4F#C7B198

Palette guide

How to use Harvest Grain Field

Overview

The Harvest Grain Field palette captures the sun-drenched expanse of a ripe grain field with its earthy, golden, and muted tones. This collection features a vibrant 'Goldenrod' (#D4AF37), a soft 'Pale Goldenrod' (#E0CC99), a grounding 'Olive Green' (#A58C5D), a deep 'Brown' (#7C6A4F), and a comforting 'Taupe' (#C7B198). These colors are excellent for designs that aim for a natural, rustic, and wholesome aesthetic. Designers can use them to evoke warmth, stability, and organic beauty, while developers will find them ideal for creating interfaces that feel authentic, inviting, and visually harmonious across various platforms.

Best used for

Organic food brand packaging and marketing
Agricultural technology websites
Nature-inspired interior design concepts
Craft and handmade goods e-commerce
Autumn festival promotional materials
Educational content about farming or botany

Suggested color roles

primary

Use '#D4AF37' (Goldenrod) for main calls to action or prominent headings, drawing attention with warmth.

secondary

Apply '#A58C5D' (Olive Green) for supporting information or secondary navigation, providing a grounded contrast.

accent

Leverage '#C7B198' (Taupe) for subtle highlights, borders, or background textures, adding a soft, refined touch.

background

Employ '#E0CC99' (Pale Goldenrod) for a light, inviting background that allows other colors to pop.

text

For lighter backgrounds, use '#7C6A4F' (Brown) or a dark charcoal for optimal readability. For darker elements, a near-white is effective.

Accessibility notes

Ensure strong contrast between text and background, especially when using '#E0CC99' as a background color.
Test '#7C6A4F' for text against '#D4AF37' for sufficient contrast.
Avoid placing light text on '#C7B198' without verifying contrast ratios for readability.
Use a contrast checker to ensure all color pairings meet WCAG AA standards for accessibility.

Recommended combinations

Golden Earth

Creates a rich, grounded aesthetic, suitable for branding and robust content sections.

#D4AF37 · #A58C5D · #7C6A4F

Field Serenity

Excellent for soft backgrounds, subtle UI elements, and a calm, inviting feel.

#E0CC99 · #C7B198 · #A58C5D

Harvest Depth

Provides depth and contrast, ideal for headers, main text, and a light background pairing.

#7C6A4F · #D4AF37 · #E0CC99

CSS variables

:root {
  --harvest-grain-field-1: #D4AF37;
  --harvest-grain-field-2: #E0CC99;
  --harvest-grain-field-3: #A58C5D;
  --harvest-grain-field-4: #7C6A4F;
  --harvest-grain-field-5: #C7B198;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "harvest-grain-field": {
        1: "#D4AF37",
        2: "#E0CC99",
        3: "#A58C5D",
        4: "#7C6A4F",
        5: "#C7B198",
      }
    }
  }
}

Hex values

Color 1#D4AF37

Color 2#E0CC99

Color 3#A58C5D

Color 4#7C6A4F

Color 5#C7B198

Accessibility

Contrast checker

1.3:1Fail

1.5:1Fail

2.5:1Fail

1:1Fail

1.3:1Fail

2:1Fail

3.3:1AA18

1.3:1Fail

1.5:1Fail

2:1Fail

1.6:1Fail

2.5:1Fail

3.3:1AA18

1.6:1Fail

2.5:1Fail

1:1Fail

1.3:1Fail

1.6:1Fail

2.5:1Fail

Similar palettes

More like Harvest Grain Field

Harvest Grain Field

See it in context.

Ready when you are.

Built with Harvest Grain Field.

How to use Harvest Grain Field

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Golden Earth

Field Serenity

Harvest Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Harvest Grain Field