Back to palettes

Palette

Moroccan Tile Zest

A rich and exotic blend of vibrant, sun-baked hues inspired by traditional Moroccan tiles and spices.

earthenergetic5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#cc5200#e8a70c#2f8f8f#d18a66#6b8e23

Palette guide

How to use Moroccan Tile Zest

Overview

The Moroccan Tile Zest palette is a rich and exotic blend of vibrant, sun-baked hues, directly inspired by traditional Moroccan tiles and spices. It features a fiery #cc5200, a bright #e8a70c, a refreshing #2f8f8f, a warm #d18a66, and an earthy #6b8e23. This collection creates an energetic and unique mood, perfect for designs that aim to convey vibrancy, exoticism, and grounded charm. Designers and developers can leverage these distinct colors to craft visually stimulating interfaces, authentic branding, or captivating digital experiences.

Best used for

  • Ethnic food and beverage branding
  • Travel blogs or agencies focusing on vibrant cultures
  • Bohemian or global-inspired fashion lines
  • Art and craft websites featuring intricate patterns
  • Restaurant and cafe interior design concepts
  • Digital art and illustration with a lively, earthy aesthetic

Suggested color roles

primary

Use #cc5200 as a vibrant primary color for headlines or key interactive elements, offering boldness and energy.

secondary

Employ #e8a70c for complementary sections, subheadings, or accents, adding a bright, inviting glow.

accent

Reserve #2f8f8f for refreshing accents, important links, or to introduce a sophisticated cool contrast.

background

The warm #d18a66 can serve as a soft, inviting background. For a more grounded background, use #6b8e23.

text

A deep green like #6b8e23 or a dark charcoal provides excellent contrast for text on lighter backgrounds. White text works well on #cc5200 and #2f8f8f.

Accessibility notes

  • Ensure sufficient contrast for text on #e8a70c and #d18a66; dark text is crucial for readability.
  • Avoid using #cc5200 and #e8a70c for adjacent small text or icons due to potential low contrast.
  • Utilize #2f8f8f or #6b8e23 for critical text on lighter backgrounds to meet WCAG AA standards effectively.
  • When pairing the vibrant #cc5200 with #6b8e23, ensure clear contrast for interactive elements and text.

Recommended combinations

Zesty Earth

Ideal for warm, natural gradients, background textures, or content blocks that need to feel organic and inviting.

#E8A70C · #D18A66 · #6B8E23

Tile Pop

Perfect for high-contrast headers, call-to-action buttons, or elements where a vibrant, unexpected pop is desired.

#D18A66 · #CC5200 · #2F8F8F

Spice & Mint

Excellent for highlighting key features, navigation items, or creating dynamic data visualizations with a unique blend.

#CC5200 · #2F8F8F · #E8A70C

CSS variables

:root {
  --moroccan-tile-zest-1: #cc5200;
  --moroccan-tile-zest-2: #e8a70c;
  --moroccan-tile-zest-3: #2f8f8f;
  --moroccan-tile-zest-4: #d18a66;
  --moroccan-tile-zest-5: #6b8e23;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-tile-zest": {
        1: "#cc5200",
        2: "#e8a70c",
        3: "#2f8f8f",
        4: "#d18a66",
        5: "#6b8e23",
      }
    }
  }
}

Related searches

moroccan tile zest palettevibrant earthy colorsexotic spice color schemeenergetic tile designglobal inspired hues

Palette colors

Hex values

Color 1#cc5200
·
Color 2#e8a70c
·
Color 3#2f8f8f
·
Color 4#d18a66
·
Color 5#6b8e23
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
1.1:1Fail
1.6:1Fail
1.2:1Fail
2
2.1:1Fail
1.8:1Fail
1.3:1Fail
1.8:1Fail
3
1.1:1Fail
1.8:1Fail
1.4:1Fail
1:1Fail
4
1.6:1Fail
1.3:1Fail
1.4:1Fail
1.4:1Fail
5
1.2:1Fail
1.8:1Fail
1:1Fail
1.4:1Fail

Similar palettes

More like Moroccan Tile Zest

View all earth
Bohemian Spice Market
Vibrant Souk Hues
Sunbaked Terra Firm
Volcanic Earth
Moroccan Bazaar Brights
Volcanic Ember Flow