Palette

Harvest Field Serene

Warm, golden hues and rich browns, reflecting ripe fields and the bountiful feel of autumn's harvest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DAA520#F0E68C#BDB76B#8B4513#5F4B30

Palette guide

How to use Harvest Field Serene

Overview

The Harvest Field Serene palette offers a calming blend of warm golden hues and rich browns, perfectly reflecting ripe fields and the bountiful, peaceful feel of autumn's harvest. It features a robust goldenrod #DAA520, a soft khaki #F0E68C, and a muted olive-gold #BDB76B, evoking sun-drenched landscapes. Anchored by the deep #8B4513 (Saddle Brown) and a profound #5F4B30 (Dark Sienna), this collection creates a harmonious, natural aesthetic. Designers and developers will find it ideal for crafting serene, earthy, and inviting digital or physical experiences that convey tranquility and natural abundance.

Best used for

Natural lifestyle blogs and eco-friendly websites
Eco-tourism branding and sustainable travel agencies
Rustic cafes and artisanal food product packaging
Organic product lines and natural beauty brands
Serene spa environments and wellness retreat promotions
Educational content focused on nature and agriculture

Suggested color roles

primary

Utilize #DAA520 as the rich, warm goldenrod primary, ideal for main headings, calls to action, or prominent graphical elements.

secondary

Employ #BDB76B for supporting elements and subheadings, offering a muted, earthy olive-gold that provides subtle harmony.

accent

Introduce #F0E68C as a soft, subtle highlight for delicate details, decorative patterns, or gentle gradients, adding a touch of light.

background

Apply #8B4513 as a deep, grounding brown background, providing a stable and rich canvas for the lighter colors.

text

Designate #5F4B30 for body text and important information, ensuring optimal readability and a very dark, earthy contrast.

Accessibility notes

Text on #F0E68C and #BDB76B should be in #5F4B30 or #8B4513 for optimal contrast and readability.
The darkest colors, #5F4B30 and #8B4513, provide excellent contrast for lighter text or white text, suitable for dark mode sections.
Avoid using #DAA520 directly on #BDB76B for small text due to their relatively close values.
For backgrounds using lighter shades, consider using slightly bolder font weights for critical information to enhance legibility.

Recommended combinations

Golden Field

Creates a luminous, natural field effect, perfect for serene hero images or soft backgrounds.

#DAA520 · #BDB76B · #F0E68C

Earthy Depth

Provides a strong, grounding foundation with a vibrant golden accent, ideal for impactful branding.

#5F4B30 · #8B4513 · #DAA520

Serene Contrast

Offers a gentle yet effective contrast, suitable for content blocks or subtle design elements.

#F0E68C · #5F4B30 · #BDB76B

CSS variables

:root {
  --harvest-field-serene-1: #DAA520;
  --harvest-field-serene-2: #F0E68C;
  --harvest-field-serene-3: #BDB76B;
  --harvest-field-serene-4: #8B4513;
  --harvest-field-serene-5: #5F4B30;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "harvest-field-serene": {
        1: "#DAA520",
        2: "#F0E68C",
        3: "#BDB76B",
        4: "#8B4513",
        5: "#5F4B30",
      }
    }
  }
}

Hex values

Color 1#DAA520

Color 2#F0E68C

Color 3#BDB76B

Color 4#8B4513

Color 5#5F4B30

Accessibility

Contrast checker

1.7:1Fail

1.1:1Fail

3.2:1AA18

3.7:1AA18

1.7:1Fail

1.6:1Fail

5.5:1AA

6.5:1AA

1.1:1Fail

1.6:1Fail

3.4:1AA18

4:1AA18

3.2:1AA18

5.5:1AA

3.4:1AA18

1.2:1Fail

3.7:1AA18

6.5:1AA

4:1AA18

1.2:1Fail

Similar palettes

More like Harvest Field Serene