Palette

Tropical Reef Dive

Bright, clear aquas and blues of a healthy coral reef, teeming with unseen life.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#20B2AA#5F9EA0#87CEFA#ADD8E6#E0FFFF

Palette guide

How to use Tropical Reef Dive

Overview

The Tropical Reef Dive palette evokes the clear, serene depths of a healthy coral reef, offering a refreshing and calming aesthetic. Dominated by cool blues and aquas, it features the balanced teal #20B2AA, a slightly muted cadet blue #5F9EA0, and the bright sky blue #87CEFA. Lighter tones like #ADD8E6 (Light Blue) and #E0FFFF (Light Cyan) complete the aquatic spectrum, providing versatility for backgrounds and subtle accents. This palette is ideal for projects aiming to convey tranquility, natural beauty, or a sense of coolness. Designers can use it to create clean, inviting interfaces, while developers will find its harmonious range suitable for diverse UI elements.

Best used for

Eco-friendly or conservation-focused websites
Spa and wellness brand identities
Marine biology educational content
Travel agencies promoting tropical destinations
Relaxation apps and interfaces
Coastal home decor branding

Suggested color roles

primary

Use #20B2AA (Light Sea Green) for main headings or significant UI elements, establishing a calm yet confident presence.

secondary

Apply #5F9EA0 (Cadet Blue) for supporting text, navigation, or secondary buttons, adding depth without overpowering.

accent

Utilize #87CEFA (Light Sky Blue) for interactive elements, hover states, or subtle highlights to introduce a touch of brightness and clarity.

background

Employ #E0FFFF (Light Cyan) as a clean, airy background, providing ample space and a refreshing feel for content.

text

A dark blue-grey like #4A6C7C offers excellent readability on lighter backgrounds like #E0FFFF. For darker backgrounds, white text is recommended.

Accessibility notes

Ensure sufficient contrast when using #ADD8E6 or #E0FFFF for backgrounds, especially with light text; dark text is generally preferred.
Pair #20B2AA with white or very light text for optimal readability, checking WCAG guidelines.
Avoid using #E0FFFF as a primary text color due to its low contrast against white or light backgrounds.
The subtle differences between #ADD8E6 and #E0FFFF might be challenging for users with color vision deficiencies; use them thoughtfully.

Recommended combinations

Deep Water Serenity

Creates a tranquil and professional look, suitable for corporate sites or applications emphasizing calm and clarity.

#20B2AA · #5F9EA0 · #E0FFFF

Clear Horizon

Excellent for headers and visual elements that convey openness and freshness, like travel or weather apps.

#87CEFA · #ADD8E6 · #20B2AA

Subtle Aquatic Blend

Perfect for backgrounds, secondary information panels, or subtle gradients, offering a soft and harmonious feel.

#E0FFFF · #5F9EA0 · #ADD8E6

CSS variables

:root {
  --tropical-reef-dive-1: #20B2AA;
  --tropical-reef-dive-2: #5F9EA0;
  --tropical-reef-dive-3: #87CEFA;
  --tropical-reef-dive-4: #ADD8E6;
  --tropical-reef-dive-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-reef-dive": {
        1: "#20B2AA",
        2: "#5F9EA0",
        3: "#87CEFA",
        4: "#ADD8E6",
        5: "#E0FFFF",
      }
    }
  }
}

Hex values

Color 1#20B2AA

Color 2#5F9EA0

Color 3#87CEFA

Color 4#ADD8E6

Color 5#E0FFFF

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.7:1Fail

2.5:1Fail

1.2:1Fail

1.8:1Fail

2:1Fail

2.9:1Fail

1.5:1Fail

1.8:1Fail

1.1:1Fail

1.6:1Fail

1.7:1Fail

2:1Fail

1.1:1Fail

1.4:1Fail

2.5:1Fail

2.9:1Fail

1.6:1Fail

1.4:1Fail

Similar palettes

More like Tropical Reef Dive