Palette

Raven Wing Velvet

A rich, inky blend of dark purples and grays, like the luxurious texture of raven's wing velvet.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Raven Wing Velvet 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 Raven Wing Velvet.

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

Data visualization

#2C2C3F#4A4A5C#6E6E85#9B9BB2#1F1F2B

Palette guide

How to use Raven Wing Velvet

Overview

The Raven Wing Velvet palette offers a sophisticated blend of deep, inky purples and muted grays, creating an ambiance of mysterious elegance. Shades like #2C2C3F and #1F1F2B provide a rich, dark foundation, reminiscent of luxurious velvet. The palette gradually lightens through #4A4A5C and #6E6E85 to a soft #9B9BB2, allowing for nuanced depth and subtle hierarchy. This collection is perfect for designers and developers looking to evoke a sense of refined mystery, gothic charm, or understated luxury. Its cool undertones make it versatile for both digital interfaces and print materials that require a distinguished, elegant feel.

Best used for

Luxury product websites and branding
Gothic-inspired fashion or interior design
Elegant event invitations or stationery
Sophisticated user interfaces for creative applications
Photography portfolios with a moody aesthetic
Art gallery websites or exhibition materials

Suggested color roles

primary

Use #1F1F2B as the deep, grounding base for backgrounds or large sections, setting a mysterious tone.

secondary

Employ #2C2C3F for secondary elements like navigation or card backgrounds, offering a subtle shift from the primary dark.

accent

Apply #6E6E85 for subtle accents, interactive states, or to highlight secondary information without being overly vibrant.

background

The darkest tone, #1F1F2B, provides an immersive, elegant background for any application.

text

For main text, a light grey like #E0E0E0 or #FFFFFF will provide excellent contrast. For secondary text or labels, #9B9BB2 can be used against darker shades.

Accessibility notes

Ensure sufficient contrast between the lighter shades like #9B9BB2 and darker backgrounds for readability, especially for body text.
Avoid using #4A4A5C on #2C2C3F backgrounds for small text, as the contrast might be insufficient.
Pair the darkest tones (#1F1F2B, #2C2C3F) with bright white or very light gray text for optimal WCAG AA compliance.
Consider increasing font size or weight for text set in mid-range colors like #6E6E85 to improve legibility.

Recommended combinations

Velvet Depth

Creates a rich, layered background with a subtle highlight, ideal for sophisticated dashboards or landing pages.

#1F1F2B · #6E6E85 · #2C2C3F

Elegant Contrast

Perfect for UI elements where a dark base supports a clear, readable light accent and a supportive mid-tone.

#2C2C3F · #9B9BB2 · #4A4A5C

Subtle Gradient

Useful for creating gentle visual transitions or highlighting sections within a darker layout.

#4A4A5C · #6E6E85 · #9B9BB2

CSS variables

:root {
  --raven-wing-velvet-1: #2C2C3F;
  --raven-wing-velvet-2: #4A4A5C;
  --raven-wing-velvet-3: #6E6E85;
  --raven-wing-velvet-4: #9B9BB2;
  --raven-wing-velvet-5: #1F1F2B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "raven-wing-velvet": {
        1: "#2C2C3F",
        2: "#4A4A5C",
        3: "#6E6E85",
        4: "#9B9BB2",
        5: "#1F1F2B",
      }
    }
  }
}

Hex values

Color 1#2C2C3F

Color 2#4A4A5C

Color 3#6E6E85

Color 4#9B9BB2

Color 5#1F1F2B

Accessibility

Contrast checker

1.6:1Fail

2.7:1Fail

5:1AA

1.2:1Fail

1.6:1Fail

1.7:1Fail

3.2:1AA18

1.9:1Fail

2.7:1Fail

1.7:1Fail

1.8:1Fail

3.3:1AA18

5:1AA

3.2:1AA18

1.8:1Fail

6:1AA

1.2:1Fail

1.9:1Fail

3.3:1AA18

6:1AA

Similar palettes

More like Raven Wing Velvet

View all dark

Cathedral Stained Glass