Palette

Fig Anise

A bold yet sweet combination of deep fig purple and the delicate, refreshing touch of anise.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fig Anise 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 Fig Anise.

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

Data visualization

#502C4E#8A3D86#CC66CC#E2B2E2#3E223D

Palette guide

How to use Fig Anise

Overview

The Fig Anise color palette offers a captivating blend of deep, luxurious purples and soft, ethereal lilac, perfect for creating designs that are both bold and sweet. Centered around rich tones like #502C4E and the slightly darker #3E223D, it evokes the exotic essence of ripe figs. This vibrant collection is beautifully complemented by the lively #8A3D86, a mid-tone purple that adds energy, and the playful #CC66CC, an almost fuchsia accent. The delicate #E2B2E2 provides a light, refreshing counterpoint, much like a hint of anise. Designers and developers can leverage this palette to craft memorable, playful, and sophisticated visual experiences across various digital and print mediums.

Best used for

Creative brand identities (e.g., luxury sweets, artisanal products)
Fashion and beauty product packaging
Event branding and decor (e.g., weddings, galas)
Digital art and illustration
Children's book illustrations or toy design
Websites and apps with a playful, artistic vibe

Suggested color roles

primary

#502C4E - Ideal for main brand elements, large blocks of color, or key headers, establishing a deep, rich foundation.

secondary

#8A3D86 - Excellent for supporting graphics, subheadings, or interactive elements, adding vibrancy without overwhelming.

accent

#CC66CC - Use sparingly for calls to action, highlights, or small decorative details to inject playful energy and draw attention.

background

#E2B2E2 - A soft, airy base for content, providing excellent readability and a gentle, expansive feel.

text

#3E223D - A dark, readable purple that offers strong contrast against lighter backgrounds, ensuring legibility for body text and navigation.

Accessibility notes

Ensure sufficient contrast when using #CC66CC for text, especially against #E2B2E2. Consider a darker text color like #3E223D or pure black.
Text set in #3E223D on a #E2B2E2 background offers excellent readability for most users.
Avoid placing #8A3D86 text on #502C4E without significantly larger font sizes or very bold weights to maintain legibility.
For UI elements, prioritize high contrast ratios between interactive components (e.g., buttons with #CC66CC) and their backgrounds.

Recommended combinations

Deep & Vibrant

Perfect for a sophisticated brand identity, using the deep purple as primary, vibrant as secondary, and light for backgrounds.

#502C4E · #8A3D86 · #E2B2E2

Playful Accent

Effective for impactful calls to action, UI highlights, or decorative elements where the bright accent needs a strong anchor.

#3E223D · #CC66CC · #502C4E

Soft Gradient

Ideal for illustrations, gradients, or playful graphic elements where a softer transition with a pop of brightness is desired.

#8A3D86 · #E2B2E2 · #CC66CC

CSS variables

:root {
  --fig-anise-1: #502C4E;
  --fig-anise-2: #8A3D86;
  --fig-anise-3: #CC66CC;
  --fig-anise-4: #E2B2E2;
  --fig-anise-5: #3E223D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fig-anise": {
        1: "#502C4E",
        2: "#8A3D86",
        3: "#CC66CC",
        4: "#E2B2E2",
        5: "#3E223D",
      }
    }
  }
}

Hex values

Color 1#502C4E

Color 2#8A3D86

Color 3#CC66CC

Color 4#E2B2E2

Color 5#3E223D

Accessibility

Contrast checker

1.7:1Fail

3.5:1AA18

6.5:1AA

1.2:1Fail

1.7:1Fail

2.1:1Fail

3.8:1AA18

2.1:1Fail

3.5:1AA18

2.1:1Fail

1.8:1Fail

4.2:1AA18

6.5:1AA

3.8:1AA18

1.8:1Fail

7.8:1AAA

1.2:1Fail

2.1:1Fail

4.2:1AA18

7.8:1AAA

Similar palettes

More like Fig Anise

Fig Anise

See it in context.

Ready when you are.

Built with Fig Anise.

How to use Fig Anise

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep & Vibrant

Playful Accent

Soft Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Fig Anise