Palette

Spice Market Harvest

A comforting and rich palette inspired by the warm, aromatic spices of an bustling market.

earthwarm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spice Market Harvest 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 Spice Market Harvest.

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

Data visualization

#8B4513#CD853F#DAA520#C67027#F5DEB3

Palette guide

How to use Spice Market Harvest

Overview

The Spice Market Harvest palette offers a comforting and rich collection of warm, earthy tones perfect for conveying natural warmth and rustic elegance. Featuring a deep, grounding brown like #8B4513, a warm tan #CD853F, a vibrant golden yellow #DAA520, a spicy burnt orange #C67027, and a soft cream #F5DEB3, this palette is ideal for projects seeking an organic, inviting feel. Designers can leverage its harmonious blend for brand identity that evokes coziness and authenticity, while developers will appreciate the clear differentiation between shades for UI elements, ensuring a consistent and appealing visual language across digital platforms. This palette excels in creating a sense of natural comfort and understated luxury.

Best used for

Rustic brand identities and logos
Autumn-themed marketing campaigns and event invitations
Cozy home decor or food blog websites
Packaging for natural, organic, or artisanal products
Interior design mood boards for warm, inviting spaces
Seasonal UI themes for apps or e-commerce stores

Suggested color roles

primary

Utilize #8B4513 (Saddle Brown) for dominant brand elements, strong headings, or foundational sections to establish a deep, earthy anchor.

secondary

Apply #CD853F (Peru) as a supportive color for subheadings, key content blocks, or secondary call-to-action buttons, offering a warm, approachable contrast.

accent

Introduce #DAA520 (Goldenrod) or #C67027 (Orange Peel) for impactful highlights, interactive elements, or small decorative details to add a vibrant, spicy touch.

background

Employ #F5DEB3 (Wheat) as a clean, warm background for content areas, providing excellent readability and a soft, inviting canvas.

text

For main body text, use a dark, highly legible color such as #8B4513 or a standard charcoal/black on light backgrounds like #F5DEB3 to ensure optimal readability.

Accessibility notes

Ensure sufficient contrast between text and background colors, especially for small font sizes. Test #8B4513 or black on #F5DEB3.
Avoid using similar mid-tones like #CD853F and #C67027 adjacent for critical information, as contrast might be low for some users.
Utilize a contrast checker tool for all color pairings to meet WCAG AA or AAA guidelines, particularly for interactive elements.
Consider providing alternative visual cues beyond color alone when conveying important states or information.

Recommended combinations

Earthy Foundation

Ideal for establishing a robust, natural base for websites or print materials, using the darkest as primary, mid-tone for details, and lightest for backgrounds.

#8B4513 · #CD853F · #F5DEB3

Warm Spice Pop

Perfect for creating engaging call-to-actions or feature sections where warmth and a subtle pop of color are desired against a neutral background.

#CD853F · #C67027 · #DAA520

Harvest Glow

Use for highlighting seasonal promotions or content, blending golden yellows and oranges against a soft cream for a radiant, inviting feel.

#DAA520 · #C67027 · #F5DEB3

CSS variables

:root {
  --spice-market-harvest-1: #8B4513;
  --spice-market-harvest-2: #CD853F;
  --spice-market-harvest-3: #DAA520;
  --spice-market-harvest-4: #C67027;
  --spice-market-harvest-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spice-market-harvest": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#DAA520",
        4: "#C67027",
        5: "#F5DEB3",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#DAA520

Color 4#C67027

Color 5#F5DEB3

Accessibility

Contrast checker

2.4:1Fail

3.2:1AA18

1.9:1Fail

5.4:1AA

2.4:1Fail

1.3:1Fail

1.2:1Fail

2.3:1Fail

3.2:1AA18

1.3:1Fail

1.6:1Fail

1.7:1Fail