Back to palettes

Palette

Art Deco Sapphire

Deep and glamorous blues reminiscent of precious sapphires and elegant Art Deco design.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#1919A0#3232C0#4C4CE0#6666FF

Palette guide

How to use Art Deco Sapphire

Overview

The "Art Deco Sapphire" palette offers a glamorous spectrum of deep and vibrant blues, reminiscent of precious sapphire gemstones and elegant Art Deco design. This collection is ideal for designers and developers seeking to create designs that convey luxury, sophistication, and a striking coolness. The darkest shade, #000080, provides a profound, classic navy base, while the progression through #1919A0, #3232C0, #4C4CE0, and #6666FF offers a dynamic range from deep to bright. This palette is perfect for high-end branding, elegant digital interfaces, or print materials that demand a distinctive, rich, and visually impactful appearance.

Best used for

  • Luxury jewelry brand websites
  • High-end financial services
  • Exclusive event invitations
  • Corporate annual reports
  • Sleek technology product interfaces
  • Maritime or aviation luxury branding

Suggested color roles

primary

Use #1919A0, a deep, rich sapphire blue, as a commanding base for main content areas or navigation, conveying authority and elegance.

secondary

Apply #3232C0, a vibrant medium blue, for subheadings, background panels, or informational blocks, adding energy and depth.

accent

Employ #6666FF, a bright, electric blue, for calls-to-action, important icons, or interactive elements that need to stand out with a modern pop.

background

Select #000080, a profound, classic navy blue, as an incredibly luxurious and immersive backdrop, making lighter blues truly shine.

text

For text on dark backgrounds like #000080, use #6666FF for headlines and #4C4CE0 for body text, ensuring excellent readability and vibrancy.

Accessibility notes

  • Ensure #6666FF text on #000080 background meets WCAG AA contrast for body text.
  • Avoid using #3232C0 text on #1919A0, as the contrast might be too low for readability.
  • The vibrant #6666FF will require very dark text (e.g., black or #000080) when used as a background.
  • For critical UI elements, ensure good contrast by pairing #6666FF with #000080.

Recommended combinations

Sapphire Glow

Perfect for a dramatic website hero section, with the brightest blue as the main headline and mid-blue for supporting text.

#000080 · #6666FF · #3232C0

Dynamic Blues

Creates energetic content cards, using the brightest blue for key details and deeper blues for background.

#1919A0 · #4C4CE0 · #6666FF

Elegant Depth

Ideal for a sophisticated navigation bar, with the darkest blue as the base, mid-blue for active states, and a slightly lighter blue for text.

#3232C0 · #000080 · #1919A0

CSS variables

:root {
  --art-deco-sapphire-2-1: #000080;
  --art-deco-sapphire-2-2: #1919A0;
  --art-deco-sapphire-2-3: #3232C0;
  --art-deco-sapphire-2-4: #4C4CE0;
  --art-deco-sapphire-2-5: #6666FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-sapphire-2": {
        1: "#000080",
        2: "#1919A0",
        3: "#3232C0",
        4: "#4C4CE0",
        5: "#6666FF",
      }
    }
  }
}

Related searches

art deco blue palettesapphire luxury colorsdeep blue elegant schemeglamorous blue designroyal blue modern palette

Palette colors

Hex values

Color 1#000080
·
Color 2#1919A0
·
Color 3#3232C0
·
Color 4#4C4CE0
·
Color 5#6666FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.6:1Fail
3.7:1AA18
2
1.3:1Fail
1.4:1Fail
2:1Fail
2.9:1Fail
3
1.8:1Fail
1.4:1Fail
1.5:1Fail
2.1:1Fail
4
2.6:1Fail
2:1Fail
1.5:1Fail
1.4:1Fail
5
3.7:1AA18
2.9:1Fail
2.1:1Fail
1.4:1Fail

Similar palettes

More like Art Deco Sapphire

View all dark
Dark Sapphire Elegance
Deco Grandeur Noir
Elegant Sapphire Skies
Midnight Velvet Glam
Velveteen Drapes Night
Art Deco Gemstone