Palette

Moroccan Spice Market

A rich, exotic blend of warm tones, echoing the aromatic spices and vibrant atmosphere of a Moroccan market.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B45F06#FF8C00#FFB90F#FFDAB9#8B4513

Palette guide

How to use Moroccan Spice Market

Overview

The "Moroccan Spice Market" palette is a rich, inviting collection of warm oranges and yellows, capturing the golden hour glow and aromatic depth of a bustling bazaar. It features the deep, robust orange of #B45F06 (dark orange-brown) and the vibrant #FF8C00 (dark orange). The sunny #FFB90F (golden yellow) and the soft #FFDAB9 (peach puff) provide luminous highlights and gentle bases. The grounding #8B4513 (saddle brown) ties the palette together with an earthy, traditional touch. This palette is perfect for designers seeking to evoke warmth, authenticity, and a sense of inviting richness in their projects.

Best used for

Traditional food and beverage branding
Cozy cafe or restaurant interiors
Autumn and harvest festival themes
E-commerce for artisanal goods
Lifestyle blogs with a warm, inviting aesthetic
UI/UX for applications prioritizing comfort and tradition

Suggested color roles

primary

#B45F06 serves as a deep, rich foundation, ideal for main headings, brand accents, or sturdy content containers.

secondary

#FF8C00 provides a vibrant, energetic support, perfect for subheadings, prominent buttons, or graphical highlights.

accent

#FFB90F delivers a bright, optimistic pop, drawing attention to interactive elements or subtle decorative details.

background

#FFDAB9 creates a soft, luminous base, ensuring readability and a welcoming user experience.

text

Use #8B4513 or #B45F06 for body text on light backgrounds, offering excellent readability and a natural feel.

Accessibility notes

Ensure #FFB90F and #FFDAB9 have sufficient contrast when used for text against other light background tones.
#B45F06 and #8B4513 provide strong readability for text on white or very light cream backgrounds.
Avoid placing #FF8C00 text directly on #B45F06 backgrounds due to potential low contrast.
Consider using a darker text color like #8B4513 for small text on any of the lighter orange or yellow tones.

Recommended combinations

Golden Harvest

Creates a luminous, inviting gradient, perfect for hero sections or elements needing a soft, warm glow.

#FF8C00 · #FFB90F · #FFDAB9

Earthy Depth

Offers a grounded and rich combination, suitable for robust content blocks or traditional branding.

#B45F06 · #8B4513 · #FF8C00

Bright Accent

Uses a bright yellow as an accent against deeper tones and a light background for clear visual hierarchy.

#FFB90F · #B45F06 · #FFDAB9

CSS variables

:root {
  --moroccan-spice-market-3-1: #B45F06;
  --moroccan-spice-market-3-2: #FF8C00;
  --moroccan-spice-market-3-3: #FFB90F;
  --moroccan-spice-market-3-4: #FFDAB9;
  --moroccan-spice-market-3-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-spice-market-3": {
        1: "#B45F06",
        2: "#FF8C00",
        3: "#FFB90F",
        4: "#FFDAB9",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#B45F06

Color 2#FF8C00

Color 3#FFB90F

Color 4#FFDAB9

Color 5#8B4513

Accessibility

Contrast checker

2:1Fail

2.7:1Fail

3.5:1AA18

1.5:1Fail

2:1Fail

1.4:1Fail

1.8:1Fail

3:1AA18

2.7:1Fail

1.4:1Fail

1.3:1Fail

4.1:1AA18

3.5:1AA18

1.8:1Fail

1.3:1Fail

5.4:1AA

1.5:1Fail

3:1AA18

4.1:1AA18

5.4:1AA

Similar palettes

More like Moroccan Spice Market