Back to palettes

Palette

Deco Sapphire Gleam

Rich, deep blues with a luxurious sparkle, inspired by sapphire gemstones and Art Deco grandeur.

vibrantelegant5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F2E#282855#41417C#5A5AA3#7373CA

Palette guide

How to use Deco Sapphire Gleam

Overview

The Deco Sapphire Gleam palette features rich, deep blues with a luxurious sparkle, inspired by sapphire gemstones and Art Deco grandeur. This elegant collection transitions from the profound #0F0F2E to the vibrant #7373CA, showcasing a harmonious progression of blue tones. Designers and developers can leverage these sophisticated hues, including the balanced #282855, the inviting #41417C, and the brighter #5A5AA3, to create premium digital experiences, refined brand identities, or captivating visual projects. Its monochromatic yet dynamic range is perfect for conveying depth, elegance, and a touch of mysterious allure, ideal for designs that require a sophisticated and jewel-toned aesthetic.

Best used for

  • Luxury jewelry brand websites
  • High-end corporate branding
  • Elegant evening wear fashion sites
  • Sophisticated app interfaces
  • Art exhibitions or gallery promotions
  • Digital art and abstract design

Suggested color roles

primary

#282855 - A deep, rich sapphire blue that can serve as a commanding primary color for brand identity, main headers, or significant UI elements, conveying depth and sophistication.

secondary

#41417C - A vibrant mid-tone blue, excellent for secondary navigation, subheadings, or as a background for content blocks, adding visual interest without overpowering.

accent

#7373CA - This brighter, almost luminous blue provides a striking accent, perfect for interactive elements, hover states, or to draw attention to key features with a subtle gleam.

background

#0F0F2E - A very dark, almost black-blue, ideal for dramatic and luxurious backgrounds that make the brighter sapphire tones truly pop and convey depth.

text

#5A5AA3 - A lighter blue, suitable for subtle decorative text on very dark backgrounds or for secondary information. For primary text on #0F0F2E, white or a very light gray is essential for readability.

Accessibility notes

  • White or very light gray text on #0F0F2E, #282855, and #41417C will ensure excellent contrast and readability.
  • Avoid using #5A5AA3 or #7373CA for body text on #0F0F2E as contrast may be insufficient for WCAG AA.
  • The brighter blues like #7373CA offer good contrast for dark text (e.g., #0F0F2E) when used as backgrounds for smaller elements.
  • Ensure sufficient color difference for interactive states (e.g., hover) to be clear for all users.

Recommended combinations

Deep Sapphire

#0F0F2E as a deep background, #41417C for main content, and #7373CA for luminous accents.

#0F0F2E · #41417C · #7373CA

Gleaming Layers

Ideal for creating depth and visual interest through layered elements or subtle gradients.

#282855 · #5A5AA3 · #7373CA

Elegant Contrast

#0F0F2E for grounding, #7373CA for strong highlights, and #41417C for supporting details.

#0F0F2E · #7373CA · #41417C

CSS variables

:root {
  --deco-sapphire-gleam-1: #0F0F2E;
  --deco-sapphire-gleam-2: #282855;
  --deco-sapphire-gleam-3: #41417C;
  --deco-sapphire-gleam-4: #5A5AA3;
  --deco-sapphire-gleam-5: #7373CA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deco-sapphire-gleam": {
        1: "#0F0F2E",
        2: "#282855",
        3: "#41417C",
        4: "#5A5AA3",
        5: "#7373CA",
      }
    }
  }
}

Related searches

sapphire blue color paletteart deco jewel toneselegant dark blue schemeluxury blue website colorsdeep sophisticated blues

Palette colors

Hex values

Color 1#0F0F2E
·
Color 2#282855
·
Color 3#41417C
·
Color 4#5A5AA3
·
Color 5#7373CA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
3:1AA18
4.5:1AA18
2
1.4:1Fail
1.5:1Fail
2.2:1Fail
3.3:1AA18
3
2:1Fail
1.5:1Fail
1.5:1Fail
2.2:1Fail
4
3:1AA18
2.2:1Fail
1.5:1Fail
1.5:1Fail
5
4.5:1AA18
3.3:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Deco Sapphire Gleam

View all vibrant
Regal Peacock Plume
Royal Peacock Plume
Sapphire Crystal Glint
Art Deco Emerald Pool
Coronation Gemstone Gleam
Crimson Royal Gem