Palette

Spice Road

Journey through warm browns, burnt oranges, and golden yellows, reminiscent of vibrant spice markets.

WarmEnergetic5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#D2691E#FF8C00#FFD700#F0E68C

Palette guide

How to use Spice Road

Overview

The Spice Road palette invites a journey through warm browns, burnt oranges, and golden yellows, reminiscent of vibrant spice markets and sun-drenched desert landscapes. This energetic and exotic collection features a deep saddle brown #8B4513, a rich chocolate orange #D2691E, a bold dark orange #FF8C00, a dazzling pure gold #FFD700, and a soft pale gold #F0E68C. It's an exceptional choice for designers aiming to convey warmth, adventure, and exotic luxury in their projects. Developers can leverage these distinct and harmonious hues to craft visually rich and engaging user interfaces, ensuring a consistent aesthetic that evokes both vibrancy and a sense of ancient tradition.

Best used for

Travel and adventure brand identities
Exotic food and beverage product marketing
Desert-themed digital art or game design
E-commerce sites for artisanal goods from global markets
Cultural event branding or festival promotions
User interfaces requiring a rich, warm, and adventurous feel

Suggested color roles

primary

Utilize #8B4513 (Saddle Brown) for foundational elements, strong headings, or dominant brand features to establish a deep, grounding anchor.

secondary

Apply #D2691E (Chocolate Orange) or #FF8C00 (Dark Orange) as supportive colors for subheadings, key content blocks, or secondary call-to-action buttons, adding warmth and vibrancy.

accent

Introduce #FFD700 (Pure Gold) for high-impact accents, interactive elements, or premium features, providing a brilliant, luxurious focal point.

background

Employ #F0E68C (Pale Gold) as a light, warm background color, offering an inviting canvas that enhances readability and allows other colors to shine.

text

For main body text, a dark, highly legible color like #8B4513 or a standard charcoal/black works best on light backgrounds such as #F0E68C for optimal readability.

Accessibility notes

Ensure sufficient contrast for text, especially when using #FFD700 on lighter backgrounds. Black or #8B4513 text on #F0E68C is highly recommended.
Be mindful of contrast between #F0E68C and #FFD700 if used for text or small elements; they might be too similar for some users.
When using #FFD700 for interactive elements, ensure distinct focus and hover states are clear and meet accessibility guidelines.
For elements that convey information, avoid relying solely on the gold hue; pair with icons or text for clarity.

Recommended combinations

Desert Foundation

A strong, exotic combination for primary branding, balancing deep brown with rich orange and a soft, luminous background.

#8B4513 · #D2691E · #F0E68C

Golden Oasis

Ideal for creating captivating visual sections or highlights, capturing the radiant, inviting feel of precious spices and gold.

#D2691E · #FF8C00 · #FFD700

Spice Route Glow

Use for premium content, call-to-actions, or decorative elements where the pure gold stands out dramatically against deep brown and a soft pale gold.

#8B4513 · #FFD700 · #F0E68C

CSS variables

:root {
  --spice-road-1: #8B4513;
  --spice-road-2: #D2691E;
  --spice-road-3: #FF8C00;
  --spice-road-4: #FFD700;
  --spice-road-5: #F0E68C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spice-road": {
        1: "#8B4513",
        2: "#D2691E",
        3: "#FF8C00",
        4: "#FFD700",
        5: "#F0E68C",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#D2691E

Color 3#FF8C00

Color 4#FFD700

Color 5#F0E68C

Accessibility

Contrast checker

2:1Fail

3:1AA18

5.1:1AA

5.5:1AA

2:1Fail

1.6:1Fail

2.6:1Fail

2.8:1Fail

3:1AA18

1.6:1Fail

1.7:1Fail

1.8:1Fail

5.1:1AA

2.6:1Fail

1.7:1Fail

1.1:1Fail

5.5:1AA

2.8:1Fail

1.8:1Fail

1.1:1Fail

Similar palettes

More like Spice Road