Back to palettes

Palette

Sunset Prairie Hues

The fiery and earthy colors painted across an open prairie as the sun dips below the horizon.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunset Prairie Hues 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 Sunset Prairie Hues.

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

Data visualization

#E6C29C#D19C6E#B8784D#9C542E#7C3B1C

Palette guide

How to use Sunset Prairie Hues

Overview

The 'Sunset Prairie Hues' palette beautifully captures the fiery and earthy colors of an open prairie as the sun dips below the horizon. This natural gradient ranges from the soft, sunlit #E6C29C to the deep, grounding #7C3B1C. Intermediate shades like #D19C6E, #B8784D, and #9C542E provide rich, harmonious transitions, making this palette ideal for layered designs that require depth and organic flow. It perfectly evokes a sense of natural warmth, rugged beauty, and serene expansiveness, suitable for projects aiming for an authentic and grounded feel.

Best used for

  • Nature-focused documentaries and media
  • Organic food and sustainable product branding
  • Rustic wedding themes and invitations
  • Eco-friendly lifestyle blogs and websites
  • Outdoor adventure and exploration brands
  • Wildlife and conservation organizations

Suggested color roles

primary

Use #B8784D as a versatile, warm mid-tone for brand elements, headings, or key UI components.

secondary

Employ #9C542E for strong subheadings, important text, or as a grounding color in graphic compositions.

accent

Apply #E6C29C for soft highlights, delicate borders, or to simulate a gentle, sunlit glow.

background

Utilize #D19C6E for a warm, approachable background. For a lighter touch, a very light cream provides an excellent canvas.

text

Choose #7C3B1C for body text on lighter backgrounds like #E6C29C or #D19C6E to ensure optimal readability. White text contrasts well on #9C542E or #7C3B1C.

Accessibility notes

  • For body text, use #7C3B1C or #9C542E on lighter backgrounds like #E6C29C or #D19C6E for good contrast.
  • Avoid using adjacent colors in the gradient (e.g., #D19C6E on #B8784D) for text and background combinations.
  • #E6C29C is best suited for backgrounds or large display text, not small body text on light surfaces.
  • White text on the darkest colors, #7C3B1C and #9C542E, provides excellent readability and contrast.

Recommended combinations

Prairie Gradient

Creates a natural, flowing gradient perfect for backgrounds, large banners, or illustrative elements.

#E6C29C · #D19C6E · #B8784D

Earthy Depth

Provides strong, grounded tones for impactful text, primary buttons, or elements requiring a sense of stability.

#9C542E · #7C3B1C · #B8784D

Sunset Horizon

Offers a balanced combination of mid-to-dark tones, great for layered designs or creating visual depth.

#D19C6E · #B8784D · #7C3B1C

CSS variables

:root {
  --sunset-prairie-hues-1: #E6C29C;
  --sunset-prairie-hues-2: #D19C6E;
  --sunset-prairie-hues-3: #B8784D;
  --sunset-prairie-hues-4: #9C542E;
  --sunset-prairie-hues-5: #7C3B1C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunset-prairie-hues": {
        1: "#E6C29C",
        2: "#D19C6E",
        3: "#B8784D",
        4: "#9C542E",
        5: "#7C3B1C",
      }
    }
  }
}

Related searches

earthy prairie colorsnatural sunset palettewarm gradient schemerustic brown orangenature-inspired branding

Palette colors

Hex values

Color 1#E6C29C
·
Color 2#D19C6E
·
Color 3#B8784D
·
Color 4#9C542E
·
Color 5#7C3B1C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
3.4:1AA18
5:1AA
2
1.4:1Fail
1.5:1Fail
2.3:1Fail
3.5:1AA18
3
2.2:1Fail
1.5:1Fail
1.6:1Fail
2.3:1Fail
4
3.4:1AA18
2.3:1Fail
1.6:1Fail
1.5:1Fail
5
5:1AA
3.5:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Sunset Prairie Hues

View all warm