Back to palettes

Palette

Velvet Grapevine Twilight

Deep and luxurious purples, like grapes ripening under a mysterious twilight sky.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Velvet Grapevine Twilight 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 Velvet Grapevine Twilight.

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

Data visualization

#4A2C55#673D76#865293#AD75BF#D29ED8

Palette guide

How to use Velvet Grapevine Twilight

Overview

The Velvet Grapevine Twilight palette unfolds a luxurious spectrum of purples, reminiscent of grapes ripening under a mysterious twilight sky. From the deep, grounding #4A2C55 to the rich #673D76 and the vibrant #865293, this palette offers profound depth. Lighter, ethereal tones like #AD75BF and #D29ED8 introduce a delicate, elegant touch, creating a harmonious gradient. Designers and developers can leverage these hues to craft sophisticated, high-end interfaces and branding that evoke elegance, mystery, and a touch of natural beauty, perfect for conveying a premium and refined aesthetic.

Best used for

  • Wine and spirits branding
  • Luxury fashion or beauty websites
  • Event planning and invitations
  • Art gallery digital presence
  • Elegant personal branding
  • Premium subscription service UI

Suggested color roles

primary

Use #4A2C55 as the deepest purple, ideal for main backgrounds, navigation bars, or foundational elements, establishing a luxurious tone.

secondary

Apply #673D76, a rich, velvety purple, excellent for sub-headers, card backgrounds, or interactive elements that need a strong presence.

accent

Employ #D29ED8, the lightest, ethereal purple, perfect for subtle highlights, hover states, or delicate graphic elements.

background

Utilize #865293, a mid-tone purple, suitable for content areas, offering a refined backdrop for text and imagery.

text

Consider #AD75BF for secondary text or captions on darker backgrounds. For primary text on dark, use white or light gray for optimal readability.

Accessibility notes

  • Ensure high contrast for text on backgrounds; use white or very light gray on #4A2C55, #673D76, and #865293.
  • #D29ED8 should only be used for large text or decorative elements when placed on darker purples due to its lightness.
  • Avoid pairing #AD75BF with #D29ED8 for text, as contrast will be insufficient for readability, especially for small text.
  • Verify all interactive elements meet WCAG AA contrast requirements against their surrounding backgrounds.

Recommended combinations

Twilight Depth

A strong, dark base with a delicate light accent for a sophisticated and mysterious feel in headers and key visuals.

#4A2C55 · #673D76 · #D29ED8

Grape Harvest

Mid-tone focus with a lighter accent and the deepest purple for strong headings or footers.

#865293 · #AD75BF · #4A2C55

Soft Vignette

For a gentle, layered look, using the lightest tones for content and the deeper tone for structural elements.

#673D76 · #D29ED8 · #AD75BF

CSS variables

:root {
  --velvet-grapevine-twilight-1: #4A2C55;
  --velvet-grapevine-twilight-2: #673D76;
  --velvet-grapevine-twilight-3: #865293;
  --velvet-grapevine-twilight-4: #AD75BF;
  --velvet-grapevine-twilight-5: #D29ED8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-grapevine-twilight": {
        1: "#4A2C55",
        2: "#673D76",
        3: "#865293",
        4: "#AD75BF",
        5: "#D29ED8",
      }
    }
  }
}

Related searches

luxurious purple palettevineyard inspired colorselegant twilight huesdeep plum color schemesophisticated purple ui

Palette colors

Hex values

Color 1#4A2C55
·
Color 2#673D76
·
Color 3#865293
·
Color 4#AD75BF
·
Color 5#D29ED8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
3.4:1AA18
5.4:1AA
2
1.4:1Fail
1.5:1Fail
2.4:1Fail
3.8:1AA18
3
2:1Fail
1.5:1Fail
1.7:1Fail
2.6:1Fail
4
3.4:1AA18
2.4:1Fail
1.7:1Fail
1.6:1Fail
5
5.4:1AA
3.8:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Velvet Grapevine Twilight

View all dark