Palette

Tropical Reef Vista

Vibrant blues and turquoises evoke the clear, colorful waters and rich marine life of a tropical coral reef.

coolenergetic5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008080#20B2AA#66CDAA#8FD8D2#C1EDED

Palette guide

How to use Tropical Reef Vista

Overview

The Tropical Reef Vista palette features vibrant blues and turquoises that evoke the clear, colorful waters and rich marine life of a tropical coral reef. This cool and refreshing palette includes a deep teal #008080, a balanced light sea green #20B2AA, and a soft medium aquamarine #66CDAA. Lighter, airy tones like #8FD8D2 (Turquoise Blue) and #C1EDED (Light Turquoise) complete the serene aquatic spectrum, providing versatility for backgrounds and subtle accents. It's an excellent choice for designs aiming for a tranquil yet energetic feel, perfect for conveying natural beauty and freshness. Designers can leverage its harmonious cool tones, while developers will find it suitable for clean, inviting user interfaces.

Best used for

Coastal real estate or vacation rentals
Marine conservation organizations
Eco-friendly product branding
Spa and wellness digital experiences
Nature photography portfolios
Clean, modern web design

Suggested color roles

primary

Use #008080 (Teal) for main headings or significant UI elements, establishing a grounded and sophisticated presence.

secondary

Apply #20B2AA (Light Sea Green) for subheadings, navigation, or important text, offering a clear and refreshing tone.

accent

Utilize #66CDAA (Medium Aquamarine) for interactive elements, hover states, or subtle highlights to introduce a touch of vibrancy.

background

Employ #C1EDED (Light Turquoise) as a clean, airy background, providing a spacious canvas that enhances readability and lightness.

text

For dark text, a deep blue-grey like #3A5C5C is effective on #C1EDED. For darker shades like #008080 and #20B2AA, white text ensures optimal contrast.

Accessibility notes

Ensure sufficient contrast when using #C1EDED as a background with lighter text; darker text is generally more legible.
The subtle differences between #8FD8D2 and #C1EDED might be challenging for users with color vision deficiencies; use them thoughtfully.
White text on #008080, #20B2AA, and #66CDAA typically provides good readability according to WCAG standards.
Avoid using #C1EDED as a primary text color due to its lightness and potential for low contrast against white.

Recommended combinations

Deep Ocean Calm

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

#008080 · #20B2AA · #C1EDED

Clear Water Shimmer

Ideal for headers, visual elements, or dashboards that convey openness, freshness, and a gentle shimmer.

#66CDAA · #8FD8D2 · #20B2AA

Vista Horizon

Perfect for backgrounds, subtle gradients, or informational panels, offering a light, airy, and inviting presentation.

#C1EDED · #008080 · #8FD8D2

CSS variables

:root {
  --tropical-reef-vista-1: #008080;
  --tropical-reef-vista-2: #20B2AA;
  --tropical-reef-vista-3: #66CDAA;
  --tropical-reef-vista-4: #8FD8D2;
  --tropical-reef-vista-5: #C1EDED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-reef-vista": {
        1: "#008080",
        2: "#20B2AA",
        3: "#66CDAA",
        4: "#8FD8D2",
        5: "#C1EDED",
      }
    }
  }
}

Hex values

Color 1#008080

Color 2#20B2AA

Color 3#66CDAA

Color 4#8FD8D2

Color 5#C1EDED

Accessibility

Contrast checker

1.8:1Fail

2.5:1Fail

2.9:1Fail

3.8:1AA18

1.8:1Fail

1.4:1Fail

1.6:1Fail

2.1:1Fail

2.5:1Fail

1.4:1Fail

1.2:1Fail

1.5:1Fail

2.9:1Fail

1.6:1Fail

1.2:1Fail

1.3:1Fail

3.8:1AA18

2.1:1Fail

1.5:1Fail

1.3:1Fail

Similar palettes

More like Tropical Reef Vista

View all cool

Aegean Blue Depths

Aurora Borealis Dream