Palette

Golden Grain Horizon

The rich, golden glow of a vast wheat field ripening under the summer sun, stretching to the horizon.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B8860B#DAA520#F0E68C#FFD700#8B4513

Palette guide

How to use Golden Grain Horizon

Overview

The "Golden Grain Horizon" palette beautifully evokes the vast, sunlit expanse of ripening wheat fields stretching to the horizon. It features a harmonious blend of rich golds and earthy browns, including the deep #B8860B (Dark Goldenrod), vibrant #DAA520 (Goldenrod), and radiant #FFD700 (Gold). The palette is softened by the unique #F0E68C (Khaki) and grounded by the robust #8B4513 (Saddle Brown). This collection offers designers and developers a sophisticated yet natural range of colors, ideal for projects seeking a serene, rustic, and established aesthetic. It perfectly captures the essence of a bountiful, sun-kissed landscape.

Best used for

Countryside resort branding or websites
Agricultural industry marketing materials
Packaging for artisan bread or craft beers
Documentary film titles or nature photography
Interior design for rustic farmhouses or lodges
Autumn-themed editorial layouts

Suggested color roles

primary

#DAA520 (Goldenrod) - Use for prominent headings, main calls-to-action, or key graphical elements to establish a warm and inviting presence.

secondary

#B8860B (Dark Goldenrod) - Ideal for subheadings, navigation, or supporting sections, providing depth and a sense of grounding.

accent

#FFD700 (Gold) - Deploy sparingly for bright highlights, interactive elements, or to add a touch of luminous warmth and visual sparkle.

background

A very light cream or off-white, or a pale tint of #F0E68C, to ensure the richer golds and browns stand out clearly.

text

#8B4513 (Saddle Brown) for headings, or a deep charcoal/black for body text, ensuring excellent readability against lighter backgrounds.

Accessibility notes

Ensure #F0E68C has sufficient contrast when used as a background for text.
Pair #FFD700 with darker text like #8B4513 or black to meet WCAG contrast guidelines.
Be cautious when using #DAA520 and #B8860B together for small text due to potential low contrast.
Provide clear visual cues in addition to color for interactive elements, especially with similar gold tones.

Recommended combinations

Horizon Sunset

Creates a warm, dramatic effect for hero sections or impactful branding.

#FFD700 · #DAA520 · #8B4513

Grain Field

Ideal for soft, natural backgrounds with elegant textual overlays or supporting content.

#F0E68C · #B8860B · #DAA520

Earthy Depth

Provides a robust, grounded feel, perfect for footers, navigation, or detailed information.

#8B4513 · #B8860B · #F0E68C

CSS variables

:root {
  --golden-grain-horizon-1: #B8860B;
  --golden-grain-horizon-2: #DAA520;
  --golden-grain-horizon-3: #F0E68C;
  --golden-grain-horizon-4: #FFD700;
  --golden-grain-horizon-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-grain-horizon": {
        1: "#B8860B",
        2: "#DAA520",
        3: "#F0E68C",
        4: "#FFD700",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#B8860B

Color 2#DAA520

Color 3#F0E68C

Color 4#FFD700

Color 5#8B4513

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

2.3:1Fail

2.2:1Fail

1.5:1Fail

1.7:1Fail

1.6:1Fail

3.2:1AA18