Palette

Royal Gemstone Array

An opulent collection of diverse jewel-toned hues, shimmering with luxury and deep richness.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F4C5C#2F2E41#501B1D#C1343B#FFD700

Palette guide

How to use Royal Gemstone Array

Overview

The Royal Gemstone Array palette offers an opulent collection of diverse jewel-toned hues, shimmering with luxury and deep richness. Featuring a sophisticated #0F4C5C and a grounding #2F2E41, it introduces a deep #501B1D, a vibrant #C1343B, and a striking #FFD700. This palette is ideal for designs requiring a sense of grandeur, vibrancy, and a unique blend of colors. Designers can leverage these hues for high-impact branding, luxurious product displays, or dynamic digital interfaces. The Royal Gemstone Array provides a versatile foundation for creating visually stunning and memorable experiences that exude elegance and a touch of the extraordinary.

Best used for

Luxury product branding and packaging
High-end fashion or jewelry marketing
Opulent event promotion materials
Creative portfolio showcasing
Editorial design with rich imagery
Web interfaces for premium services

Suggested color roles

primary

Utilize #0F4C5C as a deep, sophisticated base for backgrounds or primary brand elements.

secondary

Apply #2F2E41 for supporting content, elegant typography, or darker UI components.

accent

Introduce #FFD700 (gold) for highlights, call-to-actions, or to signify importance and luxury.

background

A deep #2F2E41 provides a strong, elegant backdrop for vibrant accents and light text.

text

White or light cream text offers excellent contrast. #FFD700 can be used for headings on dark backgrounds.

Accessibility notes

Ensure high contrast when pairing #FFD700 text with light backgrounds, or dark text on #FFD700.
Avoid using #C1343B text on #501B1D backgrounds without careful contrast checking.
Always verify that text and background color combinations meet WCAG AA standards.
Use a contrast checker to ensure all critical text elements are accessible across the palette.

Recommended combinations

Jewel Contrast

Perfect for high-impact branding, vibrant call-to-actions, or dramatic visual compositions.

#0F4C5C · #C1343B · #FFD700

Regal Depth

Ideal for creating sophisticated backgrounds, elegant patterns, or defining content sections.

#2F2E41 · #501B1D · #0F4C5C

Golden Accent

Use for luxurious headlines, important icons, or to add a touch of opulence to any design.

#FFD700 · #0F4C5C · #2F2E41

CSS variables

:root {
  --royal-gemstone-array-1: #0F4C5C;
  --royal-gemstone-array-2: #2F2E41;
  --royal-gemstone-array-3: #501B1D;
  --royal-gemstone-array-4: #C1343B;
  --royal-gemstone-array-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "royal-gemstone-array": {
        1: "#0F4C5C",
        2: "#2F2E41",
        3: "#501B1D",
        4: "#C1343B",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#0F4C5C

Color 2#2F2E41

Color 3#501B1D

Color 4#C1343B

Color 5#FFD700

Accessibility

Contrast checker

1.4:1Fail

1.5:1Fail

1.7:1Fail

6.8:1AA

1.4:1Fail

1:1Fail

2.4:1Fail

9.4:1AAA

1.5:1Fail

1:1Fail

2.5:1Fail

9.9:1AAA

1.7:1Fail

2.4:1Fail

2.5:1Fail

3.9:1AA18

6.8:1AA

9.4:1AAA

9.9:1AAA

3.9:1AA18

Similar palettes

More like Royal Gemstone Array

Art Nouveau Gilt Flower

Coronation Gemstone Gleam

Emerald Gemstone Luster