Palette

Art Deco Sapphire Gleam

Sophisticated dark teal and bronze tones reflect the opulent geometry and elegance of the Art Deco era.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#8B4513#DAA520#B8860B#A9A9A9

Palette guide

How to use Art Deco Sapphire Gleam

Overview

The "Art Deco Sapphire Gleam" palette combines sophisticated dark teal and rich bronze tones with luxurious golds and elegant gray, reflecting the opulent geometry and elegance of the Art Deco era. This collection is ideal for designers and developers seeking to create designs that convey history, luxury, and a distinctive, rich aesthetic. The deep teal #2F4F4F provides a unique, sophisticated base, while the warm bronze #8B4513 and shimmering golds #DAA520 and #B8860B inject a sense of glamour. The refined #A9A9A9 offers a neutral balance. This palette is perfect for high-end branding, vintage-inspired digital interfaces, or print materials that demand a distinguished and artistic appearance.

Best used for

Luxury interior design firms
Vintage boutique hotels
High-end antique dealer websites
Historical museum exhibits
Artisan craft product packaging
Sophisticated event decor

Suggested color roles

primary

Use #2F4F4F, a deep, sophisticated dark teal, as a commanding base for main content areas or navigation, conveying elegance and depth.

secondary

Apply #8B4513, a rich, warm bronze brown, for subheadings, background patterns, or informational blocks, adding a vintage feel.

accent

Employ #DAA520, a vibrant, bright gold, for key calls-to-action, important icons, or decorative flourishes that demand immediate attention and lavishness.

background

Select #A9A9A9, a sophisticated medium gray, as a clean, neutral canvas that allows the richer colors and golds to truly gleam.

text

For text on #A9A9A9, use #2F4F4F for body text and #8B4513 for headlines, ensuring excellent readability and a cohesive, elegant feel.

Accessibility notes

Ensure #2F4F4F text on #A9A9A9 background meets WCAG AA contrast for body text.
Avoid using #DAA520 text on #B8860B, as the contrast will likely be too low.
The vibrant gold #DAA520 will require dark text (e.g., #2F4F4F or black) when used as a background.
For critical UI elements, ensure good contrast by pairing #DAA520 with #2F4F4F.

Recommended combinations

Gleaming Elegance

Perfect for a sophisticated website header, with gold as the logo and dark teal for navigation links.

#A9A9A9 · #DAA520 · #2F4F4F

Vintage Richness

Creates elegant content cards or product showcases, using the deeper gold for key details against a teal background.

#2F4F4F · #8B4513 · #B8860B

Artistic Contrast

Ideal for a sleek call-to-action, with gold as the button, grey as the container, and dark teal for text.

#DAA520 · #A9A9A9 · #2F4F4F

CSS variables

:root {
  --art-deco-sapphire-gleam-1: #2F4F4F;
  --art-deco-sapphire-gleam-2: #8B4513;
  --art-deco-sapphire-gleam-3: #DAA520;
  --art-deco-sapphire-gleam-4: #B8860B;
  --art-deco-sapphire-gleam-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-sapphire-gleam": {
        1: "#2F4F4F",
        2: "#8B4513",
        3: "#DAA520",
        4: "#B8860B",
        5: "#A9A9A9",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#8B4513

Color 3#DAA520

Color 4#B8860B

Color 5#A9A9A9

Accessibility

Contrast checker

1.3:1Fail

4:1AA18

2.7:1Fail

3.8:1AA18

1.3:1Fail

3.2:1AA18

2.2:1Fail

3:1AA18

4:1AA18

3.2:1AA18

1.5:1Fail

1.1:1Fail

2.7:1Fail

2.2:1Fail

1.5:1Fail

1.4:1Fail

3.8:1AA18

3:1AA18

1.1:1Fail

1.4:1Fail

Similar palettes

More like Art Deco Sapphire Gleam