Palette

Art Nouveau Dream

Inspired by the fluid lines and decorative elegance of the Art Nouveau movement with a touch of luxury.

elegantelegant5 colors

More elegant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5F9EA0#B0C4DE#FFD700#CD853F#A9A9A9

Palette guide

How to use Art Nouveau Dream

Overview

The "Art Nouveau Dream" palette is inspired by the fluid lines and decorative elegance of the Art Nouveau movement, with a touch of modern luxury. This collection is ideal for designers and developers seeking to create designs that convey sophistication, artistic flair, and a timeless, opulent feel. The calming teal #5F9EA0 and soft blue-gray #B0C4DE provide a serene yet elegant foundation. The vibrant gold #FFD700 injects radiant luxury, while the earthy brown #CD853F adds warmth and depth. The neutral #A9A9A9 offers balance. This palette is perfect for high-end artistic branding, elegant digital interfaces, or print materials that demand a distinctive and refined appearance.

Best used for

Luxury artisan jewelry brands
High-end interior design services
Art gallery and museum websites
Vintage poster design with a modern twist
Sophisticated event invitations
Fashion and beauty editorials

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 #B0C4DE, a soft, airy blue-gray, for secondary headings, subtle background textures, or informational panels, complementing the primary.

accent

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

background

Select #A9A9A9, a sophisticated medium gray, as a clean, neutral canvas that allows the richer colors and golds to truly gleam.

text

For text on #A9A9A9 or #B0C4DE, use #CD853F for warm, readable body text or #5F9EA0 for a cooler, elegant headline.

Accessibility notes

Ensure #CD853F text on #A9A9A9 background meets WCAG AA contrast for body text.
Avoid using #B0C4DE text on #5F9EA0, as the contrast will likely be too low.
The vibrant gold #FFD700 will require dark text (e.g., black or #5F9EA0) when used as a background.
For critical UI elements, ensure good contrast by pairing #FFD700 with a dark color like black or #5F9EA0.

Recommended combinations

Gilded Serenity

Perfect for a serene website header, with gold as the logo and teal for navigation links.

#A9A9A9 · #FFD700 · #5F9EA0

Artistic Depth

Creates elegant content cards, using the earthy brown for key details against a teal background.

#5F9EA0 · #CD853F · #B0C4DE

Dreamy Contrast

Ideal for a sleek call-to-action, with gold as the button, light blue-gray as the container, and teal for text.

#B0C4DE · #FFD700 · #5F9EA0

CSS variables

:root {
  --art-nouveau-dream-1: #5F9EA0;
  --art-nouveau-dream-2: #B0C4DE;
  --art-nouveau-dream-3: #FFD700;
  --art-nouveau-dream-4: #CD853F;
  --art-nouveau-dream-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-nouveau-dream": {
        1: "#5F9EA0",
        2: "#B0C4DE",
        3: "#FFD700",
        4: "#CD853F",
        5: "#A9A9A9",
      }
    }
  }
}

Hex values

Color 1#5F9EA0

Color 2#B0C4DE

Color 3#FFD700

Color 4#CD853F

Color 5#A9A9A9

Accessibility

Contrast checker

1.7:1Fail

2.2:1Fail

1:1Fail

1.3:1Fail

1.7:1Fail

1.3:1Fail

1.7:1Fail

1.3:1Fail

2.2:1Fail

1.3:1Fail

2.1:1Fail

1.7:1Fail

1:1Fail

1.7:1Fail

2.1:1Fail

1.3:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Art Nouveau Dream

Art Nouveau Dream

See it in context.

Ready when you are.

Built with Art Nouveau Dream.

How to use Art Nouveau Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Gilded Serenity

Artistic Depth

Dreamy Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Art Nouveau Dream