Back to palettes

Palette

Moroccan Clay Tile

Rich, baked-earth tones and warm oranges inspired by traditional Moroccan clay tiles and sun-drenched architecture.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#CD853F#D2B48C#F4A460#A0522D

Palette guide

How to use Moroccan Clay Tile

Overview

The Moroccan Clay Tile palette embodies the rich, baked-earth tones and warm oranges found in traditional Moroccan architecture. Featuring deep #8B4513 (SaddleBrown), a vibrant #F4A460 (SandyBrown), and the softer #D2B48C (Tan), it offers a blend of rustic charm and inviting warmth. This palette, which also includes #CD853F (Peru) and #A0522D (Sienna), is ideal for designers and developers aiming to create grounded, authentic, and culturally inspired digital experiences. Its versatility allows for a harmonious balance between robust foundations and subtle, sun-drenched accents, perfect for evoking natural beauty.

Best used for

  • Interior design and home decor websites
  • Artisanal pottery or craft branding
  • Cultural heritage websites or apps
  • Travel agencies promoting exotic destinations
  • Rustic-themed event invitations
  • E-commerce for unique, handcrafted goods

Suggested color roles

primary

Use #CD853F (Peru) as a warm, inviting mid-tone for main content sections, providing a friendly and accessible base.

secondary

Apply #F4A460 (SandyBrown) for secondary elements like subheadings, buttons, or decorative accents, bringing a brighter, energetic touch.

accent

Employ #D2B48C (Tan) for subtle highlights, background textures, or soft dividers, adding a delicate, sun-kissed feel.

background

Utilize #8B4513 (SaddleBrown) for deep, grounding backgrounds or footers, offering a strong, stable foundation.

text

A rich dark brown like #A0522D (Sienna) is excellent for primary body text, ensuring readability. White or cream text should be used on darker backgrounds.

Accessibility notes

  • Ensure good contrast for text on #D2B48C (Tan) and #F4A460 (SandyBrown); dark brown or charcoal is recommended.
  • Text on #8B4513 (SaddleBrown) or #A0522D (Sienna) will require light colors (e.g., white or a pale cream) to be legible.
  • Avoid low-contrast pairings between similar mid-tones for critical information or interactive elements.
  • Always test color combinations for readability, especially for users with visual impairments.

Recommended combinations

Baked Earth

Ideal for establishing a robust, earthy foundation in headers, footers, or primary content blocks.

#8B4513 · #A0522D · #CD853F

Sun-Drenched

Excellent for creating a warm, inviting visual flow, highlighting interactive elements or key information.

#CD853F · #F4A460 · #D2B48C

Rustic Harmony

Perfect for balancing depth with brightness, suitable for feature sections or atmospheric illustrations.

#A0522D · #F4A460 · #8B4513

CSS variables

:root {
  --moroccan-clay-tile-1: #8B4513;
  --moroccan-clay-tile-2: #CD853F;
  --moroccan-clay-tile-3: #D2B48C;
  --moroccan-clay-tile-4: #F4A460;
  --moroccan-clay-tile-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-clay-tile": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2B48C",
        4: "#F4A460",
        5: "#A0522D",
      }
    }
  }
}

Related searches

moroccan tile colorsearthy design palettewarm rustic color schemeclay color palettetraditional moroccan colors

Palette colors

Hex values

Color 1#8B4513
·
Color 2#CD853F
·
Color 3#D2B48C
·
Color 4#F4A460
·
Color 5#A0522D
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
3.6:1AA18
3.5:1AA18
1.3:1Fail
2
2.4:1Fail
1.5:1Fail
1.5:1Fail
1.9:1Fail
3
3.6:1AA18
1.5:1Fail
1:1Fail
2.8:1Fail
4
3.5:1AA18
1.5:1Fail
1:1Fail
2.8:1Fail
5
1.3:1Fail
1.9:1Fail
2.8:1Fail
2.8:1Fail

Similar palettes

More like Moroccan Clay Tile

View all earth
Artisan Pottery Wheel
Earthen Pot Shard
Earthen Potters Wheel
Earthen Vessel Warmth
Rustic Farmhouse Clay
Sunbaked Clay Pot