Palette

Spiced Market Aisle

Warm and inviting tones reminiscent of exotic spices and vibrant market stalls.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Market Aisle 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 Spiced Market Aisle.

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

Data visualization

#9E3D2F#D25E4B#F4A261#E76F51#7E2A1E

Palette guide

How to use Spiced Market Aisle

Overview

The Spiced Market Aisle palette offers a rich and earthy collection of warm tones, reminiscent of a bustling bazaar filled with exotic spices. It features the deep, inviting red-brown #7E2A1E, transitioning through the comforting #9E3D2F and the vibrant #D25E4B, before softening to the warm coral of #E76F51 and the gentle orange #F4A261. This palette perfectly captures a cozy, rustic, and rich aesthetic, making it excellent for designs that aim to feel authentic, handcrafted, and deeply inviting. Its harmonious blend provides depth and warmth, ensuring a memorable and engaging user experience across various applications.

Best used for

Rustic and artisanal product branding
Gourmet food packaging and culinary websites
Event decor for cozy gatherings
Interior design for cafes or living spaces
Cultural heritage and travel content
E-commerce platforms for handcrafted goods

Suggested color roles

primary

#D25E4B (Rich, inviting red-orange, ideal for main brand identity and calls to action)

secondary

#9E3D2F (Deep, warm red-brown, providing a strong supportive tone for sections and subheadings)

accent

#E76F51 (Vibrant coral, used sparingly for highlights, interactive states, or key visual elements)

background

#F4A261 (Soft, light orange, serving as a warm, approachable base for content)

text

#7E2A1E (Deepest red-brown, ensuring excellent readability for body text on light backgrounds)

Accessibility notes

Use #7E2A1E or a dark charcoal for body text on #F4A261 to ensure optimal contrast.
Be cautious with #E76F51 or #D25E4B for small text on #F4A261; reserve for larger headlines.
Ensure sufficient contrast for all interactive elements, providing clear visual feedback.
Consider outlining or bolding text if using lighter colors for emphasis on similar backgrounds.

Recommended combinations

Earthy Foundation

Perfect for establishing a strong, readable base with a warm, inviting primary color.

#7E2A1E · #F4A261 · #D25E4B

Market Vibrancy

Excellent for section headers, buttons, and visual elements needing a lively yet grounded feel.

#D25E4B · #E76F51 · #9E3D2F

Cozy Harmony

Use for cards, subtle background patterns, or UI elements that require a soft, cohesive look.

#F4A261 · #9E3D2F · #E76F51

CSS variables

:root {
  --spiced-market-aisle-2-1: #9E3D2F;
  --spiced-market-aisle-2-2: #D25E4B;
  --spiced-market-aisle-2-3: #F4A261;
  --spiced-market-aisle-2-4: #E76F51;
  --spiced-market-aisle-2-5: #7E2A1E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-market-aisle-2": {
        1: "#9E3D2F",
        2: "#D25E4B",
        3: "#F4A261",
        4: "#E76F51",
        5: "#7E2A1E",
      }
    }
  }
}

Hex values

Color 1#9E3D2F

Color 2#D25E4B

Color 3#F4A261

Color 4#E76F51

Color 5#7E2A1E

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

2.1:1Fail

1.4:1Fail

1.7:1Fail

1.9:1Fail

1.2:1Fail

2.4:1Fail

3.2:1AA18

1.9:1Fail

1.5:1Fail

4.6:1AA