Palette

Moroccan Bazaar Brights

A dazzling array of jewel tones and spiced colors, evoking the sensory richness of a vibrant Moroccan marketplace.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moroccan Bazaar Brights 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 Moroccan Bazaar Brights.

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

Data visualization

#8B0000#FF4500#FFD700#008080#4682B4

Palette guide

How to use Moroccan Bazaar Brights

Overview

The Moroccan Bazaar Brights palette is a dazzling array of jewel tones and spiced colors, designed to evoke the sensory richness of a vibrant Moroccan marketplace. Featuring deep red #8B0000 and fiery orange #FF4500, it exudes warmth and energy. The brilliant gold #FFD700 offers a luxurious highlight, while the contrasting teal #008080 and steel blue #4682B4 add exotic depth. This palette is perfect for designers and developers aiming to create energetic, culturally rich, and visually impactful experiences that capture attention and convey a sense of adventure and festivity.

Best used for

Cultural event branding
Travel agency promotions
Exotic food and restaurant branding
Bold fashion statements and accessories
Vibrant website headers and landing pages
Festival and entertainment marketing

Suggested color roles

primary

Use #FF4500 as a bold, energetic focal point for call-to-actions, hero sections, or key interactive elements.

secondary

Apply #FFD700 as a bright, complementary highlight for important details, icons, or decorative flourishes.

accent

Utilize #008080 as a rich, contrasting jewel tone for visual depth, borders, or secondary branding elements.

background

Employ #8B0000 as a deep, dramatic base for sections, or pair with a neutral dark grey/black for primary content areas.

text

Use white or #FFD700 for headings on dark backgrounds. For light backgrounds, use dark grey or black for readability.

Accessibility notes

Ensure high contrast between text and background. White text on #8B0000, #008080, or #4682B4 will generally be accessible.
Avoid using #FF4500 or #FFD700 for text on very light backgrounds as they might lack sufficient contrast.
When pairing brights like #FFD700 with darks, ensure the text size is adequate for legibility, especially for body copy.
Be mindful of color blindness when using red (#8B0000) and green (#008080) together for important, differentiating information.

Recommended combinations

Spice Market

Energetic branding for food products or cultural events, conveying warmth, excitement, and authenticity.

#8B0000 · #FF4500 · #FFD700

Jewel Tones

Sophisticated accent elements in UI, like icons or borders, with #FFD700 as a vibrant pop of color.

#008080 · #4682B4 · #FFD700

Bazaar Burst

Bold website headers or promotional graphics, using the deep red as a strong background and brights for calls to action.

#8B0000 · #FF4500 · #4682B4

CSS variables

:root {
  --moroccan-bazaar-brights-1: #8B0000;
  --moroccan-bazaar-brights-2: #FF4500;
  --moroccan-bazaar-brights-3: #FFD700;
  --moroccan-bazaar-brights-4: #008080;
  --moroccan-bazaar-brights-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-bazaar-brights": {
        1: "#8B0000",
        2: "#FF4500",
        3: "#FFD700",
        4: "#008080",
        5: "#4682B4",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#FF4500

Color 3#FFD700

Color 4#008080

Color 5#4682B4

Accessibility

Contrast checker

2.9:1Fail

7.1:1AAA

2.1:1Fail

2.4:1Fail

2.9:1Fail

2.5:1Fail

1.4:1Fail

1.2:1Fail

7.1:1AAA

2.5:1Fail

3.4:1AA18

2.9:1Fail

2.1:1Fail

1.4:1Fail

3.4:1AA18

1.2:1Fail

2.4:1Fail

1.2:1Fail

2.9:1Fail

1.2:1Fail

Similar palettes

More like Moroccan Bazaar Brights

Moroccan Bazaar Brights

See it in context.

Ready when you are.

Built with Moroccan Bazaar Brights.

How to use Moroccan Bazaar Brights

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Spice Market

Jewel Tones

Bazaar Burst

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Moroccan Bazaar Brights