Palette

Golden Grain Fields

Radiant yellows and golds capturing the warm glow of sun-drenched grain fields at harvest.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Golden Grain Fields 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 Golden Grain Fields.

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

Data visualization

#9B6B00#C89D00#FFCE00#FFED70#FFF9D0

Palette guide

How to use Golden Grain Fields

Overview

The "Golden Grain Fields" palette beautifully captures the warm, sun-drenched glow of ripening wheat fields at harvest time. Featuring a luminous spectrum from the deep #9B6B00 and rich #C89D00, through the bright #FFCE00, to the delicate #FFED70 and almost ethereal #FFF9D0, this palette exudes natural warmth and gentle abundance. Designers and developers can leverage these hues to create serene, inviting, and sophisticated experiences. It's an excellent choice for projects aiming to evoke a sense of heritage, natural bounty, and understated elegance, with its soft transitions from rich gold to creamy lightness.

Best used for

Premium organic food branding
Artisanal bakery or craft brewery websites
Luxury autumn home decor collections
High-end natural skincare packaging
Historical or heritage-themed digital content
Photography portfolios with a warm, soft aesthetic

Suggested color roles

primary

#C89D00 (Rich Gold) - Use for prominent branding, main navigation, or key feature areas to convey a sense of quality and established warmth.

secondary

#FFCE00 (Bright Gold) - Ideal for subheadings, interactive elements, or to add a luminous touch that draws attention without overwhelming.

accent

#9B6B00 (Deep Gold) - Deploy sparingly for strong contrasts, important icons, or to anchor a design with a touch of deep, earthy richness.

background

#FFF9D0 (Very Pale Yellow) or #FFED70 (Light Yellow) for a soft, luminous base that allows darker elements to stand out gently.

text

#9B6B00 (Deep Gold) for headings, or a dark charcoal for body text, ensuring excellent readability against the lighter background tones.

Accessibility notes

Ensure sufficient contrast for text when using #FFED70 or #FFF9D0 as background colors.
#FFCE00 should be paired with dark text (e.g., #9B6B00 or black) for readability.
Avoid using #FFF9D0 for small text elements due to its low contrast against white.
Provide alternative indicators for information conveyed by the slight differences between light yellows.

Recommended combinations

Harvest Glow

Creates a radiant yet grounded feel, ideal for hero banners or product highlights.

#FFCE00 · #FFED70 · #9B6B00

Wheat Fields

Perfect for soft backgrounds with elegant textual overlays or subtle branding.

#FFF9D0 · #C89D00 · #FFCE00

Golden Depth

Offers rich contrast, suitable for footers, navigation, or sophisticated UI elements.

#9B6B00 · #C89D00 · #FFED70

CSS variables

:root {
  --golden-grain-fields-1: #9B6B00;
  --golden-grain-fields-2: #C89D00;
  --golden-grain-fields-3: #FFCE00;
  --golden-grain-fields-4: #FFED70;
  --golden-grain-fields-5: #FFF9D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-grain-fields": {
        1: "#9B6B00",
        2: "#C89D00",
        3: "#FFCE00",
        4: "#FFED70",
        5: "#FFF9D0",
      }
    }
  }
}

Hex values

Color 1#9B6B00

Color 2#C89D00

Color 3#FFCE00

Color 4#FFED70

Color 5#FFF9D0

Accessibility

Contrast checker

1.8:1Fail

3.1:1AA18

3.9:1AA18

4.4:1AA18

1.8:1Fail

1.7:1Fail

2.1:1Fail

2.4:1Fail

3.1:1AA18

1.7:1Fail

1.2:1Fail

1.4:1Fail

3.9:1AA18

2.1:1Fail

1.2:1Fail

1.1:1Fail

4.4:1AA18

2.4:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Golden Grain Fields

View all warm

Sun-Kissed Wheat Fields

Amber Grain Harvest

Golden Afternoon Glow

Golden Hour Harvest

Harvest Gold Fields

Meadow Lark Flight