Palette

Teal Serenity Shore

Reflects the tranquil beauty of shallow tropical waters meeting a distant, hazy horizon.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Teal Serenity Shore 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 Teal Serenity Shore.

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

Data visualization

#0077B6#00B4D8#90E0EF#CAF0F8#48CAE4

Palette guide

How to use Teal Serenity Shore

Overview

The Teal Serenity Shore palette captures the gentle allure of shallow tropical waters, blending serene blues with vibrant teals. From the deep #0077B6 to the almost ethereal #CAF0F8, and including the refreshing #00B4D8, this collection offers designers and developers a light, airy, and inviting range of colors. It's perfectly suited for creating interfaces that feel open, clean, and optimistic. The progression from deeper ocean blues to sparkling, near-white aquas allows for dynamic visual storytelling, ideal for projects aiming to evoke a sense of calm, escape, or refreshing clarity in their digital presence and branding.

Best used for

Travel and tourism websites (tropical destinations)
Skincare and beauty product branding
Children's educational apps (calm, inviting)
Cloud-based software interfaces (light, modern)
Lifestyle blogs and magazines
Eco-friendly product packaging design

Suggested color roles

primary

#0077B6 serves as a stable and trustworthy primary color, excellent for main navigation, headers, or key brand elements.

secondary

#00B4D8 provides a lively secondary shade, great for subheadings, active states, or illustrative elements.

accent

#48CAE4 acts as a bright, appealing accent, perfect for calls-to-action, interactive highlights, or important notifications.

background

#CAF0F8 offers a very light, almost white background, ensuring maximum readability and a fresh, expansive feel.

text

A dark charcoal or black on #CAF0F8 or #90E0EF ensures optimal readability. For darker elements, use #CAF0F8.

Accessibility notes

#0077B6 provides excellent contrast against #CAF0F8 for large text and main headings.
Be cautious with #90E0EF text on #CAF0F8; use a contrast checker to ensure sufficient readability.
The lighter colors like #90E0EF and #CAF0F8 are ideal for backgrounds, providing a clean canvas for darker text.
Always prioritize WCAG guidelines for text and interactive element contrast across the palette.

Recommended combinations

Tropical Breeze

Ideal for light, inviting sections, background gradients, or soft, approachable branding.

#CAF0F8 · #90E0EF · #00B4D8

Deep Shore

Suitable for impactful hero images, strong calls-to-action, or creating depth in a design.

#0077B6 · #00B4D8 · #48CAE4

Serene Clarity

Effective for clear visual hierarchy, with a bright background, deep primary elements, and vibrant accents.

#CAF0F8 · #0077B6 · #48CAE4

CSS variables

:root {
  --teal-serenity-shore-1: #0077B6;
  --teal-serenity-shore-2: #00B4D8;
  --teal-serenity-shore-3: #90E0EF;
  --teal-serenity-shore-4: #CAF0F8;
  --teal-serenity-shore-5: #48CAE4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "teal-serenity-shore": {
        1: "#0077B6",
        2: "#00B4D8",
        3: "#90E0EF",
        4: "#CAF0F8",
        5: "#48CAE4",
      }
    }
  }
}

Hex values

Color 1#0077B6

Color 2#00B4D8

Color 3#90E0EF

Color 4#CAF0F8

Color 5#48CAE4

Accessibility

Contrast checker

2:1Fail

3.3:1AA18

4:1AA18

2.5:1Fail

2:1Fail

1.7:1Fail

2:1Fail

1.3:1Fail

3.3:1AA18

1.7:1Fail

1.2:1Fail

1.3:1Fail

4:1AA18

2:1Fail

1.2:1Fail

1.6:1Fail

2.5:1Fail

1.3:1Fail

1.6:1Fail

Similar palettes

More like Teal Serenity Shore

Teal Serenity Shore

See it in context.

Ready when you are.

Built with Teal Serenity Shore.

How to use Teal Serenity Shore

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Tropical Breeze

Deep Shore

Serene Clarity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Teal Serenity Shore