Palette

Oceanic Gemstone Gleam

The sparkling depths of the ocean, where hidden gemstones catch the light with an elegant gleam.

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

#4682B4#1E90FF#0000CD#00BFFF#00FFFF

Palette guide

How to use Oceanic Gemstone Gleam

Overview

The "Oceanic Gemstone Gleam" palette, with ID oceanic-gemstone-gleam, captures the sparkling depths of the ocean through a spectrum of brilliant blues. This elegant collection ranges from the steel blue of #4682B4 to the vibrant dodger blue of #1E90FF. It includes the deep medium blue #0000CD, a luminous deep sky blue #00BFFF, and finishes with the bright aqua of #00FFFF. This palette is perfect for projects requiring a sense of clarity, freshness, and sophisticated dynamism. Designers can utilize these blues to create visually appealing interfaces, captivating brand assets, or modern editorial designs. Developers will find this palette excellent for crafting digital experiences that feel both serene and energetic, offering a versatile range for various UI components and data visualizations.

Best used for

Technology or software company branding
Financial services websites (trust, clarity)
Modern interior design concepts
Marine research or conservation initiatives
Digital art and illustration
Clean, minimalist web interfaces

Suggested color roles

primary

A vibrant, clear blue #1E90FF, ideal for main brand elements, calls-to-action, or prominent UI features that need to stand out.

secondary

A luminous deep sky blue #00BFFF, excellent for supporting graphics, navigation links, or sections requiring a lighter yet distinct blue.

accent

A bright, almost electric aqua #00FFFF, perfect for subtle highlights, interactive feedback, or small decorative elements to add a spark.

background

A muted steel blue #4682B4, providing a calm, sophisticated background that allows brighter elements to pop, or for larger content blocks.

text

Use a very dark blue like #0000CD or a deep charcoal for primary text on lighter backgrounds like #4682B4. White text works well on #0000CD.

Accessibility notes

Ensure sufficient contrast when using #00FFFF; it's generally too light for small text on most backgrounds in this palette.
Text in #0000CD on #4682B4 might pass, but verify contrast for readability, especially for body text.
White text on #1E90FF or #0000CD offers excellent readability.
Be cautious with #00BFFF for text on lighter blues; aim for larger font sizes or use it for decorative elements.

Recommended combinations

Oceanic Sparkle

Ideal for hero sections, interactive dashboards, or product highlights, combining depth with luminosity.

#4682B4 · #1E90FF · #00FFFF

Deep Blue Clarity

Effective for content blocks, data tables, or information architecture, providing clear visual hierarchy.

#0000CD · #00BFFF · #4682B4

Aqua Gleam

Great for calls-to-action, prominent icons, or accentuating key features, leveraging high contrast.

#1E90FF · #00FFFF · #0000CD

CSS variables

:root {
  --oceanic-gemstone-gleam-1: #4682B4;
  --oceanic-gemstone-gleam-2: #1E90FF;
  --oceanic-gemstone-gleam-3: #0000CD;
  --oceanic-gemstone-gleam-4: #00BFFF;
  --oceanic-gemstone-gleam-5: #00FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-gemstone-gleam": {
        1: "#4682B4",
        2: "#1E90FF",
        3: "#0000CD",
        4: "#00BFFF",
        5: "#00FFFF",
      }
    }
  }
}

Hex values

Color 1#4682B4

Color 2#1E90FF

Color 3#0000CD

Color 4#00BFFF

Color 5#00FFFF

Accessibility

Contrast checker

1.3:1Fail

2.7:1Fail

1.9:1Fail

3.3:1AA18

1.3:1Fail

3.4:1AA18

1.5:1Fail

2.6:1Fail

2.7:1Fail

3.4:1AA18

5.3:1AA

8.9:1AAA

1.9:1Fail

1.5:1Fail

5.3:1AA

1.7:1Fail

3.3:1AA18

2.6:1Fail

8.9:1AAA

1.7:1Fail

Similar palettes

More like Oceanic Gemstone Gleam

View all cool

Enchanted Ocean Shimmer

Aqua Jewel

Astral Quartz Shimmer

Azure Sapphire Gleam

Celestial Ice Sparkle

Celestial Ocean Depth