Back to palettes

Palette

Aqua Jewel

Shades of blue mimicking the clear, captivating hues of a precious gemstone found in deep ocean waters.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aqua Jewel 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 Aqua Jewel.

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

Data visualization

#005B8B#008BBF#00BFFF#004A75#007BA0

Palette guide

How to use Aqua Jewel

Overview

The Aqua Jewel palette offers shades of blue mimicking the clear, captivating hues of a precious gemstone found in deep ocean waters. This elegant collection spans from the deep, grounding #004A75 to the bright, inviting #00BFFF, with #005B8B and #008BBF providing lush, inviting transitions. Perfect for designs seeking an organic, natural, and subtly restorative aesthetic, these hex codes are ideal for wellness branding, eco-friendly web interfaces, or editorial content focused on nature. Designers and developers will find these colors excellent for crafting serene digital experiences, from herbal product sites to sustainable living platforms, where a calm, authentic aesthetic is desired.

Best used for

  • Luxury branding and high-end product design
  • Jewelry and fashion marketing
  • Feminine lifestyle blogs and social media
  • Editorial design for high-end publications
  • Interior design for classic, opulent rooms
  • Vintage-inspired app interfaces

Suggested color roles

primary

Utilize #004A75 as a deep, anchoring primary for headings, important buttons, or strong graphic elements, providing sophisticated contrast.

secondary

Employ #005B8B for supporting elements, subheadings, or rich background panels, offering a deeper tone without losing the palette's softness.

accent

Apply #008BBF for subtle decorative accents, interactive states, or delicate graphic details, providing a gentle highlight.

background

The lightest tone, #00BFFF, is perfect as a clean, elegant background, ensuring excellent readability and a refined feel.

text

For optimal legibility, use #004A75 or a deep charcoal against the lightest backgrounds like #00BFFF. For secondary text, #005B8B can be effective on lighter backgrounds.

Accessibility notes

  • Ensure #004A75 text on #00BFFF background meets WCAG AA contrast standards.
  • Avoid pairing #008BBF or #007BA0 for small text on #00BFFF, as contrast will be too low.
  • Provide clear visual focus indicators for interactive elements, ensuring they stand out against similar background tones.
  • For critical information, consider using the darkest palette color for text on the lightest background.

Recommended combinations

Jewel Base

Creates a luxurious base for content with a soft background and rich, deep accents.

#00BFFF · #004A75 · #005B8B

Ocean Depths

Ideal for layered UI components or subtle branding, creating depth with closely related blue tones.

#008BBF · #007BA0 · #005B8B

Gemstone Glow

Excellent for backgrounds with a gentle luminosity or for decorative elements that need a soft, inviting sheen.

#007BA0 · #00BFFF · #008BBF

CSS variables

:root {
  --aqua-jewel-1: #005B8B;
  --aqua-jewel-2: #008BBF;
  --aqua-jewel-3: #00BFFF;
  --aqua-jewel-4: #004A75;
  --aqua-jewel-5: #007BA0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aqua-jewel": {
        1: "#005B8B",
        2: "#008BBF",
        3: "#00BFFF",
        4: "#004A75",
        5: "#007BA0",
      }
    }
  }
}

Related searches

aqua jewel color palettedeep ocean blue colorsgemstone blue schemeelegant cool designcaptivating blue tones

Palette colors

Hex values

Color 1#005B8B
·
Color 2#008BBF
·
Color 3#00BFFF
·
Color 4#004A75
·
Color 5#007BA0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.4:1AA18
1.3:1Fail
1.5:1Fail
2
1.9:1Fail
1.8:1Fail
2.4:1Fail
1.3:1Fail
3
3.4:1AA18
1.8:1Fail
4.4:1AA18
2.3:1Fail
4
1.3:1Fail
2.4:1Fail
4.4:1AA18
1.9:1Fail
5
1.5:1Fail
1.3:1Fail
2.3:1Fail
1.9:1Fail

Similar palettes

More like Aqua Jewel

View all cool
Sapphire Glimmer Reef
Celestial Ocean Depth
Celestial Ocean Mirror
Deep Sapphire Tide
Oceanic Gemstone Gleam
Azure Sapphire Gleam