Palette

Sapphire Dusk Glide

A serene progression from the deepest navy to a bright sky blue, like twilight fading into night.

monochromeelegant5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire Dusk Glide 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 Dusk Glide.

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

Data visualization

#010E1D#082E4D#16568A#2C88CD#63B5F5

Palette guide

How to use Sapphire Dusk Glide

Overview

Sapphire Dusk Glide is a captivating monochrome palette that gracefully transitions from the deepest navy to a luminous sky blue, mirroring the ethereal beauty of twilight fading into night. Starting with the profound darkness of #010E1D and progressing through rich blues like #082E4D and #16568A, it culminates in the vibrant, clear blues of #2C88CD and #63B5F5. This palette is inherently elegant and sophisticated, making it ideal for designs that require depth, professionalism, and a sense of calm movement. Designers can use its seamless gradient for compelling visual storytelling, while developers will find it excellent for creating clear visual hierarchies in UI.

Best used for

Elegant corporate websites
Luxury product branding
High-end technology interfaces
Educational platforms (science, astronomy)
Serene meditation or productivity apps
Professional presentation templates

Suggested color roles

primary

Use #010E1D (Deepest Navy) as an extremely dark, almost black primary, perfect for immersive backgrounds, main headers, or creating a luxurious, profound base.

secondary

Apply #082E4D (Dark Navy Blue) as a robust secondary color, ideal for content panels, secondary navigation, or deep shadows, adding depth without being absolute black.

accent

Employ #2C88CD (Vibrant Blue) as a brilliant accent for calls to action, important notifications, or to highlight key interactive elements, providing a strong visual pop.

background

Utilize #010E1D (Deepest Navy) as an excellent choice for a dark mode interface or a dramatic background, allowing lighter elements to stand out crisply.

text

For dark backgrounds like #010E1D or #082E4D, use a very light color like white or #63B5F5 for optimal readability. For lighter elements, use #010E1D.

Accessibility notes

Ensure strong contrast between text and background, especially when using lighter blues (#63B5F5, #2C88CD) on dark backgrounds (#010E1D, #082E4D).
Avoid using #16568A for body text on #082E4D; contrast will be insufficient.
#63B5F5 provides excellent contrast against #010E1D for body text.
Always check WCAG AA compliance for all text and interactive element color pairs.

Recommended combinations

Twilight Depth

A high-contrast, elegant combination for dramatic dark mode UIs or impactful branding.

#010E1D · #082E4D · #2C88CD

Sky Horizon

A harmonious gradient for creating a sense of openness, ideal for header visuals or feature sections.

#16568A · #2C88CD · #63B5F5

Nightfall Glow

Combines the deepest navy with a bright accent for clarity and a softer dark blue for balance.

#010E1D · #63B5F5 · #082E4D

CSS variables

:root {
  --sapphire-dusk-glide-1: #010E1D;
  --sapphire-dusk-glide-2: #082E4D;
  --sapphire-dusk-glide-3: #16568A;
  --sapphire-dusk-glide-4: #2C88CD;
  --sapphire-dusk-glide-5: #63B5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-dusk-glide": {
        1: "#010E1D",
        2: "#082E4D",
        3: "#16568A",
        4: "#2C88CD",
        5: "#63B5F5",
      }
    }
  }
}

Hex values

Color 1#010E1D

Color 2#082E4D

Color 3#16568A

Color 4#2C88CD

Color 5#63B5F5

Accessibility

Contrast checker

1.4:1Fail

2.5:1Fail

5.1:1AA

8.7:1AAA

1.4:1Fail

1.8:1Fail

3.7:1AA18

6.3:1AA

2.5:1Fail

1.8:1Fail

2:1Fail

3.5:1AA18

5.1:1AA

3.7:1AA18

2:1Fail

1.7:1Fail

8.7:1AAA

6.3:1AA

3.5:1AA18

1.7:1Fail

Similar palettes

More like Sapphire Dusk Glide

Ancient Marble Column

Ancient Marble Statue

Ancient Marble Temple