Back to palettes

Palette

Mystic Tide Pool

Captures the mysterious, tranquil blues and greens of a hidden tide pool at the edge of the ocean.

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#2F4F4F#48D1CC#66CDAA#0A3E3E

Palette guide

How to use Mystic Tide Pool

Overview

The "Mystic Tide Pool" palette (ID: mystic-tide-pool-2) captures the mysterious, tranquil blues and greens of a hidden tide pool at the ocean's edge. Featuring deep teals like `#0A3E3E` and `#008080`, alongside vibrant aquas such as `#48D1CC` and `#66CDAA`, this palette evokes serene aquatic depths. Designers can leverage these cool, refreshing hues to create immersive and calming digital experiences, ideal for themes related to marine life, wellness, or ecological conservation. Its blend of dark, grounding tones with bright, lively accents allows for dynamic and engaging visual compositions.

Best used for

  • Marine biology and ocean conservation websites
  • Spa and relaxation app interfaces
  • Ecological branding and product packaging
  • Serene web design for travel or nature blogs
  • Interactive educational content about aquatic ecosystems
  • Dark mode interfaces with an aquatic theme

Suggested color roles

primary

Utilize `#008080` as a strong primary color for main content areas or key informational elements, embodying a deep aquatic feel.

secondary

Employ `#2F4F4F` for foundational elements, large text blocks, or backgrounds, providing a dark, grounding contrast.

accent

Apply `#48D1CC` sparingly for vibrant highlights, interactive elements, or graphical accents, creating a luminous, energetic touch.

background

The deepest tone, `#0A3E3E`, serves as an excellent, mysterious background, allowing lighter elements to truly stand out.

text

For dark backgrounds like `#0A3E3E`, use `#66CDAA` or `#48D1CC` for main text. A pure white can also be used for headings to ensure maximum contrast.

Accessibility notes

  • Ensure high contrast when pairing lighter aquas like `#48D1CC` on darker backgrounds such as `#0A3E3E` for optimal readability.
  • Verify that interactive elements, such as buttons or links, have clear focus states that meet WCAG accessibility standards.
  • Avoid using `#0A3E3E` and `#2F4F4F` for text and background combinations, as their subtle difference may hinder readability for smaller text.
  • Test text legibility, especially for smaller font sizes, as deep green/blue hues can sometimes be challenging on screens.

Recommended combinations

Deep Ocean

Use `#0A3E3E` for a deep, mysterious background, `#66CDAA` for primary text, and `#008080` for important headings or buttons.

#0A3E3E · #66CDAA · #008080

Vibrant Pool

Apply `#2F4F4F` for card backgrounds, `#48D1CC` for glowing icons or indicators, and `#008080` for supporting text.

#2F4F4F · #48D1CC · #008080

Serene Layers

Create layered UI elements with `#008080` as a base, `#2F4F4F` for borders, and `#66CDAA` for interactive text.

#008080 · #2F4F4F · #66CDAA

CSS variables

:root {
  --mystic-tide-pool-2-1: #008080;
  --mystic-tide-pool-2-2: #2F4F4F;
  --mystic-tide-pool-2-3: #48D1CC;
  --mystic-tide-pool-2-4: #66CDAA;
  --mystic-tide-pool-2-5: #0A3E3E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-tide-pool-2": {
        1: "#008080",
        2: "#2F4F4F",
        3: "#48D1CC",
        4: "#66CDAA",
        5: "#0A3E3E",
      }
    }
  }
}

Related searches

mystic tide pool colorsdeep aqua green paletteocean serene uitranquil water themedark aquatic design

Palette colors

Hex values

Color 1#008080
·
Color 2#2F4F4F
·
Color 3#48D1CC
·
Color 4#66CDAA
·
Color 5#0A3E3E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
2.6:1Fail
2.5:1Fail
2.5:1Fail
2
1.9:1Fail
4.8:1AA
4.6:1AA
1.3:1Fail
3
2.6:1Fail
4.8:1AA
1:1Fail
6.4:1AA
4
2.5:1Fail
4.6:1AA
1:1Fail
6.1:1AA
5
2.5:1Fail
1.3:1Fail
6.4:1AA
6.1:1AA

Similar palettes

More like Mystic Tide Pool

View all cool
Aqua Dream Glow
Aqua Marine Reef
Cerulean Horizon Dive
Coastal Breeze Mist
Deep Sea Current
Tidal Pool Glimmer