Palette

Bazaar Spice Bloom

A vibrant tapestry of colors and aromas from an bustling, exotic spice bazaar.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0C72C#BF5B3A#734F36#FFD700#1B6A6B

Palette guide

How to use Bazaar Spice Bloom

Overview

The Bazaar Spice Bloom palette captures a vibrant tapestry of colors and aromas from a bustling, exotic spice bazaar. Featuring bright gold #FFD700, warm terracotta #BF5B3A, and rich brown #734F36, alongside muted yellow #F0C72C and vibrant teal #1B6A6B, this collection is perfect for designers and developers seeking an energetic, warm, and exotic aesthetic. It provides a dynamic and inviting foundation for projects that aim for impactful visual communication and a sense of cultural richness. This palette is ideal for conveying vibrancy, authenticity, and lively energy, reminiscent of global marketplaces.

Best used for

Global cuisine restaurant branding and menus
Travel and cultural event promotions and websites
Artisan product packaging (e.g., tea, coffee, spices)
Vibrant digital illustrations and art
Editorial design with an international flair
Creative and energetic website themes and UI/UX

Suggested color roles

primary

Utilize the rich brown #734F36 for grounding elements, strong typography, or dominant sections, providing a stable anchor.

secondary

Apply the warm terracotta #BF5B3A for headers, important sections, or accent panels, adding depth and warmth.

accent

Employ bright gold #FFD700 and vibrant teal #1B6A6B for striking highlights, interactive elements, or unique details, drawing attention.

background

Use the muted yellow #F0C72C for a bright, inviting base, creating a welcoming and expansive backdrop.

text

Integrate the deep brown #734F36 for primary text on light backgrounds, or use white for optimal readability on darker shades.

Accessibility notes

Rich brown #734F36 and vibrant teal #1B6A6B provide excellent contrast on #F0C72C or #FFD700 for body text.
Bright gold #FFD700 and muted yellow #F0C72C require dark text (e.g., black or #734F36) for readability; check WCAG contrast.
Ensure sufficient contrast for all text elements, especially when using bright colors as backgrounds, to maintain readability.
Avoid using light text on #F0C72C or #FFD700 to prevent readability issues due to low contrast.

Recommended combinations

Earthy Contrast

Create a rich and vibrant, yet grounded, look for backgrounds and primary content areas, ideal for conveying warmth and authenticity.

#734F36 · #FFD700 · #BF5B3A

Exotic Accent

Introduce a striking and unique color combination, perfect for calls-to-action or significant visual elements in a vibrant design.

#F0C72C · #1B6A6B · #734F36

Warm Bloom

Design an inviting and energetic, sun-kissed feel for sections requiring a sophisticated visual flow or background texture.

#BF5B3A · #F0C72C · #FFD700

CSS variables

:root {
  --bazaar-spice-bloom-1: #F0C72C;
  --bazaar-spice-bloom-2: #BF5B3A;
  --bazaar-spice-bloom-3: #734F36;
  --bazaar-spice-bloom-4: #FFD700;
  --bazaar-spice-bloom-5: #1B6A6B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bazaar-spice-bloom": {
        1: "#F0C72C",
        2: "#BF5B3A",
        3: "#734F36",
        4: "#FFD700",
        5: "#1B6A6B",
      }
    }
  }
}

Hex values

Color 1#F0C72C

Color 2#BF5B3A

Color 3#734F36

Color 4#FFD700

Color 5#1B6A6B

Accessibility

Contrast checker

2.7:1Fail

4.5:1AA18

1.2:1Fail

3.9:1AA18

2.7:1Fail

1.6:1Fail

3.1:1AA18

1.4:1Fail

4.5:1AA18

1.6:1Fail

5.2:1AA

1.1:1Fail