Palette

Dark Sapphire Elegance

Deep, regal blues ascending to bright highlights, inspired by the profound luster of sapphire gemstones.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dark Sapphire Elegance 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 Dark Sapphire Elegance.

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

Data visualization

#0F0F3F#2A2A70#4F4FB0#7A7AFF#A5A5FF

Palette guide

How to use Dark Sapphire Elegance

Overview

The Dark Sapphire Elegance palette presents a stunning gradient of deep, regal blues, ascending to bright highlights, inspired by the profound luster of sapphire gemstones. From the intense #0F0F3F to the luminous #A5A5FF, this palette offers a sophisticated and majestic range for designs that demand elegance and depth. It's ideal for luxury branding, corporate interfaces, or any project that seeks to convey trust, stability, and refined beauty. Designers can leverage its harmonious progression for immersive backgrounds, while developers will find it perfect for dark mode themes that are both visually rich and incredibly professional, ensuring a captivating user experience.

Best used for

Luxury brand identity (e.g., jewelry, finance)
Corporate website or app interfaces
High-tech product showcases
Dark mode UI for professional tools
Event branding for formal galas or awards
Digital art with a regal or cosmic theme

Suggested color roles

primary

#0F0F3F - A very deep, almost black-blue that provides a strong, regal foundation for primary elements, large sections, or brand identity.

secondary

#2A2A70 - A rich, deep sapphire blue, offering a sophisticated secondary color for navigation, accent panels, or important informational blocks.

accent

#7A7AFF - A vibrant, luminous medium blue, perfect for call-to-action buttons, interactive states, highlights, or small illustrative details to add a pop of energetic contrast.

background

#0F0F3F - This deep, regal blue doubles as an excellent immersive background, setting a sophisticated and profound tone.

text

#4F4FB0 - A legible, vibrant blue that works well for subheadings or emphasized text. For main body text on the darkest backgrounds, consider a very light gray (e.g., #E0E0E0) for optimal readability.

Accessibility notes

Ensure sufficient contrast when using #A5A5FF or #7A7AFF for text on darker backgrounds like #0F0F3F or #2A2A70.
Avoid placing #4F4FB0 text on #2A2A70; their contrast might be insufficient.
For critical text on the darkest backgrounds, opt for a pure white or very light gray to meet accessibility standards.
Test all text and background pairings using WCAG contrast checkers to meet AA or AAA standards.

Recommended combinations

Regal Gradient

Creating seamless, deep blue gradients for backgrounds or large hero sections, adding majestic depth.

#0F0F3F · #2A2A70 · #4F4FB0

Sapphire Glow

Pairing a dominant dark blue with bright accents for interactive elements, buttons, or key information.

#2A2A70 · #7A7AFF · #A5A5FF

Elegant Layers

Designing UI elements where subtle tonal shifts provide hierarchy, like nested containers or tabs, for a refined feel.

#4F4FB0 · #7A7AFF · #A5A5FF

CSS variables

:root {
  --dark-sapphire-elegance-1: #0F0F3F;
  --dark-sapphire-elegance-2: #2A2A70;
  --dark-sapphire-elegance-3: #4F4FB0;
  --dark-sapphire-elegance-4: #7A7AFF;
  --dark-sapphire-elegance-5: #A5A5FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-sapphire-elegance": {
        1: "#0F0F3F",
        2: "#2A2A70",
        3: "#4F4FB0",
        4: "#7A7AFF",
        5: "#A5A5FF",
      }
    }
  }
}

Hex values

Color 1#0F0F3F

Color 2#2A2A70

Color 3#4F4FB0

Color 4#7A7AFF

Color 5#A5A5FF

Accessibility

Contrast checker

1.4:1Fail

2.7:1Fail

5.2:1AA

8.1:1AAA

1.4:1Fail

1.9:1Fail

3.6:1AA18

5.7:1AA

2.7:1Fail

1.9:1Fail

2:1Fail

3.1:1AA18

5.2:1AA

3.6:1AA18

2:1Fail

1.6:1Fail

8.1:1AAA

5.7:1AA

3.1:1AA18

1.6:1Fail

Similar palettes

More like Dark Sapphire Elegance

View all dark

Elegant Sapphire Skies

Cosmic Jellyfish Bloom