Palette

Saffron Market Hues

Rich and inviting colors reminiscent of exotic spices and vibrant textiles in an old market.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7AD42#D46A00#A04A00#7A3300#F7C687

Palette guide

How to use Saffron Market Hues

Overview

Saffron Market Hues is a rich and inviting color palette that captures the essence of an exotic market, filled with vibrant spices and warm textiles. The palette features the bright, inviting orange of #F7AD42 and the deeper, more intense #D46A00. It grounds these with the robust, earthy browns of #A04A00 and #7A3300, providing significant depth. A soft, creamy highlight is offered by #F7C687, which gently balances the intensity. This blend is perfect for designs that aim to convey warmth, authenticity, and a sense of adventure, making it highly suitable for cultural, culinary, or artisanal themes.

Best used for

Artisanal food product branding
Travel blogs focused on exotic destinations
Cultural heritage websites
Rustic or handmade goods e-commerce
Autumn harvest festival promotions
Interior design inspiration for warm spaces

Suggested color roles

primary

#D46A00, a deep, rich orange, ideal for prominent headlines, calls-to-action, or brand logos, conveying warmth and impact.

secondary

#F7AD42, a brighter, inviting orange, serves well for subheadings or lighter accents, adding vibrancy.

accent

#F7C687, a soft cream-orange, offers a gentle highlight for backgrounds, subtle dividers, or decorative elements.

background

#F7C687 creates a warm, soft base that allows the richer oranges and browns to stand out beautifully.

text

#7A3300 provides excellent contrast for body text on lighter backgrounds, ensuring readability, or use a dark charcoal.

Accessibility notes

Ensure #F7AD42 has sufficient contrast against #F7C687 for text; consider increasing font size or weight.
#7A3300 and #A04A00 offer strong readability for body text against light backgrounds like #F7C687.
Avoid using #D46A00 and #A04A00 together for small text due to their similar darker values.
For backgrounds like #7A3300, use very light text (e.g., off-white) to maintain accessibility.

Recommended combinations

Market Spice

Perfect for a bold header, soft background, and strong, readable body text.

#D46A00 · #F7C687 · #7A3300

Earthy Glow

Excellent for layered graphics or gradients, conveying natural depth.

#F7AD42 · #A04A00 · #D46A00

Rich Texture

Ideal for a dark, sophisticated base with light elements and vibrant accents.

#7A3300 · #F7C687 · #F7AD42

CSS variables

:root {
  --saffron-market-hues-1: #F7AD42;
  --saffron-market-hues-2: #D46A00;
  --saffron-market-hues-3: #A04A00;
  --saffron-market-hues-4: #7A3300;
  --saffron-market-hues-5: #F7C687;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "saffron-market-hues": {
        1: "#F7AD42",
        2: "#D46A00",
        3: "#A04A00",
        4: "#7A3300",
        5: "#F7C687",
      }
    }
  }
}

Hex values

Color 1#F7AD42

Color 2#D46A00

Color 3#A04A00

Color 4#7A3300

Color 5#F7C687

Accessibility

Contrast checker

1.9:1Fail

3.2:1AA18

4.8:1AA

1.2:1Fail

1.9:1Fail

1.7:1Fail

2.5:1Fail

2.3:1Fail