Back to palettes

Palette

Moroccan Spice

A warm and inviting medley of exotic spices and vibrant market colors from Marrakech.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#D2691E#DAA520#FFD700#FFA500

Palette guide

How to use Moroccan Spice

Overview

The Moroccan Spice palette is a warm and inviting medley, capturing the essence of exotic spices and vibrant market colors from Marrakech. It features a rich #8B0000, a warm #D2691E, a golden #DAA520, a brilliant #FFD700, and a sunny #FFA500. This collection creates an energetic and captivating atmosphere, making it highly versatile for design projects aiming for warmth, richness, and cultural depth. Developers and designers will find its blend of deep reds and bright golds perfect for creating memorable and engaging visual experiences.

Best used for

  • Cultural event branding and websites
  • Gourmet food and beverage packaging
  • Travel agencies promoting exotic destinations
  • Bohemian or ethnic-inspired fashion lines
  • Restaurant and cafe interior design concepts
  • Digital illustrations with a vibrant, warm aesthetic

Suggested color roles

primary

Use #D2691E as a welcoming primary color for branding and key interface elements, offering warmth and sophistication.

secondary

Employ #DAA520 for complementary sections, subheadings, or secondary calls to action, adding a touch of golden richness.

accent

Reserve #8B0000 for powerful accents, important alerts, or bold highlights, providing deep visual impact.

background

A bright #FFD700 or #FFA500 can serve as a vibrant, sunny background, while #8B0000 offers a luxurious dark alternative.

text

For optimal readability on lighter backgrounds, use a dark brown like #8B0000 or a charcoal black. White text pairs well with #8B0000.

Accessibility notes

  • Ensure sufficient contrast for text on #DAA520, #FFD700, and #FFA500; a dark text color is essential.
  • Avoid using #FFD700 and #FFA500 adjacent to each other for small elements or text due to similar luminosity.
  • Use #8B0000 for critical text on brighter backgrounds to meet WCAG AA contrast guidelines.
  • When designing, verify that color combinations are distinguishable for users with various forms of color blindness.

Recommended combinations

Golden Market

Ideal for bright, uplifting sections, headers, or decorative elements that require a radiant, sunlit feel.

#FFD700 · #DAA520 · #FFA500

Deep Earth Spice

Perfect for high-contrast content blocks, call-to-action buttons, or sections needing a rich, grounded presence.

#FFA500 · #D2691E · #8B0000

Vibrant Accents

Excellent for highlighting key features, navigation elements, or creating visually appealing data points.

#DAA520 · #8B0000 · #D2691E

CSS variables

:root {
  --moroccan-spice-1: #8B0000;
  --moroccan-spice-2: #D2691E;
  --moroccan-spice-3: #DAA520;
  --moroccan-spice-4: #FFD700;
  --moroccan-spice-5: #FFA500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-spice": {
        1: "#8B0000",
        2: "#D2691E",
        3: "#DAA520",
        4: "#FFD700",
        5: "#FFA500",
      }
    }
  }
}

Related searches

vibrant moroccan paletteexotic warm color schememarrakech market colorsenergetic spice huesgolden red brown palette

Palette colors

Hex values

Color 1#8B0000
·
Color 2#D2691E
·
Color 3#DAA520
·
Color 4#FFD700
·
Color 5#FFA500
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.8:1Fail
4.5:1AA18
7.1:1AAA
5.1:1AA
2
2.8:1Fail
1.6:1Fail
2.6:1Fail
1.8:1Fail
3
4.5:1AA18
1.6:1Fail
1.6:1Fail
1.1:1Fail
4
7.1:1AAA
2.6:1Fail
1.6:1Fail
1.4:1Fail
5
5.1:1AA
1.8:1Fail
1.1:1Fail
1.4:1Fail

Similar palettes

More like Moroccan Spice

View all vibrant