Back to palettes

Palette

Moroccan Clay Roofs

Warm, sun-baked reds and oranges reminiscent of ancient clay roofs under the intense Moroccan sun.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#A0522D#C06B3C#E08C4A#FFB05C

Palette guide

How to use Moroccan Clay Roofs

Overview

The Moroccan Clay Roofs palette captures the essence of sun-baked architecture with its range of warm, earthy reds and oranges. Featuring tones from deep #8B4513 (SaddleBrown) to bright #FFB05C (a light orange), alongside #A0522D (Sienna) and #E08C4A (Dark Salmon), this scheme is perfect for conveying natural warmth and rustic charm. Designers and developers can use these colors to build inviting, grounded digital experiences that evoke a sense of tradition and natural beauty. The harmonious progression of shades like #C06B3C ensures visual comfort and versatility across various applications.

Best used for

  • Architecture and interior design portfolios
  • Artisan craft and handmade product websites
  • Natural and organic product branding
  • Travel and cultural heritage platforms
  • Rustic-themed digital advertising
  • Earthy, warm UI designs for apps

Suggested color roles

primary

Utilize #C06B3C as a versatile mid-tone for main content areas, providing a balanced and inviting earthy base.

secondary

Apply #E08C4A for secondary headings, buttons, or informational panels, offering a lighter, more approachable warmth.

accent

Employ #FFB05C for bright highlights, small icons, or interactive states, drawing attention with its sunny disposition.

background

Use #8B4513 (SaddleBrown) for deep, grounding backgrounds or footers, providing a strong contrast for lighter text.

text

A rich dark brown like #A0522D (Sienna) works well for primary body text, offering excellent readability. Alternatively, use white or cream on darker shades.

Accessibility notes

  • Ensure sufficient contrast between light shades like #FFB05C and text; a dark brown or charcoal is recommended.
  • Text on #8B4513 will require light colors (e.g., white or a pale orange) to meet WCAG contrast standards.
  • Avoid using adjacent colors with similar luminosity (e.g., #C06B3C and #E08C4A) for critical information if contrast is low.
  • Check contrast for all interactive elements to ensure they are distinguishable against their backgrounds.

Recommended combinations

Terracotta Gradient

Perfect for creating a natural, sun-baked gradient in backgrounds, banners, or section dividers.

#8B4513 · #A0522D · #C06B3C

Sun-Kissed Hues

Ideal for highlighting features, calls to action, or creating a vibrant, energetic visual flow.

#C06B3C · #E08C4A · #FFB05C

Rustic Depth

Excellent for defining structural elements or balancing a deep base with a bright, welcoming accent.

#A0522D · #8B4513 · #FFB05C

CSS variables

:root {
  --moroccan-clay-roofs-1: #8B4513;
  --moroccan-clay-roofs-2: #A0522D;
  --moroccan-clay-roofs-3: #C06B3C;
  --moroccan-clay-roofs-4: #E08C4A;
  --moroccan-clay-roofs-5: #FFB05C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-clay-roofs": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#C06B3C",
        4: "#E08C4A",
        5: "#FFB05C",
      }
    }
  }
}

Related searches

terracotta color paletterustic earth tones designmoroccan architecture colorswarm clay color schemenatural design palette

Palette colors

Hex values

Color 1#8B4513
·
Color 2#A0522D
·
Color 3#C06B3C
·
Color 4#E08C4A
·
Color 5#FFB05C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.7:1Fail
3.9:1AA18
2
1.3:1Fail
1.4:1Fail
2.1:1Fail
3.1:1AA18
3
1.8:1Fail
1.4:1Fail
1.5:1Fail
2.1:1Fail
4
2.7:1Fail
2.1:1Fail
1.5:1Fail
1.4:1Fail
5
3.9:1AA18
3.1:1AA18
2.1:1Fail
1.4:1Fail

Similar palettes

More like Moroccan Clay Roofs

View all earth
Burnt Siena
Rustic Terra Cotta
Terra Cotta Bloom
Terra Cotta Bloom
Adobe Sunset Glow
Aegean Faded Fresco