Back to palettes

Palette

Moroccan Tea Garden

A vibrant and inviting blend, evoking the rich colors and warmth of a Moroccan tea garden.

warmelegant5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8C4B00#B86B00#E49300#FFC43A#3A5F48

Palette guide

How to use Moroccan Tea Garden

Overview

The Moroccan Tea Garden palette is an elegant and inviting blend, evoking the rich colors and warmth of a lush garden. It features deep #8C4B00 and #B86B00, a vibrant #E49300, a sunny #FFC43A, and a grounding #3A5F48. This unique combination of warm golds and a sophisticated green creates a luxurious and intricate mood. Designers and developers can utilize this palette to craft visually rich experiences, from sophisticated branding to engaging digital interfaces, that feel both exotic and welcoming, with a touch of natural elegance.

Best used for

  • Luxury lifestyle and travel brands
  • High-end tea or coffee product branding
  • Botanical or garden-themed e-commerce stores
  • Interior design concepts for sophisticated spaces
  • Cultural and artisanal craft websites
  • Elegant event invitations and marketing materials

Suggested color roles

primary

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

secondary

Employ #B86B00 for complementary elements, subheadings, or secondary calls to action, providing depth and richness.

accent

Reserve #3A5F48 for grounding accents, important details, or to introduce a sophisticated natural contrast.

background

A bright #FFC43A can serve as a warm, inviting background, while #8C4B00 or #3A5F48 offer luxurious dark alternatives.

text

For readability, use a dark brown like #8C4B00 or a deep charcoal on lighter colors. White text contrasts beautifully with #3A5F48.

Accessibility notes

  • Ensure sufficient contrast for text on #E49300 and #FFC43A; dark text is required for readability.
  • Avoid using #E49300 and #FFC43A for adjacent small text or icons due to potential low contrast.
  • Use #3A5F48 or #8C4B00 for critical text on light backgrounds to meet WCAG AA standards.
  • When pairing #3A5F48 with gold tones, verify that the contrast is adequate for all users, especially for small elements.

Recommended combinations

Golden Earth

Ideal for warm, inviting gradients, background textures, or sections that need to feel rich and radiant.

#E49300 · #FFC43A · #B86B00

Garden Contrast

Perfect for high-contrast headers, navigation bars, or elements where a sophisticated natural grounding is desired.

#FFC43A · #3A5F48 · #8C4B00

Luxe Accents

Excellent for highlighting key features, call-to-action buttons, or creating elegant data visualizations.

#B86B00 · #E49300 · #3A5F48

CSS variables

:root {
  --moroccan-tea-garden-2-1: #8C4B00;
  --moroccan-tea-garden-2-2: #B86B00;
  --moroccan-tea-garden-2-3: #E49300;
  --moroccan-tea-garden-2-4: #FFC43A;
  --moroccan-tea-garden-2-5: #3A5F48;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-tea-garden-2": {
        1: "#8C4B00",
        2: "#B86B00",
        3: "#E49300",
        4: "#FFC43A",
        5: "#3A5F48",
      }
    }
  }
}

Related searches

moroccan tea garden colorsexotic gold green paletteluxurious warm huesintricate garden schemeelegant spice palette

Palette colors

Hex values

Color 1#8C4B00
·
Color 2#B86B00
·
Color 3#E49300
·
Color 4#FFC43A
·
Color 5#3A5F48
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.2:1AA18
1.1:1Fail
2
1.6:1Fail
1.6:1Fail
2.6:1Fail
1.8:1Fail
3
2.7:1Fail
1.6:1Fail
1.6:1Fail
2.9:1Fail
4
4.2:1AA18
2.6:1Fail
1.6:1Fail
4.5:1AA
5
1.1:1Fail
1.8:1Fail
2.9:1Fail
4.5:1AA

Similar palettes

More like Moroccan Tea Garden

View all warm