Palette

Indigo Shard Gleam

A rich and sophisticated palette featuring deep indigos and blues, reminiscent of precious sapphire shards.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Indigo Shard Gleam 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 Indigo Shard Gleam.

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

Data visualization

#1E2A3B#304E6C#4B6E92#7D9CC1#131E2A

Palette guide

How to use Indigo Shard Gleam

Overview

The Indigo Shard Gleam palette is a rich and sophisticated collection of deep indigos and blues, perfect for projects requiring an elegant and moody aesthetic. Inspired by precious sapphire shards, this palette features the profound darkness of #131E2A, a strong primary blue in #1E2A3B, and a striking accent with #7D9CC1. The mid-tones like #304E6C and #4B6E92 provide versatile options for layering and depth. Designers and developers will find this scheme ideal for creating luxurious user interfaces, impactful branding, or immersive digital experiences that convey depth and exclusivity.

Best used for

Luxury brand websites and apps
High-end product showcases
Elegant dark mode UI themes
Sophisticated event invitations
Art gallery and museum digital presence
Corporate presentations with a refined touch

Suggested color roles

primary

Use #1E2A3B as a dominant color for large sections, headers, or primary branding elements, providing a deep, stable foundation.

secondary

Apply #304E6C for supporting elements like secondary navigation, card backgrounds, or subtle accent panels, offering depth without overpowering.

accent

Highlight interactive elements, calls to action, or key information with #7D9CC1 to draw attention effectively against the darker tones.

background

Utilize #131E2A for a truly immersive, dark background, creating a luxurious and deep canvas for content to stand out.

text

For optimal readability, use a crisp white or a very light grey (e.g., #F0F0F0) for text on the darker background and primary colors.

Accessibility notes

Ensure sufficient contrast between light text (like white) and the dark backgrounds such as #131E2A and #1E2A3B.
When using #7D9CC1 as an accent, verify its contrast against #304E6C or #4B6E92 to ensure visibility for all users.
Avoid using mid-tones like #4B6E92 for small or critical text on a dark background as contrast may be insufficient.
Maintain clear visual hierarchy by reserving the brightest colors for interactive elements and important highlights.

Recommended combinations

Deep Contrast

Ideal for dark mode interfaces: #131E2A as background, #7D9CC1 for primary CTAs, and #1E2A3B for major headers or primary buttons.

#131E2A · #7D9CC1 · #1E2A3B

Subtle Gradient

Excellent for layered backgrounds, data visualization charts, or UI elements that require a sense of depth and progression.

#1E2A3B · #304E6C · #4B6E92

Highlight Focus

Use #304E6C as a card background, #7D9CC1 for an icon or small graphic, and #1E2A3B for text or a strong border.

#304E6C · #7D9CC1 · #1E2A3B

CSS variables

:root {
  --indigo-shard-gleam-1: #1E2A3B;
  --indigo-shard-gleam-2: #304E6C;
  --indigo-shard-gleam-3: #4B6E92;
  --indigo-shard-gleam-4: #7D9CC1;
  --indigo-shard-gleam-5: #131E2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "indigo-shard-gleam": {
        1: "#1E2A3B",
        2: "#304E6C",
        3: "#4B6E92",
        4: "#7D9CC1",
        5: "#131E2A",
      }
    }
  }
}

Hex values

Color 1#1E2A3B

Color 2#304E6C

Color 3#4B6E92

Color 4#7D9CC1

Color 5#131E2A

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

5.1:1AA

1.2:1Fail

1.7:1Fail

1.6:1Fail

3:1AA18

2:1Fail

2.7:1Fail

1.6:1Fail

1.9:1Fail

3.2:1AA18

5.1:1AA

3:1AA18

1.9:1Fail

5.9:1AA

1.2:1Fail

2:1Fail

3.2:1AA18

5.9:1AA

Similar palettes

More like Indigo Shard Gleam

View all dark

Crimson Silk Drape

Amethyst Veil Mystique

Cosmic Painter's Canvas

Crimson Spark

Deco Grandeur Noir

Deep Indigo Inkwell