Palette

Saffron Spice Market

Vibrant and aromatic golds inspired by the bustling colors of an exotic saffron market.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#a35a12#cc7318#f09b2e#ffc266#ffe0a3

Palette guide

How to use Saffron Spice Market

Overview

The 'Saffron Spice Market' palette evokes the rich, energetic atmosphere of an exotic bazaar, offering a vibrant array of warm, golden hues. This collection, featuring the deep amber of #a35a12, the vivid orange of #cc7318, the radiant gold of #f09b2e, the softer #ffc266, and the creamy #ffe0a3, is perfect for projects demanding warmth and vitality. Designers can leverage its inviting tones to create engaging visual experiences. Developers will find these hex codes ideal for crafting dynamic user interfaces that convey luxury and an adventurous spirit, ensuring a cohesive and visually stimulating design.

Best used for

Gourmet food branding and packaging
Cultural event promotions and websites
Autumnal marketing campaigns
Artisanal product showcases
Vibrant e-commerce platforms
Travel and hospitality branding

Suggested color roles

primary

Use #cc7318 as the main brand color for an energetic and inviting presence, capturing immediate attention.

secondary

Apply #f09b2e for supporting elements like secondary buttons or section headers, providing a radiant contrast.

accent

Employ #a35a12 for bold highlights, call-to-action buttons, or important visual cues, offering depth and impact.

background

Utilize #ffe0a3 for light, warm backgrounds that provide a gentle canvas, enhancing readability and overall warmth.

text

Pair a deep brown or charcoal with #ffe0a3 for body text to ensure strong readability, or use #a35a12 for prominent headings.

Accessibility notes

Ensure sufficient contrast between lighter colors like #ffe0a3 and darker text, such as black or #a35a12.
Avoid using #f09b2e for small text on #cc7318 backgrounds due to potential low contrast.
Verify all text elements meet WCAG contrast guidelines, especially on light backgrounds.
Use larger font sizes or bolding for text elements in mid-tone colors to improve legibility.

Recommended combinations

Golden Glow

Ideal for soft gradients, background elements, or layered illustrations seeking a luminous, warm effect.

#FFE0A3 · #FFC266 · #F09B2E

Energetic Contrast

Effective for branding with a clear primary, secondary, and light background, creating high impact and readability.

#A35A12 · #CC7318 · #FFE0A3

Rich Depth

Excellent for creating a sophisticated, spicy, and inviting visual narrative, perfect for editorial or luxury content.

#A35A12 · #F09B2E · #FFC266

CSS variables

:root {
  --saffron-spice-market-2-1: #a35a12;
  --saffron-spice-market-2-2: #cc7318;
  --saffron-spice-market-2-3: #f09b2e;
  --saffron-spice-market-2-4: #ffc266;
  --saffron-spice-market-2-5: #ffe0a3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "saffron-spice-market-2": {
        1: "#a35a12",
        2: "#cc7318",
        3: "#f09b2e",
        4: "#ffc266",
        5: "#ffe0a3",
      }
    }
  }
}

Hex values

Color 1#a35a12

Color 2#cc7318

Color 3#f09b2e

Color 4#ffc266

Color 5#ffe0a3

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

3.3:1AA18

4.1:1AA18

1.5:1Fail

1.6:1Fail

2.2:1Fail

2.7:1Fail

2.3:1Fail

1.6:1Fail

1.4:1Fail

1.7:1Fail

3.3:1AA18

2.2:1Fail

1.4:1Fail

1.2:1Fail

4.1:1AA18

2.7:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Saffron Spice Market

View all warm

Spiced Market

Bazaar Spice Bloom

Bazaar Spice Symphony

Boho Market Spice

Golden Spice Bazaar

Moroccan Spice Bazaar