Palette

Grapevine Trellis Shade

Rich purples and bright lavenders evoke ripe grapes hanging from a sun-dappled trellis.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Grapevine Trellis Shade 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 Grapevine Trellis Shade.

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

Data visualization

#4D005B#6A1A7D#8C39A1#B35EC8#D884ED

Palette guide

How to use Grapevine Trellis Shade

Overview

The Grapevine Trellis Shade palette bursts with vibrant purples and lavenders, reminiscent of ripe grapes under a sun-dappled trellis. This collection transitions beautifully from the deep, rich #4D005B to the playful and bright #D884ED, offering a dynamic range for energetic and creative projects. With intermediate shades like #6A1A7D, #8C39A1, and #B35EC8, designers can craft engaging visual narratives that feel both luxurious and fun. It’s an excellent choice for designs that aim to be eye-catching and convey a sense of playful sophistication, perfect for digital interfaces, branding, or creative content.

Best used for

Vibrant digital interfaces
Creative branding for startups
Youth-oriented marketing materials
Event posters and invitations
Fashion accessories design
Playful mobile application themes

Suggested color roles

primary

Establish a strong, vibrant base with #6A1A7D for main sections or prominent branding elements.

secondary

Utilize #8C39A1 for supporting content, subheadings, or secondary interactive elements, providing a softer contrast.

accent

Employ the bright #D884ED for calls-to-action, highlights, or interactive states, ensuring maximum visibility.

background

A deep #4D005B can create a dramatic, luxurious background, allowing lighter elements to truly pop.

text

For text, use a crisp white or light grey like #F0F0F0 (not in palette) on darker purples, and #4D005B or a dark charcoal for text on the lighter shades.

Accessibility notes

Ensure high contrast when pairing #D884ED with lighter backgrounds, as its vibrancy can make it hard to read.
Darker shades like #4D005B and #6A1A7D provide excellent contrast for white or light-colored text.
Avoid using #B35EC8 as primary text on a white background without careful contrast checks.
For interactive elements, ensure distinct visual feedback for states using contrasting shades like #D884ED on #6A1A7D.

Recommended combinations

Energetic Highlight

Use #4D005B as a deep background, #D884ED for prominent CTAs, and #8C39A1 for supporting text.

#4D005B · #D884ED · #8C39A1

Playful Gradient

Ideal for lively gradients in hero sections or visual transitions, creating a sense of movement.

#6A1A7D · #8C39A1 · #B35EC8

Contrast & Balance

Combine #B35EC8 for a light section, #4D005B for dark text, and #6A1A7D for accents.

#B35EC8 · #4D005B · #6A1A7D

CSS variables

:root {
  --grapevine-trellis-shade-1: #4D005B;
  --grapevine-trellis-shade-2: #6A1A7D;
  --grapevine-trellis-shade-3: #8C39A1;
  --grapevine-trellis-shade-4: #B35EC8;
  --grapevine-trellis-shade-5: #D884ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grapevine-trellis-shade": {
        1: "#4D005B",
        2: "#6A1A7D",
        3: "#8C39A1",
        4: "#B35EC8",
        5: "#D884ED",
      }
    }
  }
}

Hex values

Color 1#4D005B

Color 2#6A1A7D

Color 3#8C39A1

Color 4#B35EC8

Color 5#D884ED

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

3.6:1AA18

5.8:1AA

1.4:1Fail

1.6:1Fail

2.6:1Fail

4.1:1AA18

2.2:1Fail

1.6:1Fail

1.7:1Fail

2.6:1Fail

3.6:1AA18

2.6:1Fail

1.7:1Fail

1.6:1Fail

5.8:1AA

4.1:1AA18

2.6:1Fail

1.6:1Fail

Similar palettes

More like Grapevine Trellis Shade

Grapevine Trellis Shade

See it in context.

Ready when you are.

Built with Grapevine Trellis Shade.

How to use Grapevine Trellis Shade

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Energetic Highlight

Playful Gradient

Contrast & Balance

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Grapevine Trellis Shade