Palette

Art Deco Gemstone

A bold and sophisticated palette inspired by the rich materials and geometric designs of Art Deco.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Art Deco Gemstone 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 Art Deco Gemstone.

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

Data visualization

#2C3E50#ECF0F1#34495E#95A5A6#C0392B

Palette guide

How to use Art Deco Gemstone

Overview

The Art Deco Gemstone palette is bold and sophisticated, inspired by the rich materials and geometric designs of Art Deco. Key colors include the deep slate blue #2C3E50, the crisp light grey #ECF0F1, and the dramatic rich red #C0392B. This collection is perfect for projects demanding a luxurious, vintage, and dramatic aesthetic. Developers can implement these strong contrasts for clear UI structures and impactful digital experiences. Designers will find this palette ideal for luxury product launches, high-end fashion editorials, or dramatic event branding, ensuring a polished and timeless appeal that speaks of grandeur and glamour.

Best used for

Luxury product launches
High-end fashion editorials
Dramatic event branding
Sophisticated UI design
Vintage movie posters
Upscale retail environments

Suggested color roles

primary

Establish #2C3E50 as the foundational color for strong statements, main text, or impactful graphical elements, providing a deep, elegant anchor.

secondary

Utilize #34495E for deeper supporting elements, background sections, or subtle gradients, offering a rich and versatile blue.

accent

Incorporate #C0392B for dramatic highlights, calls-to-action, or focal points, adding a vibrant and engaging pop of color.

background

Apply #ECF0F1 as the primary background color, providing a clean, modern, and sophisticated canvas that enhances readability.

text

For primary text on light backgrounds, #2C3E50 offers excellent contrast. For text on darker blues, use #ECF0F1 or white.

Accessibility notes

The contrast between #2C3E50 and #ECF0F1 is excellent, ensuring high readability for all text sizes.
The dramatic accent #C0392B works well for calls-to-action against darker blues, ensuring high visibility.
Avoid using #95A5A6 for small text on #ECF0F1, as the contrast might be insufficient for some users.
Ensure interactive elements (buttons, links) have clear visual states using contrasting colors from the palette, such as #C0392B on #2C3E50.

Recommended combinations

Bold Contrast

A light grey background with dark slate blue text and a dramatic red accent for headings or key features, offering elegance and impact.

#ECF0F1 · #2C3E50 · #C0392B

Deep Drama

Deep slate blue as a primary, rich red as a striking accent, and mid-grey for supporting elements, creating depth and drama.

#2C3E50 · #C0392B · #95A5A6

Modern Deco

Darker blue as a background, with light grey text and a rich red highlight for a sophisticated and balanced look.

#34495E · #ECF0F1 · #C0392B

CSS variables

:root {
  --art-deco-gemstone-1: #2C3E50;
  --art-deco-gemstone-2: #ECF0F1;
  --art-deco-gemstone-3: #34495E;
  --art-deco-gemstone-4: #95A5A6;
  --art-deco-gemstone-5: #C0392B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-gemstone": {
        1: "#2C3E50",
        2: "#ECF0F1",
        3: "#34495E",
        4: "#95A5A6",
        5: "#C0392B",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#ECF0F1

Color 3#34495E

Color 4#95A5A6

Color 5#C0392B

Accessibility

Contrast checker

9.6:1AAA

1.2:1Fail

4.3:1AA18

2:1Fail

9.6:1AAA

8.1:1AAA

2.2:1Fail

4.7:1AA

1.2:1Fail

8.1:1AAA

3.6:1AA18

1.7:1Fail

4.3:1AA18

2.2:1Fail

3.6:1AA18

2.1:1Fail

2:1Fail

4.7:1AA

1.7:1Fail

2.1:1Fail

Similar palettes

More like Art Deco Gemstone