Palette

Moroccan Tea Ritual

A rich, aromatic blend of earthy tones and jewel-like accents, inspired by a traditional tea ceremony.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moroccan Tea Ritual 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 Tea Ritual.

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

Data visualization

#D2B48C#8B4513#B8860B#5F9EA0#A52A2A

Palette guide

How to use Moroccan Tea Ritual

Overview

The Moroccan Tea Ritual palette is a rich, aromatic blend of earthy tones and jewel-like accents, inspired by a traditional tea ceremony. It features a soft #D2B48C, a deep #8B4513, a golden #B8860B, a calming #5F9EA0, and an inviting #A52A2A. This collection evokes a natural and warm mood, perfect for designs that seek to convey tradition, comfort, and a touch of grounded elegance. Designers and developers can use these colors to create serene interfaces, authentic branding, or digital experiences that feel both rich and comforting.

Best used for

Artisanal food and beverage branding (tea, coffee, spices)
Wellness and mindfulness app interfaces
Home decor and textile e-commerce sites
Cultural heritage websites or educational materials
Blogs focusing on traditional crafts or slow living
Product packaging for natural or organic goods

Suggested color roles

primary

Use #8B4513 as a grounding primary color for strong headlines or important sections, conveying authenticity.

secondary

Employ #B8860B for complementary elements, subheadings, or accents, adding a touch of golden warmth.

accent

Reserve #A52A2A for subtle, inviting accents or calls to action, drawing attention without being overpowering.

background

The soft #D2B48C provides a natural, light background. For a deeper, calming background, use #5F9EA0.

text

A deep brown like #8B4513 provides excellent contrast for text on lighter backgrounds. White text works well on #8B4513 and #5F9EA0.

Accessibility notes

Ensure sufficient contrast for text on #D2B48C and #B8860B; dark text is essential for readability.
Avoid using #D2B48C and #B8860B for adjacent small text or icons due to potential low contrast.
Utilize #8B4513 or a dark charcoal for critical text on lighter backgrounds to meet WCAG AA standards.
When pairing #5F9EA0 with warmer tones, verify contrast for legibility, especially for small font sizes.

Recommended combinations

Earthy Comfort

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

#D2B48C · #8B4513 · #B8860B

Ritual Contrast

Perfect for high-contrast headers, call-to-action buttons, or elements that need to stand out with balanced elegance.

#D2B48C · #5F9EA0 · #A52A2A

Spice & Serenity

Excellent for highlighting key features, navigation items, or creating visually appealing data points with a unique blend.

#B8860B · #A52A2A · #5F9EA0

CSS variables

:root {
  --moroccan-tea-ritual-1: #D2B48C;
  --moroccan-tea-ritual-2: #8B4513;
  --moroccan-tea-ritual-3: #B8860B;
  --moroccan-tea-ritual-4: #5F9EA0;
  --moroccan-tea-ritual-5: #A52A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-tea-ritual": {
        1: "#D2B48C",
        2: "#8B4513",
        3: "#B8860B",
        4: "#5F9EA0",
        5: "#A52A2A",
      }
    }
  }
}

Hex values

Color 1#D2B48C

Color 2#8B4513

Color 3#B8860B

Color 4#5F9EA0

Color 5#A52A2A

Accessibility

Contrast checker

3.6:1AA18

1.7:1Fail

1.5:1Fail

3.6:1AA18

2.2:1Fail

2.3:1Fail

1:1Fail

1.7:1Fail

2.2:1Fail

1.1:1Fail

2.2:1Fail

1.5:1Fail

2.3:1Fail

1.1:1Fail

2.3:1Fail

3.6:1AA18

1:1Fail

2.2:1Fail

2.3:1Fail

Similar palettes

More like Moroccan Tea Ritual

Moroccan Tea Ritual

See it in context.

Ready when you are.

Built with Moroccan Tea Ritual.

How to use Moroccan Tea Ritual

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Earthy Comfort

Ritual Contrast

Spice & Serenity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Moroccan Tea Ritual