Art Nouveau Color Psychology & Meaning
Art Nouveau is nature formalized — these warm greens and golds are the colors of Mucha's posters, of iron gate flowers, of the moment design tried to be as beautiful as the natural world.
#F0EAD2
#6B8C45
#C8A030
#2A3A18
Background
Primary Accent
Secondary
Body Text
Art Nouveau
organicornateflowing springall brandingartluxury
AAA
WCAG Grade
10.1:1
Contrast Ratio
2,000
Saves
5,300
AI Copies
Use #F0EAD2 as the background. Use #6B8C45 as the primary accent. Use #C8A030 as secondary. Use #2A3A18 as body text/supporting color. Palette mood: Art Nouveau — organic, ornate, flowing.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Art Nouveau color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 82.0% | 240, 234, 210 | 0%, 3%, 13%, 6% | 48°, 50%, 88% | ||
| Primary Accent Luminance: 22.3% | 107, 140, 69 | 24%, 0%, 51%, 45% | 88°, 34%, 41% | ||
| Secondary Luminance: 37.6% | 200, 160, 48 | 0%, 20%, 76%, 22% | 44°, 61%, 49% | ||
| Body Text Luminance: 3.6% | 42, 58, 24 | 28%, 0%, 59%, 77% | 88°, 41%, 16% |
Color Harmony: Custom Scheme
The Art Nouveau palette is built using a custom relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A custom palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Art Nouveau (1890-1910) drew from japonisme, Celtic interlace, and the natural world. Alphonse Mucha's poster work defined its palette: warm ivory, botanical green, and amber gold.
Best Design Use Cases
Warm ivory for surfaces. Botanical green for primary design elements. Warm gold for accent and decorative elements. Deep green for text. Flowing, organic.
Industries This Palette Suits
Luxury brands, art institutions, jewelry, premium goods, editorial design, heritage fashion.
How to Implement the Art Nouveau Color Scheme
To use this Art Nouveau color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #F0EAD2 for the main background and #6B8C45 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #2A3A18 and #F0EAD2 is 10.14:1 (AAA). Ensure your body text remains legible.