Back to palettes

Palette

Deep Sapphire Gaze

A profoundly elegant palette, delving into the deep, captivating allure of a sapphire's many facets.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Sapphire Gaze 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 Deep Sapphire Gaze.

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

Data visualization

#000080#191970#004080#8090a0#303040

Palette guide

How to use Deep Sapphire Gaze

Overview

The Deep Sapphire Gaze palette delves into the captivating allure of a sapphire's many facets, offering a profoundly elegant range of blues and subtle grays. From the deep #000080 to the sophisticated #8090a0, this palette is ideal for designs that demand refinement, stability, and a timeless aesthetic. Designers can craft sophisticated digital experiences, elegant branding, and serene UI themes. Developers will find these hex codes perfect for projects related to luxury, professional services, or any application that benefits from a cool, balanced, and visually appealing aesthetic. The interplay between #191970 and #004080 allows for excellent depth and visual harmony.

Best used for

  • Luxury jewelry or watch brand websites
  • High-end corporate presentations
  • Financial institution digital platforms
  • Art gallery or museum websites
  • Professional services firm branding
  • Elegant event invitations

Suggested color roles

primary

Utilize #191970 as the main background or primary content color, providing a deep, sophisticated, and stable foundation.

secondary

Apply #004080 for secondary content areas, panels, or navigation, offering a clear visual distinction and layered effect.

accent

Introduce #8090a0 as a soft, elegant accent for interactive elements, subtle dividers, or hover states, ensuring refinement.

background

The deepest hue, #000080, is excellent for expansive backgrounds or header sections, establishing an immediate tone of profound elegance.

text

For optimal readability, use a crisp white or very light gray. #8090a0 can be used for larger headings or highlights on the darkest backgrounds.

Accessibility notes

  • Ensure high contrast for text on #000080, #191970, and #004080 by using light text (e.g., white or #8090a0).
  • The lightest color, #8090a0, provides good contrast for primary text against the darker blues in the palette.
  • Avoid using #000080 and #191970 for small text or critical UI elements in close proximity without careful contrast checks.
  • Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Sapphire Layers

Ideal for creating a layered, deep background or card system, conveying gradual depth and refined professionalism.

#000080 · #191970 · #004080

Elegant Gaze

Use #191970 as a base, with #303040 for secondary elements and #8090a0 for soft, elegant highlights or subtle accents.

#191970 · #303040 · #8090A0

Cool Contrast

Excellent for a dark, profound background with a clear, soft accent and a strong mid-tone for supporting details.

#000080 · #8090A0 · #004080

CSS variables

:root {
  --deep-sapphire-gaze-1: #000080;
  --deep-sapphire-gaze-2: #191970;
  --deep-sapphire-gaze-3: #004080;
  --deep-sapphire-gaze-4: #8090a0;
  --deep-sapphire-gaze-5: #303040;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sapphire-gaze": {
        1: "#000080",
        2: "#191970",
        3: "#004080",
        4: "#8090a0",
        5: "#303040",
      }
    }
  }
}

Related searches

deep sapphire blue paletteelegant blue hex codesprofessional navy UI designcool blue-gray schemetimeless sapphire branding

Palette colors

Hex values

Color 1#000080
·
Color 2#191970
·
Color 3#004080
·
Color 4#8090a0
·
Color 5#303040
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.6:1Fail
4.9:1AA
1.2:1Fail
2
1.1:1Fail
1.4:1Fail
4.5:1AA
1.1:1Fail
3
1.6:1Fail
1.4:1Fail
3.1:1AA18
1.3:1Fail
4
4.9:1AA
4.5:1AA
3.1:1AA18
4:1AA18
5
1.2:1Fail
1.1:1Fail
1.3:1Fail
4:1AA18

Similar palettes

More like Deep Sapphire Gaze

View all cool
Sapphire Gemstone Depth
Art Deco Sapphire
Azure Sapphire Gleam
Deep Sapphire Tide
Midnight Symphony Orchestra
Sapphire Geode Shard