Palette

Azure Sapphire Gleam

A luxurious range of deep and luminous blues, inspired by the captivating brilliance of sapphires and cool ocean depths.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F4C5C#1E7E8E#2DABBC#8EF5FA#0A3742

Palette guide

How to use Azure Sapphire Gleam

Overview

The Azure Sapphire Gleam palette offers a luxurious and captivating range of deep and luminous blues, inspired by the brilliance of sapphires and cool ocean depths. From the profound #0A3742 and #0F4C5C to the vibrant #2DABBC and the dazzling #8EF5FA, this collection provides a sophisticated spectrum. Designers can utilize these shades to create elegant brand identities, high-end digital interfaces, or compelling marketing materials that demand attention. The blend of rich, jewel-like tones with bright, shimmering accents ensures a dynamic yet cohesive visual experience, perfect for conveying prestige and tranquility.

Best used for

Luxury brand identity and packaging
High-tech product interfaces
Jewelry store websites
Marine research or conservation
Elegant event invitations
Premium spa or wellness services

Suggested color roles

primary

#0F4C5C - A deep, rich teal-blue, excellent for main branding elements, prominent headers, and establishing a sophisticated tone.

secondary

#1E7E8E - A slightly lighter, vibrant teal, suitable for subheadings, navigation, and secondary call-to-action buttons.

accent

#8EF5FA - A dazzling, almost electric aqua, perfect for highlights, interactive elements, or small, attention-grabbing details.

background

#0A3742 - The darkest shade, providing a luxurious, deep canvas for content, or use a very light neutral white for contrast.

text

#8EF5FA - For dark backgrounds. For a light background, use #0A3742 or #0F4C5C to ensure high contrast and readability.

Accessibility notes

Ensure high contrast when using lighter colors like #8EF5FA or #2DABBC for text on darker backgrounds such as #0A3742 or #0F4C5C.
Avoid placing #1E7E8E text on #0F4C5C backgrounds; the contrast will be insufficient for readability.
For body text on light backgrounds, use #0A3742 or #0F4C5C to guarantee excellent readability.
Be mindful of color-blind users; distinguish interactive elements not solely by hue, but also by weight or iconography.

Recommended combinations

Deep Sapphire

Creates a highly sophisticated and deep aesthetic, ideal for luxury goods or corporate professionalism.

#0A3742 · #0F4C5C · #1E7E8E

Oceanic Gleam

Perfect for modern, dynamic designs, tech interfaces, or any project needing a vibrant, yet elegant, touch.

#2DABBC · #8EF5FA · #0F4C5C

Jewel Accent

Utilizes high contrast for dramatic effect, great for call-to-actions, hero sections, or impactful visual statements.

#0A3742 · #8EF5FA · #2DABBC

CSS variables

:root {
  --azure-sapphire-gleam-1: #0F4C5C;
  --azure-sapphire-gleam-2: #1E7E8E;
  --azure-sapphire-gleam-3: #2DABBC;
  --azure-sapphire-gleam-4: #8EF5FA;
  --azure-sapphire-gleam-5: #0A3742;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-sapphire-gleam": {
        1: "#0F4C5C",
        2: "#1E7E8E",
        3: "#2DABBC",
        4: "#8EF5FA",
        5: "#0A3742",
      }
    }
  }
}

Hex values

Color 1#0F4C5C

Color 2#1E7E8E

Color 3#2DABBC

Color 4#8EF5FA

Color 5#0A3742

Accessibility

Contrast checker

2:1Fail

3.5:1AA18

7.5:1AAA

1.3:1Fail

2:1Fail

1.7:1Fail

3.7:1AA18

2.7:1Fail

3.5:1AA18

1.7:1Fail

2.2:1Fail

4.7:1AA

7.5:1AAA

3.7:1AA18

2.2:1Fail

10.1:1AAA

1.3:1Fail

2.7:1Fail

4.7:1AA

10.1:1AAA

Similar palettes

More like Azure Sapphire Gleam

View all cool

Sapphire Gemstone Depth

Midnight Symphony Orchestra