Palette

Cardamom Spice Market

A vibrant and aromatic blend of warm yellows, oranges, and earthy browns.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF8C00#DAA520#B8860B#A0522D#8B4513

Palette guide

How to use Cardamom Spice Market

Overview

The Cardamom Spice Market palette is a vibrant and aromatic blend of warm yellows, oranges, and earthy browns. Featuring a bright Dark Orange #FF8C00, goldenrod #DAA520, deep goldenrod #B8860B, rich sienna #A0522D, and a classic saddle brown #8B4513, this collection offers designers and developers an energetic and inviting aesthetic. It's ideal for projects aiming to convey warmth, vibrancy, and a connection to rich, global flavors. The harmonious blend of these spice-inspired tones provides a powerful visual foundation for engaging and memorable user experiences.

Best used for

Food and beverage branding (especially spices or ethnic cuisine)
Artisan craft markets or e-commerce sites
Cultural festival or event promotion
Packaging for gourmet food products
Travel agency websites focusing on exotic destinations
Digital illustrations with a natural, earthy feel

Suggested color roles

primary

Use #FF8C00 as a dominant color for impactful headlines, primary calls to action, or hero sections, creating a vibrant, energetic focal point.

secondary

Apply #A0522D for subheadings, detailed UI elements, or background textures, providing depth and a grounding effect.

accent

Leverage #DAA520 to draw attention to key interactive elements, alerts, or important information, offering a luminous, inviting pop.

background

Employ a light cream or off-white, or a pale version of #DAA520, for main content areas, enhancing readability.

text

For optimal readability, use #8B4513 or a deep charcoal against lighter backgrounds, and white text against #FF8C00 or #A0522D.

Accessibility notes

Ensure #8B4513 provides sufficient contrast for text when used on #DAA520 or lighter backgrounds.
Avoid using #FF8C00 text on #DAA520 backgrounds for small text due to potential low contrast.
The vibrant #FF8C00 and #DAA520 should be checked for contrast when used with white text.
Verify that interactive elements have distinct hover/focus states, especially between similar yellows and oranges.

Recommended combinations

Spice Blend

Ideal for bold headers, product categories, or strong branding elements.

#FF8C00 · #DAA520 · #A0522D

Earthy Gold

Perfect for creating grounded content blocks or narrative sections.

#8B4513 · #A0522D · #B8860B

Market Glow

Use for accentuating key features or adding a vibrant, natural highlight.

#DAA520 · #FF8C00 · #B8860B

CSS variables

:root {
  --cardamom-spice-market-1: #FF8C00;
  --cardamom-spice-market-2: #DAA520;
  --cardamom-spice-market-3: #B8860B;
  --cardamom-spice-market-4: #A0522D;
  --cardamom-spice-market-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cardamom-spice-market": {
        1: "#FF8C00",
        2: "#DAA520",
        3: "#B8860B",
        4: "#A0522D",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#FF8C00

Color 2#DAA520

Color 3#B8860B

Color 4#A0522D

Color 5#8B4513

Accessibility

Contrast checker

1:1Fail

1.4:1Fail

2.4:1Fail

3:1AA18

1:1Fail

1.5:1Fail

2.5:1Fail

3.2:1AA18

1.4:1Fail

1.5:1Fail

1.7:1Fail

2.2:1Fail

2.4:1Fail

2.5:1Fail

1.7:1Fail

1.3:1Fail

3:1AA18

3.2:1AA18

2.2:1Fail

1.3:1Fail

Similar palettes

More like Cardamom Spice Market

View all warm

Curry Tint

Bazaar Spice Alchemy

Moroccan Bazaar Spices

Moroccan Spice Market

Saffron Market Spice

Saffron Souk Spice