Back to palettes

Palette

Jewel Box Gems

A rich and opulent collection of jewel tones, reminiscent of precious stones in a velvet-lined box.

vibrantelegant5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jewel Box Gems 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 Jewel Box Gems.

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

Data visualization

#006400#2F4F4F#8B0000#4B0082#FFD700

Palette guide

How to use Jewel Box Gems

Overview

The 'Jewel Box Gems' palette offers a rich and opulent collection of deep, saturated jewel tones, reminiscent of precious stones. It features a lush Dark Green (#006400), a sophisticated Dark Slate Gray (#2F4F4F), and a powerful Dark Red (#8B0000). A regal Dark Violet (#4B0082) adds a mystical touch, while a brilliant Gold (#FFD700) provides a radiant highlight. This palette is designed for designers and developers aiming to evoke luxury, elegance, and a timeless sense of value in their projects. Its deep hues provide a sophisticated backdrop, perfect for high-end branding or elegant digital experiences.

Best used for

  • luxury brand websites
  • high-end product packaging
  • elegant event invitations
  • museum exhibit designs
  • sophisticated UI themes
  • classic interior design concepts

Suggested color roles

primary

Dark Red (#8B0000) can be used for impactful calls-to-action or significant headings, conveying power and richness.

secondary

Dark Green (#006400) is excellent for navigation, subheadings, or background elements that require depth and stability.

accent

Gold (#FFD700) serves as a luxurious accent for icons, highlights, or decorative details, adding a touch of brilliance and prestige.

background

Dark Slate Gray (#2F4F4F) or a deeper shade of #4B0082 provides a sophisticated, velvety background, allowing other jewel tones to shine.

text

For optimal readability against dark backgrounds, use Gold (#FFD700) or a crisp white. For lighter elements, a deep charcoal is suitable.

Accessibility notes

  • Ensure high contrast when using Gold (#FFD700) text on lighter backgrounds; it shines best on dark hues.
  • Dark Red (#8B0000) and Dark Violet (#4B0082) require light text (e.g., white or #FFD700) for readability.
  • Avoid using Dark Slate Gray (#2F4F4F) as text on other dark colors in this palette without sufficient contrast.
  • Always test text legibility at various sizes, especially for small print or captions.

Recommended combinations

Regal Depth

Ideal for creating a deep, luxurious backdrop for high-end branding or elegant graphical elements.

#4B0082 · #8B0000 · #006400

Golden Accent

Perfect for showcasing key information or interactive elements with a touch of brilliance against a muted base.

#2F4F4F · #FFD700 · #4B0082

Classic Opulence

Effective for creating traditional, rich layouts in presentations or print materials that demand a sense of heritage.

#006400 · #FFD700 · #8B0000

CSS variables

:root {
  --jewel-box-gems-1: #006400;
  --jewel-box-gems-2: #2F4F4F;
  --jewel-box-gems-3: #8B0000;
  --jewel-box-gems-4: #4B0082;
  --jewel-box-gems-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jewel-box-gems": {
        1: "#006400",
        2: "#2F4F4F",
        3: "#8B0000",
        4: "#4B0082",
        5: "#FFD700",
      }
    }
  }
}

Related searches

rich jewel tone paletteluxury gem colorsdark elegant color schemegold red green purpleopulent design palette

Palette colors

Hex values

Color 1#006400
·
Color 2#2F4F4F
·
Color 3#8B0000
·
Color 4#4B0082
·
Color 5#FFD700
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.3:1Fail
1.7:1Fail
5.3:1AA
2
1.2:1Fail
1.1:1Fail
1.5:1Fail
6.4:1AA
3
1.3:1Fail
1.1:1Fail
1.3:1Fail
7.1:1AAA
4
1.7:1Fail
1.5:1Fail
1.3:1Fail
9.2:1AAA
5
5.3:1AA
6.4:1AA
7.1:1AAA
9.2:1AAA

Similar palettes

More like Jewel Box Gems

View all vibrant