Palette

Art Nouveau Vine

Flowing shades of blue-green capture the organic, sinuous lines of an Art Nouveau botanical design.

monochromeelegant5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F2B2B#2B5A5A#4BCDC6#BBE0E0#E1F5F5

Palette guide

How to use Art Nouveau Vine

Overview

The "Art Nouveau Vine" palette features flowing shades of blue-green, capturing the organic, sinuous lines of an Art Nouveau botanical design. This monochromatic collection is ideal for designers and developers seeking to create designs that convey elegance, natural harmony, and a serene, artistic feel. The profound dark teal #0F2B2B provides a strong anchor, while the progression through #2B5A5A, #4BCDC6, and #BBE0E0 offers versatile mid-tones and depth. The lightest shade, #E1F5F5, provides an airy, luminous highlight. This palette is perfect for eco-luxury brands, wellness websites, or digital interfaces that demand a refined, organic, and calming aesthetic.

Best used for

Eco-friendly and sustainable brands
Spa and wellness center websites
Botanical garden branding
Nature-inspired interior design
Gentle, calming app interfaces
Art Nouveau illustration projects

Suggested color roles

primary

Use #2B5A5A, a deep, rich blue-green, as a versatile base for main content areas or navigation, conveying natural elegance and calm.

secondary

Apply #4BCDC6, a vibrant, clear teal, for secondary headings, subtle patterns, or informational blocks, adding a fresh energy.

accent

Employ #0F2B2B, a profound, dark teal, for strong calls-to-action, important icons, or dramatic section separators to add gravitas and definition.

background

Select #E1F5F5, a very light, almost white aqua-green, as an airy, expansive, and clean canvas, making darker teal shades appear vibrant.

text

Choose #0F2B2B, a deep, dark teal, for body text, ensuring strong readability against lighter backgrounds and a cohesive, natural feel.

Accessibility notes

Ensure #0F2B2B text on #E1F5F5 background meets WCAG AAA contrast for body text.
Avoid using #BBE0E0 text on #4BCDC6, as the contrast will likely be too low.
The lightest color, #E1F5F5, will require dark text (e.g., #0F2B2B or black) for readability.
For critical UI elements, ensure good contrast by pairing #0F2B2B with #E1F5F5.

Recommended combinations

Monochromatic Calm

Ideal for a serene website header, with dark teal for the logo and vibrant teal for navigation links.

#E1F5F5 · #0F2B2B · #4BCDC6

Vineyard Depth

Creates elegant content cards, using the darkest teal for key details against a mid-tone background.

#2B5A5A · #BBE0E0 · #0F2B2B

Organic Flow

Suitable for a calming UI, with the light aqua as a primary background and dark teal for functional elements.

#4BCDC6 · #E1F5F5 · #2B5A5A

CSS variables

:root {
  --art-nouveau-vine-1: #0F2B2B;
  --art-nouveau-vine-2: #2B5A5A;
  --art-nouveau-vine-3: #4BCDC6;
  --art-nouveau-vine-4: #BBE0E0;
  --art-nouveau-vine-5: #E1F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-nouveau-vine": {
        1: "#0F2B2B",
        2: "#2B5A5A",
        3: "#4BCDC6",
        4: "#BBE0E0",
        5: "#E1F5F5",
      }
    }
  }
}

Hex values

Color 1#0F2B2B

Color 2#2B5A5A

Color 3#4BCDC6

Color 4#BBE0E0

Color 5#E1F5F5

Accessibility

Contrast checker

1.9:1Fail

7.7:1AAA

10.6:1AAA

13.3:1AAA

1.9:1Fail

4:1AA18

5.5:1AA

6.8:1AA

7.7:1AAA

4:1AA18

1.4:1Fail

1.7:1Fail

10.6:1AAA

5.5:1AA

1.4:1Fail

1.3:1Fail

13.3:1AAA

6.8:1AA

1.7:1Fail

1.3:1Fail

Similar palettes

More like Art Nouveau Vine

View all monochrome

Jade Empress

Jade Empress Jewel

Ancient Marble Column

Ancient Marble Statue

Ancient Marble Temple

Elegant Art Gallery