Palette

Moroccan Tea Garden

Rich purples and lighter lilacs, reminiscent of fragrant spices and opulent fabrics in a Moroccan tea garden.

vibrantelegant5 colors

More vibrant 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

#8B008B#9932CC#BA55D3#DDA0DD#E6E6FA

Palette guide

How to use Moroccan Tea Garden

Overview

The Moroccan Tea Garden palette offers a sophisticated blend of rich purples and lighter lilacs, reminiscent of fragrant spices and opulent fabrics. It features a deep #8B008B, a regal #9932CC, a soft #BA55D3, a delicate #DDA0DD, and a serene #E6E6FA. This collection creates an elegant and vibrant mood, perfect for designs that aim for luxury, mystery, and a touch of exotic charm. Designers and developers can leverage these jewel-like tones to craft visually stunning interfaces, sophisticated branding, and captivating digital experiences.

Best used for

Luxury fashion or jewelry brands
Spa and beauty product packaging
High-end event planning and invitations
Cultural arts and museum branding
Websites or apps with a mystical or magical theme
Interior design concepts for sophisticated, calming spaces

Suggested color roles

primary

Use #9932CC as a primary color for a regal and elegant brand presence, ideal for main headings or navigation.

secondary

Employ #BA55D3 for complementary elements, subheadings, or backgrounds, adding a softer, inviting tone.

accent

Reserve #8B008B for deep accents, important links, or shadows, providing grounding and rich visual depth.

background

The serene #E6E6FA offers a light, airy background. For a more opulent feel, #BA55D3 or #DDA0DD can be used.

text

A deep purple like #8B008B or a charcoal gray provides excellent contrast for text on lighter backgrounds like #E6E6FA. White text pairs well with #8B008B.

Accessibility notes

Ensure sufficient contrast for text on #BA55D3 and #DDA0DD; dark text is crucial for readability.
Avoid using #DDA0DD and #E6E6FA for adjacent text or small UI elements due to very low contrast.
Utilize #8B008B or #9932CC for critical text on lighter background colors to meet WCAG AA accessibility standards.
When designing, test text and interactive elements with various background colors to confirm readability for all users.

Recommended combinations

Lilac Mist

Ideal for soft gradients, background elements, or sections that need to feel light, ethereal, and calming.

#BA55D3 · #DDA0DD · #E6E6FA

Royal Contrast

Perfect for high-contrast headers, call-to-action buttons, or branding elements that convey luxury and depth.

#E6E6FA · #8B008B · #9932CC

Jewel Accents

Excellent for highlighting key features, navigation items, or creating a sense of opulence in content blocks.

#9932CC · #BA55D3 · #8B008B

CSS variables

:root {
  --moroccan-tea-garden-1: #8B008B;
  --moroccan-tea-garden-2: #9932CC;
  --moroccan-tea-garden-3: #BA55D3;
  --moroccan-tea-garden-4: #DDA0DD;
  --moroccan-tea-garden-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moroccan-tea-garden": {
        1: "#8B008B",
        2: "#9932CC",
        3: "#BA55D3",
        4: "#DDA0DD",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#8B008B

Color 2#9932CC

Color 3#BA55D3

Color 4#DDA0DD

Color 5#E6E6FA

Accessibility

Contrast checker

1.5:1Fail

2.2:1Fail

4.1:1AA18

6.9:1AA

1.5:1Fail

1.4:1Fail

2.8:1Fail

4.6:1AA

2.2:1Fail

1.4:1Fail

1.9:1Fail

3.2:1AA18

4.1:1AA18

2.8:1Fail

1.9:1Fail

1.7:1Fail

6.9:1AA

4.6:1AA

3.2:1AA18

1.7:1Fail

Similar palettes

More like Moroccan Tea Garden

View all vibrant

Cosmic Iridescent Shine

Jewel Orchid Garden

Venetian Glass Dreams

Art Deco Emerald Pool

Art Nouveau Iris

Celestial Opal Glow