Palette

Moroccan Souk Sun

Inspired by the rich, vibrant hues and golden sunlight found in a bustling Moroccan marketplace.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moroccan Souk Sun 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 Souk Sun.

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

Data visualization

#A34A28#E69C2C#F4C47D#5B3A29#946328

Palette guide

How to use Moroccan Souk Sun

Overview

The Moroccan Souk Sun palette is inspired by the rich, vibrant hues and golden sunlight found in a bustling Moroccan marketplace. It features deep #5B3A29, a robust #A34A28, and the energetic #E69C2C, balanced by the soft, sunny #F4C47D. With #946328 completing the set, designers and developers can craft visually rich and inviting digital experiences. This palette is excellent for conveying warmth, authenticity, and a touch of exoticism, providing versatility for both strong, grounded designs and lively, inviting accents that mimic sun-drenched landscapes.

Best used for

Travel agencies and tourism websites for desert regions
Organic food and natural product branding
Cultural festival and event promotions
Warm, inviting e-commerce interfaces
Artisanal craft and handmade goods marketing
Desert-themed digital illustrations

Suggested color roles

primary

Utilize #E69C2C as a bright, energetic orange for main calls to action and prominent headings, drawing immediate attention.

secondary

Apply #A34A28 for secondary content, subheadings, or distinct content blocks, providing a rich, warm contrast.

accent

Employ #F4C47D for soft, sunny highlights, background textures, or subtle dividers, adding a delicate glow.

background

Use #5B3A29 for deep, grounding backgrounds or footers, creating a strong, stable foundation that pairs well with light text.

text

A rich dark brown like #946328 is excellent for primary body text on light backgrounds. White or cream text should be used on darker backgrounds.

Accessibility notes

Ensure sufficient contrast for text on #F4C47D; dark text (e.g., #5B3A29 or black) is essential for readability.
Text on #5B3A29, #A34A28, or #946328 will require light colors (e.g., white or a pale cream) to meet WCAG contrast standards.
Avoid using #E69C2C on #A34A28 for small text or interactive elements due to potential low contrast.
Always test color combinations for readability, especially for users with visual impairments.

Recommended combinations

Desert Glow

Ideal for creating a gradient effect in hero sections, banners, or for strong, visually impactful content blocks.

#5B3A29 · #A34A28 · #E69C2C

Sunny Bazaar

Excellent for highlighting interactive elements, calls to action, or creating a lively, inviting visual flow.

#E69C2C · #F4C47D · #946328

Earthy Gold

Perfect for balancing deep tones with bright, golden accents, suitable for sophisticated branding or featured content.

#A34A28 · #946328 · #F4C47D

CSS variables

:root {
  --moroccan-souk-sun-1: #A34A28;
  --moroccan-souk-sun-2: #E69C2C;
  --moroccan-souk-sun-3: #F4C47D;
  --moroccan-souk-sun-4: #5B3A29;
  --moroccan-souk-sun-5: #946328;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-souk-sun": {
        1: "#A34A28",
        2: "#E69C2C",
        3: "#F4C47D",
        4: "#5B3A29",
        5: "#946328",
      }
    }
  }
}

Hex values

Color 1#A34A28

Color 2#E69C2C

Color 3#F4C47D

Color 4#5B3A29

Color 5#946328

Accessibility

Contrast checker

2.6:1Fail

3.7:1AA18

1.7:1Fail

1.1:1Fail

2.6:1Fail

1.4:1Fail

4.4:1AA18

2.2:1Fail

3.7:1AA18

1.4:1Fail

6.3:1AA

3.2:1AA18