Palette

Sapphire Gemstone Depth

Luxurious, profound blues that mirror the brilliance and mystery of a precious sapphire.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire Gemstone Depth 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 Sapphire Gemstone Depth.

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

Data visualization

#0A1C33#1A3E62#2C689E#4FA4E2#8BC7F5

Palette guide

How to use Sapphire Gemstone Depth

Overview

Sapphire Gemstone Depth is a luxurious palette that mirrors the profound brilliance and mystery of a precious sapphire. This collection of blues ranges from the intense, almost black #0A1C33 to the luminous, clear #8BC7F5, with intermediate shades like #1A3E62, #2C689E, and #4FA4E2 creating a sophisticated gradient. It's perfectly suited for designs that aim to convey elegance, trustworthiness, and high quality, making it a strong contender for luxury brands, corporate identities, or sophisticated digital products. Designers can leverage its depth for immersive backgrounds and its lighter hues for sparkling accents, creating a rich visual experience.

Best used for

Luxury jewelry or fashion brands
Corporate and financial services
High-end technology products
Elegant event branding
Sophisticated website designs
Professional presentations

Suggested color roles

primary

Use #0A1C33 (Deep Sapphire Navy) as a very dark, rich primary, ideal for luxurious backgrounds, main headers, or to establish a profound, elegant base.

secondary

Apply #1A3E62 (Dark Sapphire Blue) as a robust secondary for content panels, subheadings, or as a slightly lighter dark background, adding depth.

accent

Employ #4FA4E2 (Vibrant Mid-Blue) as a bright, engaging accent for calls to action, interactive elements, or to highlight key information with a touch of brilliance.

background

Utilize #8BC7F5 (Light Sky Blue) as a clean, airy background that offers excellent readability for darker text and brings a sense of openness and purity.

text

For light backgrounds like #8BC7F5, use dark text (e.g., #0A1C33 or black). For dark elements, use a very light text color (e.g., white or #8BC7F5).

Accessibility notes

Ensure strong contrast between #0A1C33 and #8BC7F5 for body text.
#2C689E or #1A3E62 might have insufficient contrast for body text on #8BC7F5; use for larger headlines or decorative elements.
Avoid using #8BC7F5 as text on a white background; contrast will be poor.
Always check WCAG AA compliance for all text and interactive element color combinations.

Recommended combinations

Jewel Core

A deep, rich combination that provides strong contrast for luxury branding and impactful headlines.

#0A1C33 · #1A3E62 · #4FA4E2

Glimmering Facet

A harmonious gradient for creating smooth transitions or visually appealing content blocks.

#2C689E · #4FA4E2 · #8BC7F5

Sapphire Radiance

High contrast for excellent readability, combining a deep base with a luminous background and a supporting dark blue.

#0A1C33 · #8BC7F5 · #1A3E62

CSS variables

:root {
  --sapphire-gemstone-depth-1: #0A1C33;
  --sapphire-gemstone-depth-2: #1A3E62;
  --sapphire-gemstone-depth-3: #2C689E;
  --sapphire-gemstone-depth-4: #4FA4E2;
  --sapphire-gemstone-depth-5: #8BC7F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-gemstone-depth": {
        1: "#0A1C33",
        2: "#1A3E62",
        3: "#2C689E",
        4: "#4FA4E2",
        5: "#8BC7F5",
      }
    }
  }
}

Hex values

Color 1#0A1C33

Color 2#1A3E62

Color 3#2C689E

Color 4#4FA4E2

Color 5#8BC7F5

Accessibility

Contrast checker

1.6:1Fail

2.9:1Fail

6.3:1AA

9.4:1AAA

1.6:1Fail

1.9:1Fail

4.1:1AA18

6.1:1AA

2.9:1Fail

1.9:1Fail

2.2:1Fail

3.2:1AA18

6.3:1AA

4.1:1AA18

2.2:1Fail

1.5:1Fail

9.4:1AAA

6.1:1AA

3.2:1AA18

1.5:1Fail

Similar palettes

More like Sapphire Gemstone Depth

Midnight Symphony Orchestra