Palette

Velvet Abyss

A dramatic and luxurious palette evoking the mystery of the deep sea or a starlit, opulent night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A2E#0F3460#533483#E94560#FFEEEE

Palette guide

How to use Velvet Abyss

Overview

The Velvet Abyss palette is a dramatic and luxurious collection evoking the mystery of the deep sea or an opulent starlit night. It masterfully blends deep, sophisticated tones like #1A1A2E (a rich dark blue-grey), #0F3460 (a profound navy), and #533483 (a regal deep purple). A vibrant, energetic accent is provided by #E94560, a striking red, perfectly balanced by the soft, near-white #FFEEEE. This palette is incredibly versatile for designers seeking to create a high-impact, elegant, and memorable visual experience, offering both depth and a captivating pop of color.

Best used for

High-end fashion and beauty brands
Dramatic website designs and landing pages
Luxury product packaging
Event branding with an opulent theme
Creative portfolios requiring a bold statement
Digital illustrations with a mysterious, rich atmosphere

Suggested color roles

primary

Use #0F3460 or #533483 as the dominant color for large sections, conveying depth and sophistication.

secondary

Employ #1A1A2E for backgrounds or secondary content blocks, providing a stable, dark foundation.

accent

The vibrant #E94560 is ideal for calls to action, highlights, or graphic elements that need to stand out with intensity.

background

A deep #1A1A2E or #0F3460 provides an excellent dark canvas, making lighter elements pop.

text

For body text, use the near-white #FFEEEE on dark backgrounds to ensure maximum readability and a clean contrast.

Accessibility notes

Ensure #FFEEEE text on #1A1A2E, #0F3460, or #533483 meets WCAG contrast standards (at least 4.5:1).
Be cautious using #E94560 for small text, especially against mid-tone backgrounds, as contrast might be insufficient.
For interactive elements, pair #E94560 with a dark background for vibrancy, or #FFEEEE for clarity.
Consider providing alternative text styles for users with visual impairments, ensuring sufficient contrast.

Recommended combinations

Starlit Drama

Excellent for main content areas, creating a sophisticated background with legible text and a hint of purple depth.

#1A1A2E · #533483 · #FFEEEE

Deep Sea Accent

Perfect for striking calls to action or hero sections where the red accent needs to command attention against a deep blue.

#0F3460 · #E94560 · #FFEEEE

Opulent Night

Use for subtle gradient backgrounds, layered graphics, or to provide depth in complex visual compositions.

#1A1A2E · #0F3460 · #533483

CSS variables

:root {
  --velvet-abyss-1: #1A1A2E;
  --velvet-abyss-2: #0F3460;
  --velvet-abyss-3: #533483;
  --velvet-abyss-4: #E94560;
  --velvet-abyss-5: #FFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-abyss": {
        1: "#1A1A2E",
        2: "#0F3460",
        3: "#533483",
        4: "#E94560",
        5: "#FFEEEE",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#0F3460

Color 3#533483

Color 4#E94560

Color 5#FFEEEE

Accessibility

Contrast checker

1.4:1Fail

1.8:1Fail

4.5:1AA18

15.2:1AAA

1.4:1Fail

1.3:1Fail

3.3:1AA18

11.1:1AAA

1.8:1Fail

1.3:1Fail

2.5:1Fail

8.6:1AAA

4.5:1AA18

3.3:1AA18

2.5:1Fail

3.4:1AA18

15.2:1AAA

11.1:1AAA

8.6:1AAA

3.4:1AA18

Similar palettes

More like Velvet Abyss

View all dark

Celestial Night Bloom

Cosmic Veil Wonder

Enchanted Forest Night

Indigo Night Sky

Midnight Bloom Shadow

Midnight Coven Veil