Palette

Art Deco Sapphire

Sophisticated deep blues, reminiscent of luxurious sapphire gemstones and elegant Art Deco designs.

coolelegant5 colors

More cool 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

#1A237E#0D47A1#4682B4#B0C4DE#2F3E6C

Palette guide

How to use Art Deco Sapphire

Overview

The "Art Deco Sapphire" palette offers a sophisticated range of deep blues, reminiscent of luxurious sapphire gemstones and elegant Art Deco designs. This collection is ideal for designers and developers seeking to create designs that convey opulence, depth, and a timeless, regal aesthetic. The profound navy #1A237E provides a strong, grounding foundation, while the progression through #0D47A1, #2F3E6C, and #4682B4 offers versatile layering and visual interest. The lightest shade, #B0C4DE, provides a gentle, airy highlight. 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 corporate branding
High-end jewelry e-commerce
Exclusive club membership materials
Museum and cultural institution websites
Professional services marketing
Formal event invitations

Suggested color roles

primary

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

secondary

Apply #2F3E6C, a slightly muted, dark blue, for subheadings, background patterns, or informational blocks, adding profound depth.

accent

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

background

Select #B0C4DE, a very light, almost white blue-gray, as an airy, expansive, and clean canvas, making darker blues appear vibrant.

text

For text on #B0C4DE, use #1A237E for body text and #0D47A1 for headlines, ensuring excellent readability and a cohesive, elegant feel.

Accessibility notes

Ensure #1A237E text on #B0C4DE background meets WCAG AA contrast for body text.
Avoid using #4682B4 text on #0D47A1, as the contrast will likely be too low.
The darkest colors, #1A237E and #0D47A1, will require light text (e.g., #B0C4DE or white) when used as backgrounds.
For critical UI elements, ensure good contrast by pairing #4682B4 with #1A237E.

Recommended combinations

Regal Blue

Perfect for a clean website header, with the darkest blue for the logo and mid-blue for navigation links.

#B0C4DE · #1A237E · #0D47A1

Layered Sophistication

Creates elegant content cards or product showcases, using the lighter blue for key details.

#0D47A1 · #2F3E6C · #4682B4

Classic Contrast

Ideal for a sleek call-to-action, with the mid-blue as the button, light blue as the container, and darkest blue for text.

#4682B4 · #1A237E · #B0C4DE

CSS variables

:root {
  --art-deco-sapphire-1: #1A237E;
  --art-deco-sapphire-2: #0D47A1;
  --art-deco-sapphire-3: #4682B4;
  --art-deco-sapphire-4: #B0C4DE;
  --art-deco-sapphire-5: #2F3E6C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-sapphire": {
        1: "#1A237E",
        2: "#0D47A1",
        3: "#4682B4",
        4: "#B0C4DE",
        5: "#2F3E6C",
      }
    }
  }
}

Hex values

Color 1#1A237E

Color 2#0D47A1

Color 3#4682B4

Color 4#B0C4DE

Color 5#2F3E6C

Accessibility

Contrast checker

1.5:1Fail

3.2:1AA18

7.4:1AAA

1.3:1Fail

1.5:1Fail

2.1:1Fail

4.8:1AA

1.2:1Fail

3.2:1AA18

2.1:1Fail

2.3:1Fail

2.5:1Fail

7.4:1AAA

4.8:1AA

2.3:1Fail

5.8:1AA

1.3:1Fail

1.2:1Fail

2.5:1Fail

5.8:1AA

Similar palettes

More like Art Deco Sapphire

View all cool

Deep Sapphire Gaze

Deep Sapphire Tide

Sapphire Gemstone Depth

Sapphire Velvet Nights

Art Deco Metropolis

Aurora Horizon Whisper