Back to palettes

Palette

Moroccan Spice Bazaar

A rich tapestry of warm oranges and yellows, capturing the exotic scents and lively spirit of a bustling bazaar.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moroccan Spice Bazaar 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 Moroccan Spice Bazaar.

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

Data visualization

#A34A2E#E66000#FF9933#FFCC66#FFEEBB

Palette guide

How to use Moroccan Spice Bazaar

Overview

The "Moroccan Spice Bazaar" palette evokes the vibrant energy of a bustling market, blending rich, earthy tones with luminous brights. Anchored by the deep terracotta of #A34A2E, it transitions through the fiery orange of #E66000 and the warm glow of #FF9933. Lighter shades like #FFCC66 and the creamy #FFEEBB provide balance, creating a harmonious yet dynamic range. This palette is ideal for projects seeking to convey warmth, authenticity, and an exotic flair, offering a versatile spectrum from grounding depths to radiant highlights. Designers can leverage its inviting nature to craft memorable visual experiences.

Best used for

  • Cultural branding and travel websites
  • Food packaging and restaurant interiors
  • Autumn-themed digital campaigns
  • Artisan craft and handmade product showcases
  • UI/UX designs for warm, inviting applications
  • Event invitations with an exotic theme

Suggested color roles

primary

#A34A2E serves as a grounding, rich base for headers or main content blocks, conveying warmth and depth.

secondary

#E66000 offers a vibrant, energetic support, perfect for subheadings or prominent call-to-action buttons.

accent

#FF9933 provides a bright, inviting pop for interactive elements, highlights, or decorative details.

background

#FFEEBB creates a soft, luminous foundation, ensuring readability and a welcoming user experience.

text

Use #A34A2E for main body text on light backgrounds for excellent readability, or a dark charcoal for general use.

Accessibility notes

  • Ensure sufficient contrast when using #FFCC66 or #FFEEBB for text on lighter backgrounds.
  • #A34A2E provides strong contrast against #FFEEBB for body text and interactive elements.
  • Avoid placing #FF9933 text directly on #E66000 backgrounds due to potential low contrast.
  • Use #E66000 or #A34A2E for larger text or headings to maintain readability on lighter tones like #FFEEBB.

Recommended combinations

Warm Sunset

Creates a vibrant, energetic gradient for headers, hero sections, or animated transitions.

#E66000 · #FF9933 · #FFCC66

Earthy Grounding

Pairs a deep primary with a light background and a vibrant accent for balanced, readable layouts.

#A34A2E · #FFEEBB · #E66000

Subtle Glow

Ideal for subtle background patterns, secondary information panels, or soft UI elements.

#FFCC66 · #FFEEBB · #FF9933

CSS variables

:root {
  --moroccan-spice-bazaar-3-1: #A34A2E;
  --moroccan-spice-bazaar-3-2: #E66000;
  --moroccan-spice-bazaar-3-3: #FF9933;
  --moroccan-spice-bazaar-3-4: #FFCC66;
  --moroccan-spice-bazaar-3-5: #FFEEBB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-spice-bazaar-3": {
        1: "#A34A2E",
        2: "#E66000",
        3: "#FF9933",
        4: "#FFCC66",
        5: "#FFEEBB",
      }
    }
  }
}

Related searches

moroccan color palettespice inspired color schemewarm earthy orange colorsexotic vibrant design paletteterracotta orange yellow hex codes

Palette colors

Hex values

Color 1#A34A2E
·
Color 2#E66000
·
Color 3#FF9933
·
Color 4#FFCC66
·
Color 5#FFEEBB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
3.9:1AA18
5.1:1AA
2
1.7:1Fail
1.6:1Fail
2.3:1Fail
3:1AA18
3
2.8:1Fail
1.6:1Fail
1.4:1Fail
1.8:1Fail
4
3.9:1AA18
2.3:1Fail
1.4:1Fail
1.3:1Fail
5
5.1:1AA
3:1AA18
1.8:1Fail
1.3:1Fail

Similar palettes

More like Moroccan Spice Bazaar

View all warm