Palette

Deep Sea Jewel

Sparkling, vibrant aquas and teals reminiscent of precious gems nestled in deep ocean currents.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008080#40E0D0#20B2AA#00CED1#48D1CC

Palette guide

How to use Deep Sea Jewel

Overview

The Deep Sea Jewel palette is a vibrant collection of sparkling aquas and teals, reminiscent of precious gems nestled in deep ocean currents. Featuring lively hues like #008080, #40E0D0, and #00CED1, this palette radiates energy and freshness. It's an excellent choice for designs that aim to convey vitality, luxury, or a refreshing aquatic theme. The bright and harmonious nature of these colors, including #20B2AA and #48D1CC, allows for dynamic and engaging visual compositions without being overwhelming. Designers can harness this palette to create impactful, memorable, and visually appealing experiences across various media.

Best used for

Coastal tourism websites and branding
Jewelry or luxury accessory marketing
Spa and wellness brand identity
Summer fashion or swimwear collections
Marine conservation initiatives
Refreshing app interfaces and dashboards

Suggested color roles

primary

Use #008080 as a strong foundational color for headers, main sections, or dominant branding elements, providing depth.

secondary

Apply #20B2AA for secondary content, backgrounds, or larger graphic elements, offering a slightly softer yet still vibrant teal.

accent

Highlight interactive elements, calls to action, or key visual features with the luminous #40E0D0 or #00CED1 for maximum impact.

background

A lighter shade like #48D1CC can serve as a refreshing background, or use #008080 for a deep, rich canvas with light text.

text

For darker backgrounds, use crisp white or a light gray. For lighter backgrounds like #40E0D0, a dark navy or black text works well.

Accessibility notes

Ensure sufficient contrast when using #008080 or #20B2AA for text on lighter shades like #40E0D0 or #48D1CC.
The vibrancy of the palette requires careful consideration for users with color vision deficiencies; test combinations thoroughly.
Avoid placing similar mid-tone teals like #20B2AA and #48D1CC next to each other for critical information unless contrast is enhanced.
Always check text and background color combinations against WCAG guidelines for readability.

Recommended combinations

Aqua Radiance

Creates a vibrant, energetic composition, perfect for hero sections or prominent calls to action.

#008080 · #40E0D0 · #00CED1

Teal Harmony

Ideal for creating a soothing yet vibrant gradient or layered background, offering depth and tranquility.

#008080 · #20B2AA · #48D1CC

Jewel Pop

Excellent for primary background with a bright accent for interactive elements and a supportive secondary color.

#008080 · #40E0D0 · #20B2AA

CSS variables

:root {
  --deep-sea-jewel-1: #008080;
  --deep-sea-jewel-2: #40E0D0;
  --deep-sea-jewel-3: #20B2AA;
  --deep-sea-jewel-4: #00CED1;
  --deep-sea-jewel-5: #48D1CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-jewel": {
        1: "#008080",
        2: "#40E0D0",
        3: "#20B2AA",
        4: "#00CED1",
        5: "#48D1CC",
      }
    }
  }
}

Hex values

Color 1#008080

Color 2#40E0D0

Color 3#20B2AA

Color 4#00CED1

Color 5#48D1CC

Accessibility

Contrast checker

2.9:1Fail

1.8:1Fail

2.4:1Fail

2.6:1Fail

2.9:1Fail

1.6:1Fail

1.2:1Fail

1.1:1Fail

1.8:1Fail

1.6:1Fail

1.3:1Fail

1.4:1Fail

2.4:1Fail

1.2:1Fail

1.3:1Fail

1:1Fail

2.6:1Fail

1.1:1Fail

1.4:1Fail

1:1Fail

Similar palettes

More like Deep Sea Jewel

Tropical Fruit Smoothie

Tropical Oasis

Tropical Reef Jewel