Palette

Aqua Tide Pool

Refreshing and clear, capturing the sparkling essence of a sun-drenched tide pool's depths.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#004D40#00796B#009688#4DB6AC#80CBC4

Palette guide

How to use Aqua Tide Pool

Overview

The "Aqua Tide Pool" palette is a deeply refreshing and clear collection, capturing the sparkling essence of sun-drenched tide pool depths. This cool-toned palette spans rich teals and vibrant aquas, featuring the dark Teal #004D40 and the balanced Dark Cyan #00796B, alongside the classic Teal #009688. Lighter, more airy tones like Medium Aquamarine #4DB6AC and Aqua Blue #80CBC4 provide gentle transitions and highlights. Developers can employ this palette for robust, yet inviting, digital experiences that require a sense of tranquility and professionalism. Designers will find it perfect for branding related to nature, sustainability, health, or any project aiming for a refreshing and serene visual identity.

Best used for

Environmental organizations
Spa and wellness services
Eco-friendly product lines
Marine biology educational content
Sustainable living blogs
Relaxing app interfaces

Suggested color roles

primary

A deep, grounding teal #004D40 that provides a strong foundation, ideal for headers, footers, or primary branding elements.

secondary

A rich, balanced teal #00796B that supports the primary, suitable for navigation, important buttons, or key content sections.

accent

A classic teal #009688 that offers a vibrant yet serene accent, perfect for highlights, interactive elements, or graphic details.

background

A light, airy aqua blue #80CBC4, excellent for clean backgrounds that maintain the palette's refreshing feel while ensuring readability.

text

Use #004D40 for headings and a dark neutral like #222222 for body text on light backgrounds for optimal contrast.

Accessibility notes

Ensure sufficient contrast for text using #004D40 or #00796B on light backgrounds like #80CBC4.
Lighter shades like #4DB6AC and #80CBC4 should not be used for small body text without significant contrast.
Use a very dark neutral (e.g., black or charcoal) for main body text to ensure wcag compliance.
Interactive elements should clearly communicate their state, potentially using #009688 for hover/active states.

Recommended combinations

Deep Water Base

For establishing a strong, serene base in websites or apps, with dark teal as primary, light aqua as background, and mid-teal for secondary elements.

#004D40 · #80CBC4 · #00796B

Shimmering Accents

Ideal for creating depth and subtle highlights, perhaps in gradients or decorative elements, mimicking light reflecting on water.

#009688 · #4DB6AC · #80CBC4

Refreshing CTA

Effective for calls to action, using #00796B for buttons, #80CBC4 for surrounding space, and #004D40 for button text.

#00796B · #80CBC4 · #004D40

CSS variables

:root {
  --aqua-tide-pool-1: #004D40;
  --aqua-tide-pool-2: #00796B;
  --aqua-tide-pool-3: #009688;
  --aqua-tide-pool-4: #4DB6AC;
  --aqua-tide-pool-5: #80CBC4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aqua-tide-pool": {
        1: "#004D40",
        2: "#00796B",
        3: "#009688",
        4: "#4DB6AC",
        5: "#80CBC4",
      }
    }
  }
}

Hex values

Color 1#004D40

Color 2#00796B

Color 3#009688

Color 4#4DB6AC

Color 5#80CBC4

Accessibility

Contrast checker

1.8:1Fail

2.7:1Fail

4:1AA18

5.3:1AA

1.8:1Fail

1.4:1Fail

2.2:1Fail

2.9:1Fail

2.7:1Fail

1.4:1Fail

1.5:1Fail

2:1Fail

4:1AA18

2.2:1Fail

1.5:1Fail

1.3:1Fail

5.3:1AA

2.9:1Fail

2:1Fail

1.3:1Fail

Similar palettes

More like Aqua Tide Pool