Palette

Raven Petal Gloom

A brooding and elegant palette of deep purples and muted reds, inspired by gothic romance and the velvety darkness of night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Raven Petal Gloom 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 Petal Gloom.

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

Data visualization

#2C0B1B#5E1432#96284F#CC4B7B#1B0711

Palette guide

How to use Raven Petal Gloom

Overview

The Raven Petal Gloom palette offers a brooding yet elegant collection of deep purples and muted reds, perfect for projects requiring a touch of gothic romance and sophisticated darkness. Dominated by rich tones like #2C0B1B (a deep plum) and #5E1432 (a muted berry), it evokes a velvety, mysterious ambiance. The brighter #CC4B7B (a dusty rose) provides a delicate counterpoint, while #96284F adds a vibrant, jewel-like depth. This palette is ideal for designers looking to craft experiences that are both dramatic and refined, leveraging its inherent moodiness for impactful visual storytelling. Developers can use these hex codes to create compelling dark themes and expressive UI elements.

Best used for

Luxury brand websites and apps
Gothic or dark fantasy game aesthetics
Romantic novel covers or editorial design
Fashion and beauty product packaging
Event invitations for upscale, moody gatherings
Art portfolios with dramatic themes

Suggested color roles

primary

Use #2C0B1B as the foundational dark base for large sections or backgrounds, establishing a deep, luxurious feel.

secondary

Employ #5E1432 for secondary containers, navigation elements, or significant headings, providing depth and warmth.

accent

Apply #CC4B7B for calls-to-action, interactive elements, or key highlights to draw attention with its romantic vibrancy.

background

The darkest shade, #1B0711, works well for immersive, full-screen backgrounds where ultimate depth is desired.

text

For primary text, use a light grey or near-white like #E0E0E0 against darker backgrounds. For accents, #CC4B7B can highlight specific phrases.

Accessibility notes

Ensure sufficient contrast between #CC4B7B and darker backgrounds for readability, especially for smaller text.
Avoid using #5E1432 for small text on #2C0B1B backgrounds without careful contrast checking.
Pair #1B0711 backgrounds with very light text (e.g., pure white) to meet WCAG AA standards.
Consider larger font sizes or bolding for text using mid-tone colors like #96284F to improve legibility.

Recommended combinations

Deep Romance

Ideal for elegant headers or striking hero sections, contrasting deep plum with a vibrant rose accent.

#2C0B1B · #CC4B7B · #5E1432

Gothic Depth

Creates a mysterious and rich visual, suitable for background textures with a jewel-toned highlight.

#1B0711 · #96284F · #5E1432

Petal Highlight

Use for UI elements where a dark base supports a bright, interactive component and a deeper secondary.

#5E1432 · #CC4B7B · #2C0B1B

CSS variables

:root {
  --raven-petal-gloom-1: #2C0B1B;
  --raven-petal-gloom-2: #5E1432;
  --raven-petal-gloom-3: #96284F;
  --raven-petal-gloom-4: #CC4B7B;
  --raven-petal-gloom-5: #1B0711;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "raven-petal-gloom": {
        1: "#2C0B1B",
        2: "#5E1432",
        3: "#96284F",
        4: "#CC4B7B",
        5: "#1B0711",
      }
    }
  }
}

Hex values

Color 1#2C0B1B

Color 2#5E1432

Color 3#96284F

Color 4#CC4B7B

Color 5#1B0711

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

4.2:1AA18

1.1:1Fail

1.4:1Fail

1.7:1Fail

3:1Fail

1.5:1Fail

2.3:1Fail

1.7:1Fail

1.8:1Fail

2.5:1Fail

4.2:1AA18

3:1Fail

1.8:1Fail

4.5:1AA18

1.1:1Fail

1.5:1Fail

2.5:1Fail

4.5:1AA18

Similar palettes

More like Raven Petal Gloom