Palette

Ocean Gemstone Azure

Glimmering blues and aquas evoking the hidden beauty of a clear, sparkling ocean tide pool.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Gemstone Azure 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 Ocean Gemstone Azure.

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

Data visualization

#0A2463#1E4E78#3A7CA5#6BCBCC#A8DCD9

Palette guide

How to use Ocean Gemstone Azure

Overview

The Ocean Gemstone Azure palette evokes the hidden beauty of a clear, sparkling ocean tide pool, featuring glimmering blues and aquas. From the deep, rich #0A2463 (Dark Cerulean) and #1E4E78 (Midnight Blue) to the vibrant #3A7CA5 (Steel Blue) and the striking #6BCBCC (Turquoise), culminating in the serene #A8DCD9 (Light Sea Green). This palette offers designers and developers a sophisticated yet refreshing spectrum. It's perfect for projects that aim to convey depth, clarity, and a touch of natural luxury. Ideal for branding, web interfaces, or digital art that seeks a harmonious blend of cool, captivating tones with a hint of preciousness.

Best used for

Luxury spa or wellness brands
High-end jewelry websites
Marine conservation initiatives
Tech company interfaces
Resort and travel marketing
Environmental education platforms

Suggested color roles

primary

#0A2463 provides a profound and stable base for backgrounds or primary branding, conveying depth.

secondary

Use #1E4E78 or #3A7CA5 for secondary content blocks, navigation, or to add structural definition.

accent

#6BCBCC serves as a vibrant, eye-catching accent, ideal for calls to action, interactive elements, or key highlights.

background

#A8DCD9 offers a light, serene background for content. #0A2463 can be used for a dramatic, dark backdrop.

text

On darker shades like #0A2463, white or a very light gray is essential. For #A8DCD9, a deep blue like #0A2463 ensures readability.

Accessibility notes

Ensure adequate contrast for text on dark backgrounds; white or light gray is crucial for #0A2463, #1E4E78, and #3A7CA5.
#6BCBCC might be challenging for small text on very light backgrounds; use it for larger headings or graphical elements.
When using #A8DCD9 as a background, ensure text in darker blues like #0A2463 meets AA/AAA contrast ratios.
Provide clear visual cues for interactive elements, especially if using similar tones for backgrounds and foregrounds.

Recommended combinations

Deep Pool Sparkle

Creates a dynamic contrast, perfect for hero sections or highlighting key features against a dark base.

#0A2463 · #6BCBCC · #A8DCD9

Azure Layers

Ideal for complex UI layouts, providing depth and clear separation between elements.

#1E4E78 · #3A7CA5 · #A8DCD9

Gemstone Glow

Suited for light-themed designs, using the vibrant aqua as an accent and the deep blue for text.

#A8DCD9 · #6BCBCC · #0A2463

CSS variables

:root {
  --ocean-gemstone-azure-1: #0A2463;
  --ocean-gemstone-azure-2: #1E4E78;
  --ocean-gemstone-azure-3: #3A7CA5;
  --ocean-gemstone-azure-4: #6BCBCC;
  --ocean-gemstone-azure-5: #A8DCD9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-gemstone-azure": {
        1: "#0A2463",
        2: "#1E4E78",
        3: "#3A7CA5",
        4: "#6BCBCC",
        5: "#A8DCD9",
      }
    }
  }
}

Hex values

Color 1#0A2463

Color 2#1E4E78

Color 3#3A7CA5

Color 4#6BCBCC

Color 5#A8DCD9

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

7.6:1AAA

9.6:1AAA

1.7:1Fail

1.9:1Fail

4.6:1AA

5.8:1AA

3.2:1AA18

1.9:1Fail

2.4:1Fail

3:1AA18

7.6:1AAA

4.6:1AA

2.4:1Fail

1.3:1Fail

9.6:1AAA

5.8:1AA

3:1AA18

1.3:1Fail

Similar palettes

More like Ocean Gemstone Azure