Palette

Art Nouveau Elegance

Luxurious golds and muted greens echoing the sophisticated lines of Art Nouveau designs.

elegantelegant5 colors

More elegant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B8860B#DAA520#EEE8AA#5F9EA0#2F4F4F

Palette guide

How to use Art Nouveau Elegance

Overview

The "Art Nouveau Elegance" palette echoes the sophisticated lines and organic forms of Art Nouveau designs with its luxurious golds and muted greens. This collection is ideal for designers and developers seeking to create designs that convey timeless elegance, artistic flair, and a natural, opulent feel. The shimmering golds, #B8860B and #DAA520, provide radiant focal points, while the soft cream #EEE8AA offers a gentle highlight. The deep teal #5F9EA0 and #2F4F4F establish a sophisticated, grounded base. This palette is perfect for high-end artistic branding, elegant digital interfaces, or print materials that demand a distinctive, refined, and historically inspired appearance.

Best used for

Luxury jewelry and accessory brands
High-end interior design studios
Art gallery and museum branding
Vintage fashion and textile design
Sophisticated event planning
Wellness and spa luxury services

Suggested color roles

primary

Use #5F9EA0, a calming, elegant teal, as a versatile base for main content areas or navigation, conveying artistic sophistication.

secondary

Apply #EEE8AA, a soft, muted cream, for secondary headings, background panels, or informational text, adding a delicate touch.

accent

Employ #DAA520, a vibrant, bright gold, for key calls-to-action, important icons, or decorative flourishes that demand immediate attention and lavishness.

background

Select #2F4F4F, a deep, sophisticated dark teal, as an incredibly luxurious and immersive backdrop, making the golds and cream truly gleam.

text

For text on dark backgrounds like #2F4F4F, use #DAA520 for headlines and #EEE8AA for body text, ensuring excellent readability and opulence.

Accessibility notes

Ensure #EEE8AA text on #2F4F4F background meets WCAG AA contrast for body text.
Avoid using #B8860B text on #DAA520, as the contrast will likely be too low.
The light cream #EEE8AA will require dark text (e.g., #2F4F4F or black) when used as a background.
For critical UI elements, ensure good contrast by pairing #DAA520 with #2F4F4F.

Recommended combinations

Gilded Teal

Perfect for a luxurious website header, with gold as the logo and cream for supporting text against a dark teal.

#2F4F4F · #DAA520 · #EEE8AA

Vintage Harmony

Creates elegant content cards, using the deeper gold for key details and cream for background.

#5F9EA0 · #B8860B · #EEE8AA

Refined Contrast

Ideal for a sleek call-to-action, with gold as the button, cream as the container, and dark teal for text.

#EEE8AA · #2F4F4F · #DAA520

CSS variables

:root {
  --art-nouveau-elegance-1: #B8860B;
  --art-nouveau-elegance-2: #DAA520;
  --art-nouveau-elegance-3: #EEE8AA;
  --art-nouveau-elegance-4: #5F9EA0;
  --art-nouveau-elegance-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-nouveau-elegance": {
        1: "#B8860B",
        2: "#DAA520",
        3: "#EEE8AA",
        4: "#5F9EA0",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#B8860B

Color 2#DAA520

Color 3#EEE8AA

Color 4#5F9EA0

Color 5#2F4F4F

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

1.1:1Fail

2.7:1Fail

1.5:1Fail

1.8:1Fail

1.4:1Fail

4:1AA18

2.6:1Fail

1.8:1Fail

2.4:1Fail

7.1:1AAA

1.1:1Fail

1.4:1Fail

2.4:1Fail

2.9:1Fail

2.7:1Fail

4:1AA18

7.1:1AAA

2.9:1Fail

Similar palettes

More like Art Nouveau Elegance