Back to palettes

Palette

Imperial Gemstone Array

A collection of deep, rich jewel tones, exuding the lavish and timeless beauty of precious gems.

DarkElegant5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Imperial Gemstone Array 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 Imperial Gemstone Array.

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

Data visualization

#311B92#004D40#B71C1C#FFAB00#4CAF50

Palette guide

How to use Imperial Gemstone Array

Overview

The Imperial Gemstone Array palette is a collection of deep, rich jewel tones, exuding the lavish and timeless beauty of precious gems. With commanding hues like #311B92 (amethyst) and #B71C1C (ruby), contrasted by the vibrant #FFAB00 (amber) and #004D40 (emerald), this scheme offers designers and developers an opulent foundation. It's perfect for conveying luxury, sophistication, and a sense of value. Utilize these colors to create interfaces and branding that feel exclusive, elegant, and visually striking, much like a carefully curated collection of rare jewels.

Best used for

  • High-end jewelry and luxury product branding
  • Exclusive event and gala invitations
  • Sophisticated website and app interfaces
  • Artistic installations and gallery branding
  • Fashion editorials and luxury apparel
  • Prestige corporate identity and marketing

Suggested color roles

primary

Use #311B92 as a deep, regal primary color, perfect for main navigational elements or commanding background sections.

secondary

Employ #004D40 for supportive content blocks, subheadings, or secondary graphics, adding a rich, earthy jewel tone.

accent

Apply #B71C1C and #FFAB00 as powerful accents for calls-to-action, key notifications, or vibrant highlights that demand attention.

background

A deep charcoal or black serves as an ideal background, allowing the jewel tones to truly sparkle. Alternatively, use #311B92 for a dramatic, immersive base.

text

For text on darker backgrounds, #FFAB00 or crisp white provides optimal readability and a luxurious contrast.

Accessibility notes

  • Always use #FFAB00 or white for text on #311B92, #004D40, and #B71C1C to ensure sufficient contrast.
  • Ensure all text, especially smaller fonts, meets WCAG contrast guidelines against its background color.
  • Avoid using #4CAF50 on #FFAB00 for critical information, as their combination may pose readability challenges for some users.
  • Test the palette's vibrancy and saturation for potential issues with colorblind users, ensuring critical information isn't solely color-coded.

Recommended combinations

Deep Jewels

Creates a classic opulent blend, ideal for rich backgrounds, layered graphics, or distinct content sections.

#311B92 · #004D40 · #B71C1C

Vibrant Contrast

Perfect for dynamic highlights, interactive elements, or striking visual contrasts that grab attention.

#FFAB00 · #311B92 · #4CAF50

Regal Focus

Use for attention-grabbing headings, call-out boxes, or elements that require a bold and luxurious presence.

#B71C1C · #FFAB00 · #004D40

CSS variables

:root {
  --imperial-gemstone-array-1: #311B92;
  --imperial-gemstone-array-2: #004D40;
  --imperial-gemstone-array-3: #B71C1C;
  --imperial-gemstone-array-4: #FFAB00;
  --imperial-gemstone-array-5: #4CAF50;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "imperial-gemstone-array": {
        1: "#311B92",
        2: "#004D40",
        3: "#B71C1C",
        4: "#FFAB00",
        5: "#4CAF50",
      }
    }
  }
}

Related searches

jewel tone color schemeluxury gemstone paletteopulent dark colorsrich elegant brandingvibrant dark design

Palette colors

Hex values

Color 1#311B92
·
Color 2#004D40
·
Color 3#B71C1C
·
Color 4#FFAB00
·
Color 5#4CAF50
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
6.5:1AA
4.4:1AA18
2
1.3:1Fail
1.5:1Fail
5.2:1AA
3.5:1AA18
3
1.9:1Fail
1.5:1Fail
3.5:1AA18
2.4:1Fail
4
6.5:1AA
5.2:1AA
3.5:1AA18
1.5:1Fail
5
4.4:1AA18
3.5:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Imperial Gemstone Array

View all Dark
Stained Glass Hues
Royal Gem Casket
Velvet Midnight Lounge
Velvet Theater Drape
Amethyst Star Cluster
Baroque Night Grandeur