Palette

Moroccan Spice Bloom

A fiery fusion of rich reds, warm yellows, and an accent of verdant green, inspired by vibrant Moroccan markets.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A22C2A#D64545#F5A503#FCC04E#6B8B3E

Palette guide

How to use Moroccan Spice Bloom

Overview

The "Moroccan Spice Bloom" palette is a captivating blend of fiery reds, warm yellows, and a refreshing touch of olive green, reminiscent of blooming spices and vibrant landscapes. It features the deep, robust red of #A22C2A and the lively #D64545, creating a strong, passionate core. The radiant #F5A503 and the softer #FCC04E introduce a sunny, inviting warmth. A unique anchor is provided by #6B8B3E (olive green), offering a natural, earthy contrast that prevents the palette from becoming overly monochromatic. This combination is perfect for designs that aim to be energetic, organic, and visually rich.

Best used for

Organic food and beverage branding
Eco-conscious product design
Travel blogs focusing on exotic destinations
Fashion and textile patterns with a natural theme
Educational materials about nature or culture
UI/UX for apps promoting healthy living or exploration

Suggested color roles

primary

#A22C2A serves as a strong, passionate base, ideal for impactful headings, brand logos, or main navigational elements.

secondary

#F5A503 provides a vibrant, sunny complement, perfect for highlighting key information, calls to action, or interactive elements.

accent

#6B8B3E offers a unique, natural contrast, excellent for subtle details, icons, or to break up warm areas.

background

#FCC04E can be used for warm, inviting background sections, or pair with a near-white for general content.

text

Use #A22C2A or a deep charcoal for body text on light backgrounds, ensuring readability and grounding the design.

Accessibility notes

Ensure #FCC04E and #F5A503 have sufficient contrast when used for text, especially on other warm background tones.
#A22C2A and #6B8B3E provide good contrast for text on light backgrounds like a cream or very light yellow.
Avoid using #D64545 directly on #A22C2A for text due to potential low contrast, especially for small fonts.
The green #6B8B3E offers a distinct visual separation and can be used for accessible links or icons.

Recommended combinations

Fiery Earth

Creates a bold, natural contrast, perfect for striking branding or feature sections with an organic feel.

#A22C2A · #F5A503 · #6B8B3E

Warm Glow

Ideal for creating inviting gradients, soft backgrounds, or highlighting playful elements.

#F5A503 · #FCC04E · #D64545

Vibrant Contrast

Uses the lively red with the earthy green for dynamic visual interest, suitable for infographics or distinct sections.

#D64545 · #6B8B3E · #A22C2A

CSS variables

:root {
  --moroccan-spice-bloom-1: #A22C2A;
  --moroccan-spice-bloom-2: #D64545;
  --moroccan-spice-bloom-3: #F5A503;
  --moroccan-spice-bloom-4: #FCC04E;
  --moroccan-spice-bloom-5: #6B8B3E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-spice-bloom": {
        1: "#A22C2A",
        2: "#D64545",
        3: "#F5A503",
        4: "#FCC04E",
        5: "#6B8B3E",
      }
    }
  }
}

Hex values

Color 1#A22C2A

Color 2#D64545

Color 3#F5A503

Color 4#FCC04E

Color 5#6B8B3E

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

4.4:1AA18

1.8:1Fail

1.6:1Fail

2.1:1Fail

2.7:1Fail

1.1:1Fail

3.5:1AA18

2.1:1Fail

1.2:1Fail

1.9:1Fail

4.4:1AA18

2.7:1Fail

1.2:1Fail

2.4:1Fail

1.8:1Fail

1.1:1Fail

1.9:1Fail

2.4:1Fail

Similar palettes

More like Moroccan Spice Bloom

Carnival Kaleidoscope

Carnival Spice Blend