Moroccan Spice Color Psychology & Meaning
Moroccan spice is the palette of a Marrakech souk at midday — deep reds, warm oranges, and gold that come from centuries of dye trade, spice markets, and zellige tilework.
#1A0A00
#C85A00
#8B1A00
#F0C870
Background
Primary Accent
Secondary
Body Text
Moroccan Spice
warmexoticvibrant autumnsummer brandingtravelinterior
AAA
WCAG Grade
12.1:1
Contrast Ratio
2,200
Saves
5,900
AI Copies
Use #1A0A00 as the background. Use #C85A00 as the primary accent. Use #8B1A00 as secondary. Use #F0C870 as body text/supporting color. Palette mood: Moroccan Spice — warm, exotic, vibrant.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Moroccan Spice color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 0.4% | 26, 10, 0 | 0%, 62%, 100%, 90% | 23°, 100%, 5% | ||
| Primary Accent Luminance: 19.6% | 200, 90, 0 | 0%, 55%, 100%, 22% | 27°, 100%, 39% | ||
| Secondary Luminance: 6.2% | 139, 26, 0 | 0%, 81%, 100%, 45% | 11°, 100%, 27% | ||
| Body Text Luminance: 61.0% | 240, 200, 112 | 0%, 17%, 53%, 6% | 41°, 81%, 69% |
Color Harmony: Analogous Scheme
The Moroccan Spice palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Moroccan visual aesthetics draw from Berber, Arab, Andalusian, and sub-Saharan African influences. The warm red-orange-gold palette appears in zellige tiles, leather goods, and textile traditions.
Best Design Use Cases
Near-black for backgrounds. Deep warm red for primary surfaces. Orange for accent and interactive elements. Gold for highlights and decorative details.
Industries This Palette Suits
Moroccan brands, global travel, Middle Eastern products, spice brands, cultural institutions.
How to Implement the Moroccan Spice Color Scheme
To use this Moroccan Spice color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #1A0A00 for the main background and #C85A00 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #F0C870 and #1A0A00 is 12.14:1 (AAA). Ensure your body text remains legible.