Back to palettes

Palette

Oceanic Gemstone Gleam

Inspired by the radiant, deep blues and purples of precious gemstones found hidden within the ocean's depths.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Gemstone 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 Oceanic Gemstone Gleam.

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

Data visualization

#1560BD#0F52BA#4169E1#483D8B#191970

Palette guide

How to use Oceanic Gemstone Gleam

Overview

The "Oceanic Gemstone Gleam" palette, identified as oceanic-gemstone-gleam-2, offers a rich, elegant spectrum of deep blues and purples, reminiscent of precious gems hidden in the ocean. This sophisticated collection features the striking #1560BD and a slightly darker #0F52BA, providing a solid foundation of deep blue. The vibrant #4169E1 introduces a royal blue intensity, while #483D8B adds a mysterious, deep indigo-purple. Anchoring the palette is the profound #191970, a near-black navy. Designers can use these colors to convey luxury, depth, and refinement in branding, web interfaces, or editorial layouts. Developers will find this palette excellent for creating high-end digital experiences where a sense of prestige and subtle drama is desired, ensuring a cohesive and distinguished visual identity.

Best used for

  • Luxury brand identity (jewelry, high fashion)
  • Corporate websites with a sophisticated tone
  • Formal event invitations or branding
  • E-commerce platforms for premium products
  • Art gallery or museum digital presence
  • High-end tech company branding

Suggested color roles

primary

A strong, radiant blue #1560BD, perfect for main headings, brand logos, or prominent UI elements that need to convey authority and elegance.

secondary

A brighter, more energetic royal blue #4169E1, ideal for interactive elements, secondary calls-to-action, or graphic accents to add dynamism.

accent

A deep, intriguing indigo-purple #483D8B, excellent for subtle highlights, hover states, or decorative patterns that add a touch of mystery and luxury.

background

A very deep navy #191970, serving as a sophisticated and grounding background that enhances the luminosity of the brighter blues.

text

Use a light, near-white color for primary text on dark backgrounds like #191970. For accents or subheadings, a lighter blue like #1560BD can be used, ensuring good contrast.

Accessibility notes

  • Ensure light text (e.g., white or very light gray) has sufficient contrast against dark backgrounds like #191970 and #483D8B.
  • Avoid using mid-tone blues like #1560BD or #4169E1 as text on #0F52BA backgrounds without rigorous contrast checks.
  • For critical information, always prioritize a high contrast ratio, perhaps using white text on the darkest blues.
  • Consider using larger font sizes for text elements that employ mid-range blues to enhance readability.

Recommended combinations

Royal Depth

Ideal for hero sections, main navigation, or brand identity, providing a strong, elegant foundation.

#191970 · #1560BD · #4169E1

Indigo Gleam

Effective for content cards, secondary navigation, or subtle graphic elements, adding depth and intrigue.

#0F52BA · #483D8B · #1560BD

Gemstone Sparkle

Great for accentuating interactive elements, hover states, or premium product displays, leveraging contrast.

#4169E1 · #191970 · #483D8B

CSS variables

:root {
  --oceanic-gemstone-gleam-2-1: #1560BD;
  --oceanic-gemstone-gleam-2-2: #0F52BA;
  --oceanic-gemstone-gleam-2-3: #4169E1;
  --oceanic-gemstone-gleam-2-4: #483D8B;
  --oceanic-gemstone-gleam-2-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-gemstone-gleam-2": {
        1: "#1560BD",
        2: "#0F52BA",
        3: "#4169E1",
        4: "#483D8B",
        5: "#191970",
      }
    }
  }
}

Related searches

deep blue purple color schemeelegant gemstone paletteluxury brand colors bluesophisticated ui deep bluesoceanic jewel tones

Palette colors

Hex values

Color 1#1560BD
·
Color 2#0F52BA
·
Color 3#4169E1
·
Color 4#483D8B
·
Color 5#191970
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.3:1Fail
1.5:1Fail
2.4:1Fail
2
1.2:1Fail
1.5:1Fail
1.3:1Fail
2.1:1Fail
3
1.3:1Fail
1.5:1Fail
1.9:1Fail
3.1:1AA18
4
1.5:1Fail
1.3:1Fail
1.9:1Fail
1.6:1Fail
5
2.4:1Fail
2.1:1Fail
3.1:1AA18
1.6:1Fail

Similar palettes

More like Oceanic Gemstone Gleam

View all cool
Aqua Jewel
Azure Sapphire Gleam
Cobalt Ink Flow
Sapphire Glimmer Reef
Sapphire Symphony
Celestial Ocean Depth