Back to palettes

Palette

Mystic Tide Pool

Captures the serene, cool beauty of a hidden tide pool, teeming with subtle aquatic life.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008080#20B2AA#66CDAA#ADD8E6#F0F8FF

Palette guide

How to use Mystic Tide Pool

Overview

The "Mystic Tide Pool" palette (ID: mystic-tide-pool) captures the serene, cool beauty of a hidden tide pool, teeming with subtle aquatic life. This refreshing blend of teals and aquas, from the deep `#008080` to the near-white `#F0F8FF`, and including lively tones like `#20B2AA` and `#ADD8E6`, creates a fresh and tranquil aesthetic. Designers can leverage these colors to evoke a sense of calm, cleanliness, and natural beauty, making it ideal for wellness, marine, or environmentally-focused projects. The palette's range allows for versatile use in both light and airy designs, or as subtle accents in darker schemes.

Best used for

  • Beach resort and travel websites
  • Wellness and mindfulness applications
  • Clean and refreshing user interface designs
  • Marine conservation and ecological themes
  • Refreshing branding for beverages or health products
  • Educational content about aquatic life

Suggested color roles

primary

Utilize `#20B2AA` as a fresh primary color for calls-to-action or main headings, offering an inviting and clean focal point.

secondary

Employ `#008080` for foundational elements, strong text, or grounding sections, providing depth and stability.

accent

Apply `#ADD8E6` sparingly for delicate highlights, interactive elements, or subtle graphic accents, adding an airy, luminous touch.

background

The near-white `#F0F8FF` makes an excellent, clean background, promoting a spacious and refreshing feel.

text

For light backgrounds like `#F0F8FF`, use `#008080` or `#20B2AA` for body text. For headings or larger text, a dark charcoal provides strong contrast.

Accessibility notes

  • Ensure sufficient contrast for dark text on light backgrounds like `#F0F8FF` or `#ADD8E6` to meet WCAG AA standards.
  • When using `#20B2AA` for text, confirm it has enough contrast against its background, especially if the background is also a light cool tone.
  • Interactive elements should have clearly discernible states; for example, a button in `#66CDAA` could darken to `#008080` on hover.
  • Avoid using `#ADD8E6` and `#F0F8FF` for text/background combinations, as their subtle difference in lightness might hinder readability.

Recommended combinations

Fresh & Clean

Use `#F0F8FF` for a pristine background, `#008080` for strong titles, and `#20B2AA` for body text or interactive elements.

#F0F8FF · #008080 · #20B2AA

Aqua Depth

Apply `#20B2AA` for card backgrounds, `#ADD8E6` for delicate icons or highlights, and `#66CDAA` for supporting text.

#20B2AA · #ADD8E6 · #66CDAA

Serene Gradient

Create a visual flow with `#008080` as a deep base, `#ADD8E6` for a lighter header, and `#66CDAA` for key content sections.

#008080 · #ADD8E6 · #66CDAA

CSS variables

:root {
  --mystic-tide-pool-1: #008080;
  --mystic-tide-pool-2: #20B2AA;
  --mystic-tide-pool-3: #66CDAA;
  --mystic-tide-pool-4: #ADD8E6;
  --mystic-tide-pool-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-tide-pool": {
        1: "#008080",
        2: "#20B2AA",
        3: "#66CDAA",
        4: "#ADD8E6",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

serene tide pool colorsfresh aqua paletteocean blue green uiclean aquatic themelight sea colors

Palette colors

Hex values

Color 1#008080
·
Color 2#20B2AA
·
Color 3#66CDAA
·
Color 4#ADD8E6
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.5:1Fail
3.1:1AA18
4.4:1AA18
2
1.8:1Fail
1.4:1Fail
1.7:1Fail
2.4:1Fail
3
2.5:1Fail
1.4:1Fail
1.3:1Fail
1.8:1Fail
4
3.1:1AA18
1.7:1Fail
1.3:1Fail
1.4:1Fail
5
4.4:1AA18
2.4:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Mystic Tide Pool

View all cool
Aqua Seafoam Dream
Coastal Reef Ripple
Aqua Ocean Tide
Coastal Reef Haven
Monsoon Lagoon Shimmer
Mystic Sea Glass