Palette

Art Deco Sapphire

A luxurious blend of deep, rich blues evoking the sophisticated glamour and clean lines of 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

#0F2D3C#2B566D#4C84A3#0A202A#07151D

Palette guide

How to use Art Deco Sapphire

Overview

The "Art Deco Sapphire" palette offers a luxurious blend of deep, rich blues, evoking the sophisticated glamour and clean lines of Art Deco design. This collection is ideal for designers and developers aiming to create designs that convey elegance, depth, and a timeless, premium feel. The profound dark shades, #0A202A and #07151D, provide a strong, grounding foundation, while the mid-tones, #0F2D3C, #2B566D, and #4C84A3, offer versatile layering and visual interest. This palette is perfect for high-end branding, sophisticated digital interfaces, or print materials that demand a refined, classic, and impactful appearance.

Best used for

Luxury hotel chains
High-end men's fashion brands
Exclusive private club branding
Yachting and marine luxury services
Corporate investment firm websites
Architectural photography portfolios

Suggested color roles

primary

Use #2B566D, a deep, sophisticated blue-gray, as a commanding base for main content areas or navigation, conveying authority and elegance.

secondary

Apply #0F2D3C, a darker, rich teal-blue, for subheadings, background patterns, or informational blocks, adding profound depth.

accent

Employ #4C84A3, a brighter, more open blue-gray, for calls-to-action, important icons, or subtle highlights that stand out with clarity.

background

Select #07151D, a profound, almost black, darkest blue, as an incredibly luxurious and immersive backdrop, making lighter elements truly shine.

text

For text on dark backgrounds like #07151D, use #4C84A3 for a cohesive feel or crisp white for maximum contrast and readability.

Accessibility notes

Ensure #4C84A3 text on #07151D background meets WCAG AA contrast for body text; pure white text is even better.
Avoid using #2B566D text on #0F2D3C, as the contrast will likely be too low.
The lightest color, #4C84A3, will require dark text (e.g., #07151D or black) when used as a background.
For critical UI elements, ensure good contrast by pairing #4C84A3 with #0A202A.

Recommended combinations

Deep Ocean Elegance

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

#07151D · #4C84A3 · #2B566D

Layered Blues

Creates sophisticated content cards, using the lightest blue for key details and darker blues for background.

#0F2D3C · #2B566D · #4C84A3

Classic Contrast

Ideal for a sleek navigation bar, with the darkest blue for active states and the lighter blue for text on buttons.

#4C84A3 · #0A202A · #2B566D

CSS variables

:root {
  --art-deco-sapphire-3-1: #0F2D3C;
  --art-deco-sapphire-3-2: #2B566D;
  --art-deco-sapphire-3-3: #4C84A3;
  --art-deco-sapphire-3-4: #0A202A;
  --art-deco-sapphire-3-5: #07151D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-sapphire-3": {
        1: "#0F2D3C",
        2: "#2B566D",
        3: "#4C84A3",
        4: "#0A202A",
        5: "#07151D",
      }
    }
  }
}

Hex values

Color 1#0F2D3C

Color 2#2B566D

Color 3#4C84A3

Color 4#0A202A

Color 5#07151D

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

1.2:1Fail

1.3:1Fail

1.8:1Fail

1.9:1Fail

2.1:1Fail

2.3:1Fail

3.5:1AA18

1.9:1Fail

4.1:1AA18

4.5:1AA

1.2:1Fail

2.1:1Fail

4.1:1AA18

1.1:1Fail

1.3:1Fail

2.3:1Fail

4.5:1AA

1.1:1Fail

Similar palettes

More like Art Deco Sapphire

Amethyst Star Cluster

Art Deco Bronze

Aurora Borealis Dream