Palette

Ancient Spice Route

A vibrant, aromatic blend of hues from exotic spices, evoking distant lands and rich flavors.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ancient Spice Route 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 Ancient Spice Route.

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

Data visualization

#9E1A0C#D15C21#FFBB2F#5D737E#42281C

Palette guide

How to use Ancient Spice Route

Overview

The 'Ancient Spice Route' palette offers a vibrant, aromatic blend of hues from exotic spices, evoking distant lands and rich flavors. Featuring a fiery #9E1A0C, a golden #FFBB2F, and a grounding #42281C, this energetic and warm palette is ideal for designers and developers crafting dynamic, culturally rich, and inviting designs. It provides a striking combination of warm, inviting tones balanced by a cool blue-grey (#5D737E), perfect for conveying adventure, vibrant energy, and a sense of global heritage in various digital and physical applications, from food branding to travel promotions.

Best used for

Food and beverage branding
Travel agencies and tour operators
Cultural festivals and events
Vibrant product packaging
Textile design inspired by global markets
Restaurant and cafe interiors

Suggested color roles

primary

Utilize #D15C21 as a vibrant, warm orange for primary elements, such as calls-to-action or main content blocks, drawing immediate attention.

secondary

Apply #FFBB2F as a bright, golden yellow for supporting sections, highlights, or secondary interactive states, adding luminosity.

accent

Introduce #9E1A0C as a deep, powerful red for impactful headlines, critical alerts, or decorative elements, providing strong contrast and energy.

background

Employ #5D737E as a muted, cool blue-grey background, offering a balancing contrast to the warm spice tones.

text

For optimal legibility, use #42281C (a deep, grounding brown) for body text and headings, ensuring strong contrast against lighter backgrounds like #FFBB2F or #5D737E.

Accessibility notes

Ensure #42281C text on #FFBB2F or #5D737E backgrounds meets WCAG AA contrast standards.
#9E1A0C provides strong contrast for headings on #FFBB2F for clear readability.
Avoid low contrast pairings, such as #D15C21 on #FFBB2F for small text sizes.
Check contrast for all interactive elements to ensure clear usability and accessibility.

Recommended combinations

Fiery Spices

Creates a bold, energetic visual hierarchy suitable for prominent content blocks or vibrant hero sections.

#9E1A0C · #D15C21 · #FFBB2F

Distant Lands

Ideal for contrasting backgrounds, overlays, or elements that evoke an adventurous, global feel.

#5D737E · #42281C · #D15C21

Golden Bazaar

A vibrant and balanced trio for titles, main navigation, and supporting informational graphics.

#FFBB2F · #9E1A0C · #5D737E

CSS variables

:root {
  --ancient-spice-route-1: #9E1A0C;
  --ancient-spice-route-2: #D15C21;
  --ancient-spice-route-3: #FFBB2F;
  --ancient-spice-route-4: #5D737E;
  --ancient-spice-route-5: #42281C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-spice-route": {
        1: "#9E1A0C",
        2: "#D15C21",
        3: "#FFBB2F",
        4: "#5D737E",
        5: "#42281C",
      }
    }
  }
}

Hex values

Color 1#9E1A0C

Color 2#D15C21

Color 3#FFBB2F

Color 4#5D737E

Color 5#42281C

Accessibility

Contrast checker

2:1Fail

4.8:1AA

1.6:1Fail

1.7:1Fail

2:1Fail

2.4:1Fail

1.2:1Fail

3.4:1AA18

4.8:1AA

2.4:1Fail

2.9:1Fail

8:1AAA

1.6:1Fail

1.2:1Fail

2.9:1Fail

2.7:1Fail

1.7:1Fail

3.4:1AA18

8:1AAA

2.7:1Fail

Similar palettes

More like Ancient Spice Route

View all warm

Moroccan Spice Market

Amber Spice Blend

Bazaar Spice Bloom

Desert Spice Kettle

Moroccan Spice Bazaar

Moroccan Spice Route