Palette

Porphyry Splendor

Rich, deep purples and reds that mirror the grand, variegated beauty of porphyry stone in ancient architecture.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Porphyry Splendor 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 Porphyry Splendor.

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

Data visualization

#722E4D#A34C7A#D477AD#E9AFCB#5B243E

Palette guide

How to use Porphyry Splendor

Overview

The Porphyry Splendor palette is a rich and regal collection of deep purples and reds, inspired by the grand, variegated beauty of porphyry stone found in ancient architecture. This powerful scheme features the intense #722E4D, the elegant #A34C7A, the vibrant #D477AD, and the deep, grounding #5B243E. Designers can leverage these opulent hues to create luxurious, sophisticated, and impactful aesthetics. Developers will find them excellent for crafting bold user interfaces, dramatic backgrounds, or premium branding elements, ensuring a memorable and authoritative digital presence that exudes prestige and elegance.

Best used for

Luxury brand identity and websites
High-end fashion and jewelry marketing
Art and cultural institution digital presence
Formal event invitations and branding
Editorial design for upscale publications
Architectural and interior design portfolios

Suggested color roles

primary

#5B243E - A deep, rich burgundy, ideal for main backgrounds, footers, or large content blocks, providing a strong, luxurious foundation.

secondary

#722E4D - A slightly lighter, intense purple-red, excellent for secondary content areas, card backgrounds, or section dividers, adding depth.

accent

#D477AD - A vibrant, medium-light magenta, perfect for calls-to-action, interactive elements, or key highlights that need to stand out with elegance.

background

#5B243E or #722E4D - Both offer deep, rich backdrops. For a lighter, more ethereal background, consider #E9AFCB with dark text.

text

For dark backgrounds like #5B243E or #722E4D, crisp white or a very light cream text is essential for readability. For lighter shades like #E9AFCB, a dark purple or black text is recommended.

Accessibility notes

Crucial to ensure high contrast for text on dark backgrounds like #5B243E and #722E4D (use white or very light text).
The lighter shades (#D477AD, #E9AFCB) will require darker text for readability; always check contrast ratios against WCAG AA standards.
Avoid using similar dark tones for interactive elements without clear hover/focus states to ensure discoverability.
Utilize sufficient line height and font size for legibility, especially with rich, saturated background colors.

Recommended combinations

Royal Depths

Creates a powerful, luxurious blend, perfect for sophisticated branding or bold headers.

#5B243E · #722E4D · #D477AD

Elegant Stone

Provides a harmonious gradient, suitable for layered backgrounds or distinct content sections.

#722E4D · #A34C7A · #E9AFCB

Regal Highlight

A balanced trio for impactful designs, using the vibrant magenta for key call-outs.

#5B243E · #A34C7A · #D477AD

CSS variables

:root {
  --porphyry-splendor-1: #722E4D;
  --porphyry-splendor-2: #A34C7A;
  --porphyry-splendor-3: #D477AD;
  --porphyry-splendor-4: #E9AFCB;
  --porphyry-splendor-5: #5B243E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "porphyry-splendor": {
        1: "#722E4D",
        2: "#A34C7A",
        3: "#D477AD",
        4: "#E9AFCB",
        5: "#5B243E",
      }
    }
  }
}

Hex values

Color 1#722E4D

Color 2#A34C7A

Color 3#D477AD

Color 4#E9AFCB

Color 5#5B243E

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

5.2:1AA

1.3:1Fail

1.7:1Fail

1.8:1Fail

3:1Fail

2.2:1Fail

3.2:1AA18

1.8:1Fail

1.6:1Fail

4:1AA18

5.2:1AA

3:1Fail

1.6:1Fail

6.5:1AA

1.3:1Fail

2.2:1Fail

4:1AA18

6.5:1AA

Similar palettes

More like Porphyry Splendor

View all vibrant

Baroque Jewel Box

Gilded Baroque Palace

Grapevine Harvest Gala

Opulent Velvet Drapes

Orchid Symphony

Regal Jewel Box