Back to palettes

Palette

Golden Prairie Sway

Invokes the tranquil beauty of endless golden prairie fields swaying gently under a warm, distant sun.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Golden Prairie Sway 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 Prairie Sway.

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

Data visualization

#B8860B#DAA520#F5DEB3#FFFDD0#CD853F

Palette guide

How to use Golden Prairie Sway

Overview

The Golden Prairie Sway palette embodies the tranquil beauty of endless golden prairie fields swaying gently under a warm, distant sun. It features a spectrum of golden hues, from the bright #DAA520 and soft #F5DEB3 to the near-white #FFFDD0, providing a radiant gradient. Deep golds like #B8860B and an earthy brown-orange #CD853F add grounding elements and warmth. This palette is highly effective for designers and developers aiming to create serene, natural, and inviting designs. It's perfectly suited for projects that need to convey a sense of peacefulness, organic beauty, and expansive warmth, ensuring a comforting user experience.

Best used for

  • Eco-conscious brand identity and marketing
  • Nature photography websites and portfolios
  • Rural tourism promotions and campaigns
  • Handcrafted goods packaging
  • Wellness and mindfulness applications
  • Serene home interior accents

Suggested color roles

primary

Use #DAA520 as a bright, inviting golden yellow for main headings, key calls to action, or prominent graphical elements.

secondary

Apply #B8860B as a deeper, grounding gold for subheadings, borders, or navigation elements, providing stability and richness.

accent

Incorporate #CD853F as a warm, earthy brown-orange for subtle accents, hover states, or decorative elements.

background

Utilize #FFFDD0 as the softest, near-white base color for content areas, offering a clean, airy, and warm canvas.

text

Employ #B8860B for rich gold headings or a deep charcoal for body text on #FFFDD0, ensuring optimal readability.

Accessibility notes

  • For body text, use a dark color like charcoal or black on #FFFDD0 or #F5DEB3 for optimal readability and WCAG compliance.
  • #B8860B on #FFFDD0 offers good contrast for headings and larger text, but test smaller font sizes carefully.
  • Be cautious using #DAA520 as text on #F5DEB3; contrast may be insufficient for accessibility standards.
  • Ensure interactive elements clearly differentiate states using sufficient contrast to aid usability.

Recommended combinations

Prairie Sunshine

Ideal for light, airy user interfaces, primary content areas, or designs requiring a sense of openness and brightness.

#DAA520 · #F5DEB3 · #FFFDD0

Earthy Roots

Perfect for strong accents, footers, navigation, or elements needing a robust and grounded presence.

#B8860B · #CD853F · #DAA520

Warm Meadow

Great for call-to-action buttons, decorative elements, or sections aiming for an inviting, natural feel.

#CD853F · #F5DEB3 · #B8860B

CSS variables

:root {
  --golden-prairie-sway-1: #B8860B;
  --golden-prairie-sway-2: #DAA520;
  --golden-prairie-sway-3: #F5DEB3;
  --golden-prairie-sway-4: #FFFDD0;
  --golden-prairie-sway-5: #CD853F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-prairie-sway": {
        1: "#B8860B",
        2: "#DAA520",
        3: "#F5DEB3",
        4: "#FFFDD0",
        5: "#CD853F",
      }
    }
  }
}

Related searches

prairie inspired colorsgolden yellow nature palettewarm earthy tonestranquil design colorsnatural brand identity

Palette colors

Hex values

Color 1#B8860B
·
Color 2#DAA520
·
Color 3#F5DEB3
·
Color 4#FFFDD0
·
Color 5#CD853F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
3.1:1AA18
1.1:1Fail
2
1.5:1Fail
1.7:1Fail
2.2:1Fail
1.3:1Fail
3
2.5:1Fail
1.7:1Fail
1.3:1Fail
2.3:1Fail
4
3.1:1AA18
2.2:1Fail
1.3:1Fail
2.9:1Fail
5
1.1:1Fail
1.3:1Fail
2.3:1Fail
2.9:1Fail

Similar palettes

More like Golden Prairie Sway

View all earth