Palette

Warm Spice Souk

Rich, inviting hues reminiscent of exotic spices and vibrant textiles found in an old souk.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#A52A2A#D2691E#FF7F50#B33E2B

Palette guide

How to use Warm Spice Souk

Overview

The Warm Spice Souk palette presents a rich and inviting array of earthy reds and vibrant oranges, reminiscent of exotic spices and bustling market textiles. With hues ranging from the deep #8B0000 to the lively #FF7F50, this scheme offers an energetic yet grounded foundation for designs seeking to convey cultural richness, warmth, and adventure. Developers can leverage the strong visual impact of #A52A2A and the softer tones of #D2691E to create engaging user interfaces. Designers will find this palette excellent for crafting memorable visuals, suitable for themes related to global markets, travel, or spirited community events, offering a truly captivating and immersive aesthetic.

Best used for

Cultural and travel branding
Exotic food and beverage marketing
Artisanal craft e-commerce
Festival and event promotions
Bold editorial layouts for lifestyle
Community-focused digital platforms

Suggested color roles

primary

Use #A52A2A as a dominant brand color or for impactful calls-to-action, providing a strong, inviting, and cultured presence.

secondary

Apply #D2691E for supporting content blocks, subheadings, or secondary buttons, offering a distinct, earthy warmth.

accent

Utilize #FF7F50 for highlights, interactive elements, or subtle graphic accents to add a vibrant, energetic pop and draw attention.

background

Employ #D2691E for darker background sections, or a very light cream/off-white for main backgrounds, using darker palette colors for text.

text

The darkest shade, #8B0000, is ideal for primary body text, ensuring excellent readability on lighter backgrounds like white or a very light cream.

Accessibility notes

Ensure strong contrast between #8B0000 text and light backgrounds (e.g., white) to meet WCAG AA standards.
Be cautious when using #FF7F50 for small text; it may require a very dark background or should be reserved for larger display text.
For interactive elements, clearly define hover/focus states using contrasting shades like #A52A2A to ensure usability.
Avoid using #D2691E or #B33E2B for small text on similar mid-tone backgrounds where contrast might be insufficient.

Recommended combinations

Souk Energy

Excellent for establishing a vibrant and grounded look in headers, footers, and primary content blocks.

#D2691E · #A52A2A · #8B0000

Market Glow

Ideal for drawing attention to calls-to-action, product highlights, or important announcements with intense vibrancy.

#FF7F50 · #D2691E · #A52A2A

Rich Earth

Use for robust backgrounds, accent borders, or to add gravitas and cultural richness to design elements.

#B33E2B · #8B0000 · #D2691E

CSS variables

:root {
  --warm-spice-souk-1: #8B0000;
  --warm-spice-souk-2: #A52A2A;
  --warm-spice-souk-3: #D2691E;
  --warm-spice-souk-4: #FF7F50;
  --warm-spice-souk-5: #B33E2B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-spice-souk": {
        1: "#8B0000",
        2: "#A52A2A",
        3: "#D2691E",
        4: "#FF7F50",
        5: "#B33E2B",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#A52A2A

Color 3#D2691E

Color 4#FF7F50

Color 5#B33E2B

Accessibility

Contrast checker

1.4:1Fail

2.8:1Fail

4:1AA18

1.7:1Fail

1.4:1Fail

1.9:1Fail

2.8:1Fail

1.2:1Fail

2.8:1Fail

1.9:1Fail

1.5:1Fail

1.6:1Fail

4:1AA18

2.8:1Fail

1.5:1Fail

2.3:1Fail

1.7:1Fail

1.2:1Fail

1.6:1Fail

2.3:1Fail

Similar palettes

More like Warm Spice Souk

Warm Spice Souk

See it in context.

Ready when you are.

Built with Warm Spice Souk.

How to use Warm Spice Souk

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Souk Energy

Market Glow

Rich Earth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Warm Spice Souk