Palette

Art Nouveau Iris

Rich purples and mauves inspired by the graceful curves and floral motifs of the Art Nouveau era.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Art Nouveau Iris 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 Art Nouveau Iris.

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

Data visualization

#6A0572#8F3B96#C66DC9#E3B0E5#3C033F

Palette guide

How to use Art Nouveau Iris

Overview

The "Art Nouveau Iris" palette features rich purples and mauves, inspired by the graceful curves and floral motifs of the Art Nouveau era. This vibrant collection is ideal for designers and developers seeking to create designs that convey artistic elegance, luxury, and a distinctive, feminine charm. The profound dark purple #3C033F provides a dramatic anchor, while the progression through #6A0572, #8F3B96, and #C66DC9 offers versatile mid-tones and depth. The lightest shade, #E3B0E5, provides a delicate, ethereal highlight. This palette is perfect for high-end beauty brands, floral design, or digital interfaces that demand a refined, artistic, and visually captivating appearance.

Best used for

Luxury cosmetics and skincare branding
High-end floral event design
Feminine fashion and accessory e-commerce
Artistic book covers and illustrations
Spa and wellness luxury services
Sophisticated wedding stationery

Suggested color roles

primary

Use #6A0572, a deep, rich purple, as a commanding base for main content areas or navigation, conveying luxury and creativity.

secondary

Apply #8F3B96, a vibrant medium purple, for secondary headings, background patterns, or informational blocks, adding energy and depth.

accent

Employ #E3B0E5, a delicate, ethereal mauve, for calls-to-action, important icons, or decorative flourishes that stand out with a soft, luminous quality.

background

Select #3C033F, a profound, almost black, dark purple, as an incredibly luxurious and immersive backdrop, making lighter purples truly shine.

text

For text on dark backgrounds like #3C033F or #6A0572, use #E3B0E5 for headlines and #C66DC9 for body text, ensuring excellent readability and elegance.

Accessibility notes

Ensure #E3B0E5 text on #3C033F background meets WCAG AA contrast for body text.
Avoid using #C66DC9 text on #8F3B96, as the contrast will likely be too low.
The lightest color, #E3B0E5, will require dark text (e.g., #3C033F or black) when used as a background.
For critical UI elements, ensure good contrast by pairing #E3B0E5 with #6A0572.

Recommended combinations

Iris Bloom

Perfect for a dramatic website hero section, with the lightest mauve for the main headline and deep purple for supporting text.

#3C033F · #E3B0E5 · #6A0572

Layered Purples

Creates elegant content cards or product showcases, using the lighter purple for key details.

#6A0572 · #8F3B96 · #C66DC9

Floral Contrast

Ideal for a sleek navigation bar, with the darkest purple for active states and the lightest mauve for icons.

#C66DC9 · #3C033F · #E3B0E5

CSS variables

:root {
  --art-nouveau-iris-1: #6A0572;
  --art-nouveau-iris-2: #8F3B96;
  --art-nouveau-iris-3: #C66DC9;
  --art-nouveau-iris-4: #E3B0E5;
  --art-nouveau-iris-5: #3C033F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-nouveau-iris": {
        1: "#6A0572",
        2: "#8F3B96",
        3: "#C66DC9",
        4: "#E3B0E5",
        5: "#3C033F",
      }
    }
  }
}

Hex values

Color 1#6A0572

Color 2#8F3B96

Color 3#C66DC9

Color 4#E3B0E5

Color 5#3C033F

Accessibility

Contrast checker

1.7:1Fail

3.4:1AA18

6.2:1AA

1.5:1Fail

1.7:1Fail

2:1Fail

3.6:1AA18

2.5:1Fail

3.4:1AA18

2:1Fail

1.8:1Fail

5:1AA

6.2:1AA

3.6:1AA18

1.8:1Fail

9.1:1AAA

1.5:1Fail

2.5:1Fail

5:1AA

9.1:1AAA

Similar palettes

More like Art Nouveau Iris

View all vibrant

Opulent Velvet Drapes

Art Nouveau Gilt Flower

Cosmic Iridescent Shine

Dusk Orchid

Flapper Era Glam

Gilded Age Opulence