Palette

Azure Tide Pool

A refreshing dive into crystal clear waters, reflecting the vibrant blues of shallow ocean tide pools.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Tide Pool 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 Azure Tide Pool.

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 Azure Tide Pool

Overview

The Azure Tide Pool palette offers a refreshing dive into crystal clear waters, reflecting the vibrant blues of shallow ocean tide pools. This collection spans from the deep, engaging #0077B6 to the bright, almost luminous #CAF0F8, including the energetic #00B4D8, the playful #48CAE4, and the soft #90E0EF. Designers can leverage these shades to create dynamic, refreshing, and inviting visual experiences. It's perfect for projects that aim to convey cleanliness, vitality, and a sense of aquatic adventure, bringing a vibrant yet calm energy to any design.

Best used for

Water sports and outdoor recreation brands
Environmental and marine conservation sites
Summer-themed marketing campaigns
Children's educational content (aquatic focus)
Refreshing beverage packaging
Spa or resort branding with a water theme

Suggested color roles

primary

#0077B6 - A deep, vibrant blue, excellent for main headings, important call-to-action buttons, and establishing brand presence.

secondary

#00B4D8 - A bright, clear blue, suitable for subheadings, navigation, and secondary interactive elements, adding energy.

accent

#48CAE4 - A lively aqua, perfect for highlights, interactive states, or small decorative elements that need to pop.

background

#CAF0F8 - The lightest, almost white blue, providing an expansive, clean, and refreshing backdrop for content.

text

#0077B6 - Or #00B4D8 for optimal readability against lighter backgrounds like #CAF0F8 and #90E0EF.

Accessibility notes

Ensure #0077B6 or #00B4D8 text on #CAF0F8 background meets WCAG AA contrast standards.
Avoid using #90E0EF or #48CAE4 for body text on #CAF0F8 due to insufficient contrast.
When using #00B4D8 on #90E0EF for text, verify contrast ratios, especially for smaller font sizes.
For critical information, always prioritize the darkest colors for text against the lightest backgrounds.

Recommended combinations

Deep Dive

Creates a vibrant, energetic, and engaging feel, ideal for active brands or dynamic interfaces.

#0077B6 · #00B4D8 · #48CAE4

Clear Shallows

Perfect for airy, refreshing designs, backgrounds, or content that needs to feel light and transparent.

#CAF0F8 · #90E0EF · #48CAE4

Tide Pool Pop

A high-contrast combination for clear hierarchy and visual impact, great for headlines and call-to-actions.

#0077B6 · #CAF0F8 · #00B4D8

CSS variables

:root {
  --azure-tide-pool-1: #0077B6;
  --azure-tide-pool-2: #00B4D8;
  --azure-tide-pool-3: #90E0EF;
  --azure-tide-pool-4: #CAF0F8;
  --azure-tide-pool-5: #48CAE4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-tide-pool": {
        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 Azure Tide Pool

Azure Tide Pool

See it in context.

Ready when you are.

Built with Azure Tide Pool.

How to use Azure Tide Pool

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Dive

Clear Shallows

Tide Pool Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Azure Tide Pool