Back to palettes

Palette

Sapphire Crystal Glint

Sparkling blues, deep and clear, reminiscent of faceted sapphire crystals catching the light.

vibrantelegant5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire Crystal Glint 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 Crystal Glint.

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

Data visualization

#E0F2F7#B3DCEB#7AC0DB#4D9BC2#2D7096

Palette guide

How to use Sapphire Crystal Glint

Overview

The Sapphire Crystal Glint palette embodies the sparkling elegance of faceted sapphire crystals. This collection presents a beautiful monochromatic gradient of blues, from the ethereal lightness of #E0F2F7 to the profound depth of #2D7096. Intermediate shades like #B3DCEB, #7AC0DB, and #4D9BC2 provide a smooth transition, allowing for sophisticated layering and visual hierarchy. It's an excellent choice for designs that aim for a clean, professional, and elegant aesthetic, often seen in corporate, luxury, or high-tech sectors. Designers can leverage its cohesive range to create depth and focus without introducing jarring contrasts.

Best used for

  • Corporate branding and websites
  • Luxury product packaging
  • High-tech company interfaces
  • Elegant wedding or event invitations
  • Health and wellness applications
  • Financial services design

Suggested color roles

primary

Use #2D7096 (Deep Sapphire Blue) as a strong, authoritative primary for main headings, navigation, or corporate branding, conveying trust and stability.

secondary

Apply #4D9BC2 (Mid-tone Blue) as a versatile secondary for subheadings, active states, or larger content blocks, providing a balanced visual weight.

accent

Utilize #7AC0DB (Vibrant Light Blue) for subtle accents, interactive elements, or to draw attention to key features.

background

Employ #E0F2F7 (Very Pale Blue) as a clean, crisp background that offers excellent readability for darker text and enhances the overall elegant feel.

text

For light backgrounds like #E0F2F7, use dark text (e.g., #2D7096 or black). For elements using darker blues, use very light text (e.g., white or #E0F2F7).

Accessibility notes

  • Ensure #2D7096 provides sufficient contrast when used for text on lighter backgrounds like #E0F2F7.
  • Avoid using #E0F2F7 or #B3DCEB for text on white or very light backgrounds, as contrast will be poor.
  • #4D9BC2 can work for larger text on #E0F2F7, but check WCAG AA compliance for body text.
  • Consider contrast for interactive elements against their backgrounds, especially when using lighter blues.

Recommended combinations

Crystal Depth

A high-contrast combination perfect for professional branding or clean UI elements, offering strong readability.

#2D7096 · #4D9BC2 · #E0F2F7

Glimmering Layers

Creates a soft, elegant gradient for backgrounds or subtle visual separation in content blocks.

#B3DCEB · #7AC0DB · #4D9BC2

Clear Radiance

Ideal for a fresh, open feel with a distinct primary color and a lighter accent.

#E0F2F7 · #2D7096 · #7AC0DB

CSS variables

:root {
  --sapphire-crystal-glint-1: #E0F2F7;
  --sapphire-crystal-glint-2: #B3DCEB;
  --sapphire-crystal-glint-3: #7AC0DB;
  --sapphire-crystal-glint-4: #4D9BC2;
  --sapphire-crystal-glint-5: #2D7096;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-crystal-glint": {
        1: "#E0F2F7",
        2: "#B3DCEB",
        3: "#7AC0DB",
        4: "#4D9BC2",
        5: "#2D7096",
      }
    }
  }
}

Related searches

sapphire blue color schemeelegant blue palettemonochromatic blue designcorporate blue colorscrystal inspired palette

Palette colors

Hex values

Color 1#E0F2F7
·
Color 2#B3DCEB
·
Color 3#7AC0DB
·
Color 4#4D9BC2
·
Color 5#2D7096
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.7:1Fail
4.7:1AA
2
1.3:1Fail
1.4:1Fail
2.1:1Fail
3.7:1AA18
3
1.8:1Fail
1.4:1Fail
1.5:1Fail
2.7:1Fail
4
2.7:1Fail
2.1:1Fail
1.5:1Fail
1.8:1Fail
5
4.7:1AA
3.7:1AA18
2.7:1Fail
1.8:1Fail

Similar palettes

More like Sapphire Crystal Glint

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