Palette

Golden Hour Fields

Radiant yellows and oranges capture the magical, soft light of the golden hour over sprawling fields.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFCC66#FFB347#FFA000#E08A00#C27000

Palette guide

How to use Golden Hour Fields

Overview

The Golden Hour Fields palette immerses designs in the radiant warmth of a late summer sunset. Comprising a rich spectrum from the bright #FFCC66 to the deep #C27000, alongside vibrant #FFB347, #FFA000, and earthy #E08A00, this collection evokes a sense of natural beauty and serene comfort. It's perfectly suited for projects aiming to convey warmth, authenticity, and a connection to nature. Designers and developers can leverage its inviting glow to create engaging user experiences, establishing a cozy yet sophisticated atmosphere. This palette is ideal for capturing the magical, soft light that defines the golden hour, providing a harmonious and visually appealing foundation for any creative endeavor.

Best used for

Summer and autumn-themed branding
Natural food and beverage packaging
Travel and adventure blogs
Photography portfolios (especially landscape)
Cozy home decor websites
Wellness and spa-related digital products

Suggested color roles

primary

#FFA000 serves as a strong, central golden hue, excellent for main branding elements, prominent calls to action, or key visual anchors.

secondary

#FFB347 offers a slightly softer, yet still vibrant orange, ideal for supporting graphics, subheadings, or secondary buttons, maintaining warmth.

accent

#FFCC66, the brightest gold, works wonderfully for subtle highlights, interactive states, or small decorative elements, adding a touch of radiance.

background

#E08A00 provides a deeper, more grounded base, suitable for content blocks, footers, or a rich, inviting background that allows lighter text to pop.

text

#C27000, the darkest hue, is perfect for headings and important text on lighter backgrounds like #FFCC66 or #FFB347. For optimal readability of body text on these lighter shades, a true black or deep charcoal is recommended.

Accessibility notes

Ensure sufficient contrast when pairing lighter shades like #FFCC66 or #FFB347 with text, especially for body copy.
Use #C27000 or a dark neutral for text on #FFCC66 to meet WCAG AA standards for readability.
Avoid placing #FFB347 text on #FFA000 backgrounds due to potential low contrast, particularly for smaller fonts.
For larger text, #E08A00 on #FFCC66 can be acceptable, but always evaluate against WCAG guidelines for smaller or critical text.

Recommended combinations

Radiant Horizon

Ideal for hero sections, main navigation, or visual elements where a gradient from light to deep golden is desired.

#FFCC66 · #FFA000 · #E08A00

Earthy Glow

Perfect for footers, darker content blocks, or sections requiring a more grounded and mature warm aesthetic.

#FFB347 · #E08A00 · #C27000

Sunset Accent

Use for call-out boxes, emphasized text, or interactive components where a bright highlight needs a strong, dark anchor.

#FFCC66 · #FFB347 · #C27000

CSS variables

:root {
  --golden-hour-fields-2-1: #FFCC66;
  --golden-hour-fields-2-2: #FFB347;
  --golden-hour-fields-2-3: #FFA000;
  --golden-hour-fields-2-4: #E08A00;
  --golden-hour-fields-2-5: #C27000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-hour-fields-2": {
        1: "#FFCC66",
        2: "#FFB347",
        3: "#FFA000",
        4: "#E08A00",
        5: "#C27000",
      }
    }
  }
}

Hex values

Color 1#FFCC66

Color 2#FFB347

Color 3#FFA000

Color 4#E08A00

Color 5#C27000

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.8:1Fail

2.5:1Fail

1.2:1Fail

1.1:1Fail

1.5:1Fail

2.1:1Fail

1.4:1Fail

1.1:1Fail

1.3:1Fail

1.8:1Fail

1.5:1Fail

1.3:1Fail

1.4:1Fail

2.5:1Fail

2.1:1Fail

1.8:1Fail

1.4:1Fail

Similar palettes

More like Golden Hour Fields

Golden Hour Fields

See it in context.

Ready when you are.

Built with Golden Hour Fields.

How to use Golden Hour Fields

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Radiant Horizon

Earthy Glow

Sunset Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Golden Hour Fields