Back to palettes

Palette

Sapphire Geode Shard

Reflects the mystical depths of a geode, with layers of rich blues and cool, ethereal highlights.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire Geode Shard 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 Geode Shard.

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

Data visualization

#191B2F#3C427B#5A6AD3#8FA5ED#C9D6FA

Palette guide

How to use Sapphire Geode Shard

Overview

The Sapphire Geode Shard palette reflects the mystical depths of a geode, with layers of rich blues and cool, ethereal highlights. It moves from the profound darkness of #191B2F, through intriguing mid-tones like #3C427B and #5A6AD3, to the delicate, almost lavender-tinged blues of #8FA5ED and #C9D6FA. This palette is uniquely elegant and modern, perfect for projects that seek to combine natural wonder with sophisticated design. Designers can use its distinct transition from deep to light for creating a sense of discovery and magic, while developers can leverage it for unique UI themes.

Best used for

  • High-end creative agencies
  • Luxury interior design branding
  • Mystical or fantasy-themed digital media
  • Modern art installations or galleries
  • Premium tech product interfaces
  • Unique event branding

Suggested color roles

primary

Use #191B2F (Very Dark Blue-Violet) as a deep, mysterious primary, ideal for immersive backgrounds, main headers, or to establish a sophisticated, almost otherworldly foundation.

secondary

Apply #3C427B (Deep Indigo) as a rich secondary for content panels, subheadings, or as a slightly lighter dark background, adding depth and intrigue.

accent

Employ #5A6AD3 (Vibrant Blue-Violet) as a striking accent for calls to action, important icons, or to introduce a focal point with a touch of elegance and energy.

background

Utilize #C9D6FA (Pale Blue-Violet) as a very light, ethereal background that provides excellent readability for darker text and enhances the overall delicate, crystalline feel.

text

For light backgrounds like #C9D6FA, use dark text (e.g., #191B2F or charcoal). For dark elements, use a very light text color (e.g., white or #C9D6FA).

Accessibility notes

  • Ensure strong contrast between #191B2F and #C9D6FA for body text.
  • #3C427B and #5A6AD3 might have insufficient contrast for body text on #C9D6FA; use for larger headings or decorative elements.
  • Avoid using #C9D6FA as text on a white background; contrast will be poor.
  • Always check WCAG AA compliance for all text and interactive element color combinations, especially those with subtle color shifts.

Recommended combinations

Geode Core

A deep, intriguing combination for impactful branding or creating a sense of mystery in dark mode.

#191B2F · #3C427B · #5A6AD3

Crystal Layers

A soft, ethereal gradient perfect for backgrounds, visual storytelling, or delicate UI elements.

#5A6AD3 · #8FA5ED · #C9D6FA

Shard Contrast

High contrast for excellent readability, combining a dark base with a luminous background and a supporting indigo.

#191B2F · #C9D6FA · #3C427B

CSS variables

:root {
  --sapphire-geode-shard-1: #191B2F;
  --sapphire-geode-shard-2: #3C427B;
  --sapphire-geode-shard-3: #5A6AD3;
  --sapphire-geode-shard-4: #8FA5ED;
  --sapphire-geode-shard-5: #C9D6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-geode-shard": {
        1: "#191B2F",
        2: "#3C427B",
        3: "#5A6AD3",
        4: "#8FA5ED",
        5: "#C9D6FA",
      }
    }
  }
}

Related searches

geode inspired color palettemystical blue violet schemeelegant cool gradientdeep crystal colorssophisticated blue design

Palette colors

Hex values

Color 1#191B2F
·
Color 2#3C427B
·
Color 3#5A6AD3
·
Color 4#8FA5ED
·
Color 5#C9D6FA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.6:1AA18
7.1:1AAA
11.7:1AAA
2
1.8:1Fail
2:1Fail
3.9:1AA18
6.4:1AA
3
3.6:1AA18
2:1Fail
2:1Fail
3.3:1AA18
4
7.1:1AAA
3.9:1AA18
2:1Fail
1.7:1Fail
5
11.7:1AAA
6.4:1AA
3.3:1AA18
1.7:1Fail

Similar palettes

More like Sapphire Geode Shard

View all cool
Azure Sapphire Gleam
Sapphire Gemstone Depth
Deep Sapphire Gaze
Kyanite Luster
Midnight Symphony Orchestra
Precious Jade Stream