Back to palettes

Palette

Elegant Sapphire Skies

Deep, luxurious blues inspired by twilight skies and precious sapphire gems, offering a sophisticated feel.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Elegant Sapphire Skies 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 Elegant Sapphire Skies.

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

Data visualization

#00008B#0000CD#191970#483D8B#6A5ACD

Palette guide

How to use Elegant Sapphire Skies

Overview

The Elegant Sapphire Skies palette features deep, luxurious blues inspired by twilight skies and precious sapphire gems, offering a sophisticated feel. This collection includes deep navy (#00008B), rich royal blue (#0000CD), dark indigo (#191970), muted slate blue (#483D8B), and vibrant lavender blue (#6A5ACD). It's an ideal choice for designs that aim to convey trust, stability, and understated luxury. Designers and developers can leverage these harmonious blues to create captivating branding, professional digital experiences, or serene editorial layouts. The monochromatic nature, ranging from deep dark to softer tones, allows for depth and visual interest without being overwhelming.

Best used for

  • Corporate and financial institution branding
  • Luxury travel and hospitality websites
  • High-end tech product interfaces
  • Educational and scientific presentations
  • Elegant event invitations and decor
  • Sophisticated editorial and magazine layouts

Suggested color roles

primary

Deep navy (#00008B) or dark indigo (#191970) serves as an excellent foundational color for backgrounds or main content areas, conveying depth and authority.

secondary

Rich royal blue (#0000CD) or muted slate blue (#483D8B) are versatile for supporting content blocks, subheadings, or subtle dividers, adding sophistication.

accent

Vibrant lavender blue (#6A5ACD) offers a gentle yet prominent accent, perfect for highlights, interactive elements, or subtle flourishes that demand attention.

background

Dark indigo (#191970) or deep navy (#00008B) creates a serene, luxurious backdrop, allowing lighter blues to emerge with an ethereal quality.

text

For body text, use white or a very light gray on dark backgrounds for optimal readability. For headings or impactful statements, vibrant lavender blue (#6A5ACD) provides excellent contrast against darker palette colors.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing #483D8B with #6A5ACD, which may have low contrast.
  • Prioritize using white or a very light gray for body text on dark backgrounds to meet WCAG contrast requirements.
  • Avoid using darker palette colors like #00008B or #191970 for text on very dark backgrounds due to readability issues.
  • Consider using larger font sizes for any text set in mid-tone blues to improve legibility.

Recommended combinations

Sapphire Depth

Ideal for creating a deep, luxurious background gradient or layered UI elements that evoke the depth of a sapphire gem.

#191970 · #0000CD · #6A5ACD

Sky Accent

Excellent for calls-to-action, highlighted elements, or decorative flourishes that need to stand out with elegant lightness.

#00008B · #6A5ACD · #483D8B

Twilight Harmony

Perfect for creating harmonious content blocks or illustrations, offering a smooth transition of complementary blue tones.

#0000CD · #483D8B · #6A5ACD

CSS variables

:root {
  --elegant-sapphire-skies-1: #00008B;
  --elegant-sapphire-skies-2: #0000CD;
  --elegant-sapphire-skies-3: #191970;
  --elegant-sapphire-skies-4: #483D8B;
  --elegant-sapphire-skies-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "elegant-sapphire-skies": {
        1: "#00008B",
        2: "#0000CD",
        3: "#191970",
        4: "#483D8B",
        5: "#6A5ACD",
      }
    }
  }
}

Related searches

elegant sapphire palettetwilight blue color schemeluxury blue designdark blue elegant colorssophisticated blue UI

Palette colors

Hex values

Color 1#00008B
·
Color 2#0000CD
·
Color 3#191970
·
Color 4#483D8B
·
Color 5#6A5ACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1:1Fail
1.7:1Fail
2.9:1Fail
2
1.4:1Fail
1.3:1Fail
1.2:1Fail
2.1:1Fail
3
1:1Fail
1.3:1Fail
1.6:1Fail
2.8:1Fail
4
1.7:1Fail
1.2:1Fail
1.6:1Fail
1.7:1Fail
5
2.9:1Fail
2.1:1Fail
2.8:1Fail
1.7:1Fail

Similar palettes

More like Elegant Sapphire Skies

View all dark
Dark Sapphire Elegance
Art Deco Sapphire
Velvet Starry Night
Cosmic Jellyfish Bloom
Cosmic Painter's Canvas
Crimson Canopy Twilight