Back to palettes

Palette

Spice Merchant's Dream

A vibrant array of colors reminiscent of aromatic spices overflowing in a bustling, sunlit bazaar.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spice Merchant's Dream 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 Merchant's Dream.

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

Data visualization

#CC5500#E28D2B#FFC145#8B4000#A02D02

Palette guide

How to use Spice Merchant's Dream

Overview

The Spice Merchant's Dream palette (ID: spice-merchant-s-dream) presents a vibrant and energetic array of warm colors, reminiscent of aromatic spices overflowing in a bustling, sunlit bazaar. This rich collection includes a bold orange #CC5500, a bright amber #E28D2B, a luminous golden yellow #FFC145, a deep burnt orange #8B4000, and an intense fiery red-orange #A02D02. It's an excellent choice for designers aiming to inject vitality and exotic richness into their projects, perfect for brands that convey passion, energy, or a global appeal. Developers can leverage these distinct and powerful shades to create highly engaging user interfaces, ensuring elements pop and deliver a visually stimulating, cohesive experience.

Best used for

  • Energetic food and beverage branding
  • Travel and exotic destination marketing materials
  • High-impact event promotions and digital advertising
  • Bold e-commerce platforms for artisanal or global goods
  • Interactive dashboards or infographics requiring visual punch
  • Restaurant websites or culinary blogs with a vibrant theme

Suggested color roles

primary

Utilize #A02D02 (Fiery Red-Orange) or #8B4000 (Burnt Orange) for dominant calls-to-action, major headings, or key brand elements to convey a strong, energetic, and rich presence.

secondary

Apply #CC5500 (Bold Orange) or #E28D2B (Bright Amber) as supportive colors for subheadings, secondary buttons, or information panels, providing a vibrant, yet balanced, tone.

accent

Introduce #FFC145 (Luminous Golden Yellow) for highlighting critical information, interactive states, or small decorative elements, adding a bright, attention-grabbing pop.

background

While primarily a foreground palette, #FFC145 could serve as a vibrant header background. For content backgrounds, pair with a very light cream or white, using these colors for foreground elements.

text

For body text, a dark, contrasting color like black or a deep charcoal is essential for readability against these vibrant hues. For text on light backgrounds, #A02D02 works well.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #FFC145 or #E28D2B on lighter backgrounds. Dark text or black is crucial.
  • Avoid placing light text directly on #CC5500 or #A02D02 without strong contrast; white text with a shadow or outline might be needed.
  • When using #FFC145 for interactive elements, ensure distinct focus and hover states are implemented for accessibility.
  • Be mindful of color-blind users; distinguish elements not solely by hue but also by saturation and brightness, especially when using multiple oranges.

Recommended combinations

Fiery Impact

A high-energy combination for primary branding, bold headlines, and impactful call-to-actions, ensuring maximum visibility and excitement.

#A02D02 · #CC5500 · #FFC145

Golden Bazaar

Excellent for creating engaging visual sections, banners, or product highlights, capturing the bright, inviting feel of a sunlit market.

#E28D2B · #FFC145 · #CC5500

Deep & Vibrant

Ideal for conveying intensity and richness, suitable for impactful graphics, strong branding statements, or important alerts with a warm, exotic touch.

#8B4000 · #A02D02 · #E28D2B

CSS variables

:root {
  --spice-merchant-s-dream-1: #CC5500;
  --spice-merchant-s-dream-2: #E28D2B;
  --spice-merchant-s-dream-3: #FFC145;
  --spice-merchant-s-dream-4: #8B4000;
  --spice-merchant-s-dream-5: #A02D02;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spice-merchant-s-dream": {
        1: "#CC5500",
        2: "#E28D2B",
        3: "#FFC145",
        4: "#8B4000",
        5: "#A02D02",
      }
    }
  }
}

Related searches

vibrant orange yellow paletteenergetic spice market colorsexotic bazaar color schemerich warm UI designsunlit orange red palette

Palette colors

Hex values

Color 1#CC5500
·
Color 2#E28D2B
·
Color 3#FFC145
·
Color 4#8B4000
·
Color 5#A02D02
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
1.7:1Fail
1.7:1Fail
2
1.7:1Fail
1.6:1Fail
2.9:1Fail
2.8:1Fail
3
2.7:1Fail
1.6:1Fail
4.6:1AA
4.5:1AA
4
1.7:1Fail
2.9:1Fail
4.6:1AA
1:1Fail
5
1.7:1Fail
2.8:1Fail
4.5:1AA
1:1Fail

Similar palettes

More like Spice Merchant's Dream

View all warm
Bazaar Spice Bloom
Bazaar Spice Symphony
Moroccan Souk Spice
Moroccan Spice Bazaar
Saffron Market Hues
Souk Saffron Blend