Palette

Tropical Reef Jewel

Dazzling hues mirroring the vibrant life and pristine waters of a sunlit tropical coral reef.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A8B7B#00A693#00CCB4#50E8C4#E9F4DB

Palette guide

How to use Tropical Reef Jewel

Overview

The Tropical Reef Jewel palette presents dazzling hues mirroring the vibrant life and pristine waters of a sunlit tropical coral reef. This palette is rich in cool, clear aquas and greens, featuring a deep teal #0A8B7B, a brighter aqua #00A693, and a lively cyan #00CCB4. A lighter, refreshing mint #50E8C4 adds a touch of brightness, while the very light, almost neutral #E9F4DB (Pale Cyan) provides a clean base. It's an excellent choice for designs aiming for a fresh, elegant, and sophisticated aquatic theme. Designers can leverage its harmonious progression of blues and greens, while developers will find it versatile for creating clean, inviting user interfaces.

Best used for

Luxury travel and resort branding
High-end spa and beauty product packaging
Sustainable marine product websites
Environmental awareness campaigns
Clean, modern web and app interfaces
Jewelry or accessory showcases

Suggested color roles

primary

Use #0A8B7B (Dark Cyan) for main headers or primary UI elements, conveying depth, luxury, and stability.

secondary

Apply #00A693 (Persian Green) for subheadings, navigation, or important text, maintaining a sophisticated and clear tone.

accent

Utilize #00CCB4 (Turquoise) for interactive elements, hover states, or small details that require a bright, clean pop.

background

Employ #E9F4DB (Pale Cyan) as a clean, airy background, providing a pristine canvas that enhances readability and freshness.

text

For dark text, a deep charcoal like #3C4A4A is excellent on #E9F4DB. For darker shades like #0A8B7B, #00A693, and #00CCB4, white text offers optimal contrast.

Accessibility notes

Ensure high contrast when pairing #E9F4DB with lighter text colors; darker text is generally more legible.
The subtle differences between #50E8C4 and #E9F4DB might be hard for some users; use them for distinct purposes.
White text on #0A8B7B, #00A693, and #00CCB4 typically provides good readability according to WCAG standards.
Avoid using #E9F4DB as a primary text color due to its low contrast against white or very light backgrounds.

Recommended combinations

Elegant Depths

Creates a sophisticated and serene feel, perfect for luxury branding or content requiring a high-end, clean aesthetic.

#0A8B7B · #00A693 · #E9F4DB

Fresh & Clear

Ideal for interactive elements, dashboards, or sections where a bright, refreshing, and modern look is desired.

#00CCB4 · #50E8C4 · #0A8B7B

Pristine Horizon

Excellent for backgrounds, subtle gradients, or informational panels, providing a light, airy, and inviting presentation.

#E9F4DB · #00A693 · #50E8C4

CSS variables

:root {
  --tropical-reef-jewel-1: #0A8B7B;
  --tropical-reef-jewel-2: #00A693;
  --tropical-reef-jewel-3: #00CCB4;
  --tropical-reef-jewel-4: #50E8C4;
  --tropical-reef-jewel-5: #E9F4DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-reef-jewel": {
        1: "#0A8B7B",
        2: "#00A693",
        3: "#00CCB4",
        4: "#50E8C4",
        5: "#E9F4DB",
      }
    }
  }
}

Hex values

Color 1#0A8B7B

Color 2#00A693

Color 3#00CCB4

Color 4#50E8C4

Color 5#E9F4DB

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

2.7:1Fail

3.7:1AA18

1.4:1Fail

1.5:1Fail

2:1Fail

2.7:1Fail

2.1:1Fail

1.5:1Fail

1.3:1Fail

1.8:1Fail

2.7:1Fail

2:1Fail

1.3:1Fail

3.7:1AA18

2.7:1Fail

1.8:1Fail

1.3:1Fail

Similar palettes

More like Tropical Reef Jewel

Tropical Reef Jewel

See it in context.

Ready when you are.

Built with Tropical Reef Jewel.

How to use Tropical Reef Jewel

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Elegant Depths

Fresh & Clear

Pristine Horizon

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Tropical Reef Jewel