Palette

Aqua Ocean Tide

Refreshing blues and greens inspired by clear ocean waters and gentle ebb of the tide.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aqua Ocean Tide 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 Aqua Ocean Tide.

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

Data visualization

#00FFFF#00CED1#20B2AA#48D1CC#66CDAA

Palette guide

How to use Aqua Ocean Tide

Overview

The Aqua Ocean Tide palette offers refreshing blues and greens inspired by clear ocean waters and the gentle ebb of the tide. This cool collection spans from the vibrant #00FFFF to the deep, grounding #66CDAA, with #00CED1 and #20B2AA providing lush, inviting transitions. Perfect for designs seeking an organic, natural, and subtly restorative aesthetic, these hex codes are ideal for wellness branding, eco-friendly web interfaces, or editorial content focused on nature. Designers and developers will find these colors excellent for crafting serene digital experiences, from herbal product sites to sustainable living platforms, where a calm, authentic aesthetic is desired.

Best used for

Tropical vacation and travel branding
Spa and wellness retreat websites
Marine conservation initiatives
Summer event invitations and decor
Nature photography portfolios
Calm and relaxing app interfaces

Suggested color roles

primary

Utilize #00FFFF as a vibrant yet soft primary accent for headings, important buttons, or delicate illustrations, providing a calming focal point.

secondary

Employ #00CED1 for supporting elements, subheadings, or subtle background panels, offering a slightly deeper aqua without losing serenity.

accent

Apply #20B2AA for delicate highlights, interactive states, or subtle graphic details, providing a gentle glow within the aqua spectrum.

background

The lightest tone, #00FFFF, is perfect as a clean, elegant background, ensuring excellent readability and a refined feel.

text

For optimal legibility, use #66CDAA or a deep charcoal against the lightest backgrounds like #00FFFF. For secondary text, #20B2AA can be effective on lighter backgrounds.

Accessibility notes

Ensure #66CDAA text on #00FFFF background meets WCAG AA contrast standards.
Avoid pairing #48D1CC or #20B2AA for small text on #00FFFF, as contrast will be too low.
Provide clear visual focus indicators for interactive elements, ensuring they stand out against similar background tones.
For critical information, consider using the darkest palette color for text on the lightest background.

Recommended combinations

Ocean Tide

Provides a clean, elegant foundation for content with a pristine background and soft, romantic accents.

#00FFFF · #66CDAA · #00CED1

Water Flow

Ideal for layered UI components or subtle branding, creating depth with closely related blue and green tones.

#20B2AA · #48D1CC · #00CED1

Refreshing Current

Excellent for backgrounds with a gentle luminosity or for decorative elements that need a soft, inviting sheen.

#48D1CC · #00FFFF · #20B2AA

CSS variables

:root {
  --aqua-ocean-tide-1: #00FFFF;
  --aqua-ocean-tide-2: #00CED1;
  --aqua-ocean-tide-3: #20B2AA;
  --aqua-ocean-tide-4: #48D1CC;
  --aqua-ocean-tide-5: #66CDAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aqua-ocean-tide": {
        1: "#00FFFF",
        2: "#00CED1",
        3: "#20B2AA",
        4: "#48D1CC",
        5: "#66CDAA",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#00CED1

Color 3#20B2AA

Color 4#48D1CC

Color 5#66CDAA

Accessibility

Contrast checker

1.6:1Fail

2.1:1Fail

1.5:1Fail

1.6:1Fail

1.3:1Fail

1:1Fail

2.1:1Fail

1.3:1Fail

1.4:1Fail

1.5:1Fail

1:1Fail

1.4:1Fail

1:1Fail

1.5:1Fail

1:1Fail

1.4:1Fail

1:1Fail

Similar palettes

More like Aqua Ocean Tide

Aqua Ocean Tide

See it in context.

Ready when you are.

Built with Aqua Ocean Tide.

How to use Aqua Ocean Tide

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ocean Tide

Water Flow

Refreshing Current

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Aqua Ocean Tide